This article will show you how you can display a Liquid Fill
Chart or water level indicator in your asp.net application in c#.net using JavaScript.
So for this first we will download the chart library from
below mention link
Now we will create a new asp.net application and add a page.
After adding the page we will add the below JavaScript library for chart
Now we will add control to display the chart.
<div class="chart"></div>
<div class="chart"></div>
<asp:HiddenField ID="chart1value" runat="server" />
<asp:HiddenField ID="chart2value" runat="server" />
|
In above code the hidden fields are used to capture the value
to be displayed on the chart.
Now add the below code.
var val1 = document.getElementById("<%=chart1value.ClientID %>").value;
var val2 = document.getElementById("<%=chart2value.ClientID %>").value;
var containers = document.getElementsByClassName('chart');
var options = [{
series: [{
type: 'liquidFill',
data: [val1],
radius: '70%',
}]
}, {
series: [{
type: 'liquidFill',
data: [val2],
radius: '70%',
}]
}];
var charts = [];
for (var i = 0; i < options.length; ++i) {
var chart =
echarts.init(containers[i]);
if (i > 0) {
options[i].series[0].silent = true;
}
chart.setOption(options[i]);
chart.setOption({
baseOption: options[i],
media: [{
query: {
maxWidth: 300
},
option: {
series: [{
label: {
fontSize:
26
}
}]
}
}]
});
charts.push(chart);
}
window.onresize = function () {
for (var i = 0; i <
charts.length; ++i) {
charts[i].resize();
}
};
setInterval(update, 3000);
|
Now add the below reference on page header.
<script src="Js/echarts.js"></script>
<script src="Js/echarts-liquidfill.js"></script>
<link href="css/chart.css" rel="stylesheet" />
|
Here is your complete code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Js/echarts.js"></script>
<script src="Js/echarts-liquidfill.js"></script>
<link href="css/chart.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="chart"></div>
<div class="chart"></div>
<asp:HiddenField ID="chart1value" runat="server" />
<asp:HiddenField ID="chart2value" runat="server" />
<script>
var val1 = document.getElementById("<%=chart1value.ClientID %>").value;
var val2 = document.getElementById("<%=chart2value.ClientID %>").value;
var containers = document.getElementsByClassName('chart');
var options = [{
series: [{
type: 'liquidFill',
data: [val1],
radius: '70%',
}]
}, {
series: [{
type: 'liquidFill',
data: [val2],
radius: '70%',
}]
}];
var charts = [];
for (var i = 0; i < options.length; ++i) {
var chart =
echarts.init(containers[i]);
if (i > 0) {
options[i].series[0].silent = true;
}
chart.setOption(options[i]);
chart.setOption({
baseOption: options[i],
media: [{
query: {
maxWidth: 300
},
option: {
series: [{
label: {
fontSize:
26
}
}]
}
}]
});
charts.push(chart);
}
window.onresize = function () {
for (var i = 0; i <
charts.length; ++i) {
charts[i].resize();
}
};
setInterval(update, 3000);
</script>
</form>
</body>
</html>
|
Now add the code to pass the value to JavaScript function to
display the value.
chart1value.Value = ".6";
chart2value.Value = ".5";
|
Now we have done run the application and check the output.
DOWNLOAD
About the Author
hi sir
ReplyDeleteI want to dynamic the chart so that i want arry of integer in aspx page,
how to retrieve array of data from server side to aspx page ?
program.cs
string[] ary = { "21", "23", "43", "54" };
hfmyChart1.Value = string.Join(",", ary);
program.aspx
var ctxdata=document.getElementById("<%=hfmyChart1.ClientID %>").value;
Store it in ViewState and access it on aspx page.
Delete