In this article I’m going
to explain how to create google Gauge chart from database in ASP.NET.
Gauges are
single value indicators that are used in dashboards, real-time monitors and
reports. We can use this chart to display Key Performance Indicators, progress
indicators, quantity indicators and etc. Gauge chart can be rendered within the browser using SVG or VML.
Data
format:
Each numeric value is displayed as a gauge. Two alternative data
formats are supported:
ü
Two columns. The first column should be a string, and contain
the gauge label. The second column should be a number, and contain the gauge
value.
ü
Any number of numeric columns. The label of each gauge is the
column's label.
Here
I’ve used Gauge chart to display system performance like Memory, CPU and Wi-Fi
from SQL Server database. So first we have to create table like this.
Table
design:
|
Column name
|
datatype
|
|
id
|
int
|
|
item
|
varchar(50)
|
|
value
|
varchar(10)
|
Sample
data:
|
id
|
item
|
value
|
|
1
|
Memory
|
80
|
|
2
|
CPU
|
60
|
|
3
|
Wi-Fi
|
30
|
Here
we’ve to use following code to load google JSAPI library
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
Designer
source code:
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Gauge
chart using Google Visualization</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Literal ID="lt" runat="server"></asp:Literal>
</div>
<div id="chart_div">
</div>
</form>
</body>
</html>
Note:
Here we have to use following
namespace for StringBuilder
class.
using System.Text;
C#
code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;
public partial class _Default :
System.Web.UI.Page
{
StringBuilder
str = new StringBuilder();
//Get connection
string from web.config
SqlConnection
conn = new SqlConnection("Data source=SPIDER; Initial catalog=Demo;
Integrated security=true");
protected void Page_Load(object
sender, EventArgs e)
{
if
(Page.IsPostBack == false)
{
BindChart();
}
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
string
cmd = "select item,value from DemoTbl";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
return
dt;
}
private void BindChart()
{
DataTable
dt = new DataTable();
try
{
dt = GetData();
str.Append(@"<script
type=text/javascript> google.load( *visualization*, *1*,
{packages:[*gauge*]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new
google.visualization.DataTable();
data.addColumn('string', 'item');
data.addColumn('number', 'value');
data.addRows(" + dt.Rows.Count + ");");
for
(int i = 0; i <= dt.Rows.Count - 1; i++)
{
str.Append("data.setValue( " + i + "," + 0 + ","
+ "'" + dt.Rows[i]["item"].ToString() + "');");
str.Append("data.setValue(" + i + "," + 1 + ","
+ dt.Rows[i]["value"].ToString() +
") ;");
}
str.Append("var
options = {width: 600, height: 300,redFrom: 90, redTo: 100,yellowFrom:75,
yellowTo: 90,minorTicks: 5};");
str.Append("
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));");
str.Append("
chart.draw(data, options); }");
str.Append("</script>");
lt.Text = str.ToString().TrimEnd(',').Replace('*',
'"');
}
catch
{ }
}
}
For more details please
refer following link.
https://developers.google.com/chart/interactive/docs/gallery/gauge