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.
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
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
About the Author
0 comments:
Please let me know your view