connectseekers.com

Monday, 6 April 2020

Liquid Fill Chart In Asp.Net Using C#

4/06/2020 - By Pranav Singh 0



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

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Global Classified : Connectseekers.com
© 2014 aspdotnet-pools.com Designed by Bloggertheme9.
back to top