connectseekers.com

Saturday, 18 April 2020

Water Level Indicator Dashboard in Asp.net

4/18/2020 - By Pranav Singh 0


This article will show you how you can create a water level indicator dashboard in asp.net using c#.net with SQL database. In this I will show water tank, data in tabular format and graphical representation of the data by using chart.js chart library.

Chart Control Library URL: https://www.chartjs.org/

ECharts Liquid Fill Chart URL: https://github.com/radonbj/echarts-liquidfill
Here is the dashboard which we are going to build.



So first we will create a new asp.net application and add a web page. In this page add the below html code.

<form id="form1" runat="server">
        <div style="width: 100%; background-color: #808080; height: 20px;"></div>
        <div class="dashboardarea">
            <div class="chart" id="chart1"></div>
            <div class="chart" id="chart2"></div>
            <div id="label1"><b>Thank 1</b></div>
            <div id="label2"><b>Tank 2</b></div>
            <asp:HiddenField ID="chart1value" runat="server" />
            <asp:HiddenField ID="chart2value" runat="server" />
        </div>
        <div class="dashboardarea">
            <br />
            <asp:GridView ID="gvdata" runat="server" AllowPaging="True" PageSize="5"></asp:GridView>
        </div>
        <div class="dashboardarea" style="width: 100%">
            <hr />
        </div>
        <div class="dashboardarea" style="width: 100%;height:50%;">
            <div style="width: 100%;height:100px;">
                <canvas id="canvas"style="height:33vh; width:80vw"></canvas>
                 <asp:HiddenField ID="chartlabelvalue" runat="server" />
                <asp:HiddenField ID="charttank1" runat="server" />
                <asp:HiddenField ID="charttank2" runat="server" />
            </div>
        </div>
</form>

Now we will add the below library reference in the page of the header.

    <script src="Js/echarts.js"></script>
    <script src="Js/echarts-liquidfill.js"></script>
    <link href="css/chart.css" rel="stylesheet" />

    <script src="https://www.chartjs.org/dist/2.9.3/Chart.min.js"></script>
    <script src="https://www.chartjs.org/samples/latest/utils.js"></script>
    <style>
        .dashboardarea {
            width: 48%;
            border-right: 0px solid #808080;
            margin-right: 0;
            float: left;
        }

        #chart1, #chart2, #label1, #label2 {
            width: 48%;
            margin-right: 10px;
            float: left;
            text-align: center;
        }
    </style>
    <style>
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
        }

        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #1d4aa8;
            color: white;
        }
    </style>

Now check the library in you solution explorer.



Here is the query to create the table.


GO

/****** Object:  Table [dbo].[WaterLevelMaster]    Script Date: 18-04-2020 19:26:26 ******/
SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[WaterLevelMaster](
       [Id] [int] IDENTITY(1,1) NOT NULL,
       [TankName] [varchar](50) NULL,
       [WaterLevelDate] [date] NULL,
       [WaterLevelValue] [decimal](18, 2) NULL,
 CONSTRAINT [PK_WaterLevelMaster] PRIMARY KEY CLUSTERED
(
       [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO


Now we will create table and add the data into it.


Data of table


Now we will add the below code to display the water level chart.

  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: '55%',

                }]
            }, {
                series: [{
                    type: 'liquidFill',
                    data: [val2],
                    radius: '55%',
                }]
            }];

            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: 100
                        },
                        option: {
                            series: [{
                                label: {
                                    fontSize: 26
                                }
                            }]
                        }
                    }]
                });

                charts.push(chart);
            }

            window.onresize = function () {
                for (var i = 0; i < charts.length; ++i) {
                    charts[i].resize();
                }
            };

In above code I have assign the value to the hidden fields and then access the hiddenfield value and passed it into code.

Now we will check the code for chart.

//Display chart

            var tankvallavel = document.getElementById("<%=chartlabelvalue.ClientID %>").value.split(',');
            var tank1data = document.getElementById("<%=charttank1.ClientID %>").value.split(',');
            var tank2data = document.getElementById("<%=charttank2.ClientID %>").value.split(',');
            var config = {
                type: 'line',
                data: {
                    labels: tankvallavel,
                    datasets: [{
                        label: 'Tank 1',
                        fill: false,
                        backgroundColor: window.chartColors.red,
                        borderColor: window.chartColors.red,
                        data: tank1data,
                    },{
                        label: 'Tank 2',
                        fill: false,
                        backgroundColor: window.chartColors.blue,
                        borderColor: window.chartColors.blue,
                        data: tank2data,
                      
                    }]
                },
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Water Level Status'
                    },
                    tooltips: {
                        mode: 'index',
                        intersect: false,
                    },
                    hover: {
                        mode: 'nearest',
                        intersect: true
                    },
                    scales: {
                        xAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Date'
                            }
                        }],
                        yAxes: [{
                            display: true,
                            scaleLabel: {
                                display: true,
                                labelString: 'Value'
                            }
                        }]
                    }
                }
            };

            window.onload = function () {
                var ctx = document.getElementById('canvas').getContext('2d');
                window.myLine = new Chart(ctx, config);
            };

In above code I have capture the hidden field value and pass it to javascript code. Now lets check the server side code to access the data base data .


using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication2
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt = GetTankData();
            //for Chart X axis alue
            var waterleveldate = dt.AsEnumerable().Select(s => s.Field<DateTime>("WaterLevelDate").ToLongDateString()).Distinct().ToArray();
            chartlabelvalue.Value = string.Join(",", waterleveldate);

            //Tank 1 Value
            var tank1 = dt.AsEnumerable().Where(m => m.Field<string>("TankName") == "Tank1").Select(s => s.Field<decimal>("WaterLevelValue")).ToArray();
            charttank1.Value = string.Join(",", tank1);

            //Tank 2 Value
            var tank2 = dt.AsEnumerable().Where(m => m.Field<string>("TankName") == "Tank2").Select(s => s.Field<decimal>("WaterLevelValue")).ToArray();
            charttank2.Value = string.Join(",", tank2);

            //Bind data to table display
            gvdata.DataSource = dt;//.AsEnumerable().OrderBy(s => s.Field("WaterLevelDate"));
            gvdata.DataBind();

  chart1value.Value =Convert.ToString( dt.AsEnumerable().Where(m => m.Field<string>("TankName") == "Tank1").OrderByDescending(m => m.Field<int>("Id")).Select(s => s.Field<decimal>("WaterLevelValue")).ToArray()[0]/100);

            chart2value.Value = Convert.ToString(dt.AsEnumerable().Where(m => m.Field<string>("TankName") == "Tank2").OrderByDescending(m => m.Field<int>("Id")).Select(s => s.Field<decimal>("WaterLevelValue")).ToArray()[0] / 100);
        }

        public DataTable GetTankData()
        {
            DataTable dt = new DataTable();
            SqlConnection con = new SqlConnection(@"Server=LAPTOP-EVJEKV38\SQLEXPRESS; Database=TestDB; Integrated Security=True;");
            try
            {
                SqlDataAdapter da = new SqlDataAdapter("Select * from WaterLevelMaster;", con);
                con.Open();
                da.Fill(dt);
            }
            catch
            {

            }
            finally
            {
                con.Close();
            }
            return dt;
        }
    }
}

Now we have done run the application and check the output



DOWNLOAD




Tags: ,
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