I am trying to build a web application using ASP.NET which will connect to the SQL server and create an analytical dashboard.
For the dashboard, I am using chart.js library, that include the linear gauge chart and circular gauge chart. The original code of the gauge is written in the .aspx file like shown below: (that's how it is also written in the circular gauge link)
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gauge Chart with datalabels plugin displaying labels</title>
<script src="https://unpkg.com/chart.js@2.8.0/dist/Chart.bundle.js"></script>
<script src="https://unpkg.com/chartjs-gauge@0.2.0/dist/chartjs-gauge.js"></script>
<script src="https://unpkg.com/chartjs-plugin-datalabels@0.7.0/dist/chartjs-plugin-datalabels.js"></script>
</head>
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var randomData = function() {
return [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor()
];
};
var randomValue = function(data) {
return Math.max.apply(null, data) * Math.random();
};
var data = randomData();
var value = randomValue(data);
var config = {
type: 'gauge',
data: {
labels: ['Success', 'Warning', 'Warning', 'Fail'],
datasets: [{
data: data,
value: value,
backgroundColor: ['green', 'yellow', 'orange', 'red'],
borderWidth: 2
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Gauge chart with datalabels plugin displaying labels'
},
layout: {
padding: {
bottom: 30
}
},
needle: {
// Needle circle radius as the percentage of the chart area width
radiusPercentage: 2,
// Needle width as the percentage of the chart area width
widthPercentage: 3.2,
// Needle length as the percentage of the interval between inner radius (0%) and outer radius (100%) of the arc
lengthPercentage: 80,
// The color of the needle
color: 'rgba(0, 0, 0, 1)'
},
valueLabel: {
display: false
},
plugins: {
datalabels: {
display: true,
formatter: function(value, context) {
return context.chart.data.labels[context.dataIndex];
},
//color: function (context) {
// return context.dataset.backgroundColor;
//},
color: 'rgba(0, 0, 0, 1.0)',
//color: 'rgba(255, 255, 255, 1.0)',
backgroundColor: null,
font: {
size: 20,
weight: 'bold'
}
}
}
}
};
window.onload = function() {
var ctx = document.getElementById('chart').getContext('2d');
window.myGauge = new Chart(ctx, config);
};
document.getElementById('randomizeData').addEventListener('click', function() {
config.data.datasets.forEach(function(dataset) {
dataset.data = randomData();
dataset.value = randomValue(dataset.data);
});
window.myGauge.update();
});
</script>
<body>
<div id="canvas-holder" style="width:100%">
<canvas id="chart"></canvas>
</div>
<button id="randomizeData">Randomize Data</button>
</body>
</html>And This is my page loader configuration in the as well as the connection to the SQL server, I also included an example of how I rendered a chart on C#:
protected void Page_Load(object sender, EventArgs e)
{
//Connect to the SQL server
string myConnection = ConfigurationManager.ConnectionStrings["DataBaseConnectionString"].ConnectionString;
SqlConnection con = new SqlConnection(myConnection);
String query = "SELECT* FROM DADLoggerTable";
SqlCommand cmd = new SqlCommand(query, con);
DataTable tb = new DataTable();
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
tb.Load(dr, LoadOption.OverwriteChanges);
con.Close();
}
catch { }
//Check if there is data in the datatable
if (tb != null)
{
//This is an example of how I included a chart
String chart = "";
chart = "<canvas id=\"line-chart\" width=\"120%\" height=\"30\"></canvas>";
chart += "<script>";
chart += "new Chart(document.getElementById(\"line-chart\"), { type: 'line', data: {labels: [";
//Select the first 460 data points
for (int i = 0; i < 460; i++)
chart += i.ToString() + ",";
chart = chart.Substring(0, chart.Length - 1);
chart += "],datasets: [{ data: [";
//Select data from the database and add to chart
String value = "";
for (int i = 0; i < tb.Rows.Count; i++)
value += tb.Rows[i]["Engine_Hours"].ToString() + ",";
value = value.Substring(0, value.Length - 1);
chart += value;
chart += "],label: \"Engine Hours\",borderColor: \"#cd3e3e\",fill: true}"; // Chart color
chart += "]},options: { title: { display: true,text: 'Engine Hours (hr)'} }"; // Chart title
chart += "});";
chart += "</script>";
//Render the chart
Literal1.Text = chart;
}
}
}
}How to select the values from the SQL server and feed them to the gauges. Also how to make the gauges responsive to incoming data from the SQL server and make it update without loading the webpage.
I know that this will require ajax call in javascript, how to implement the ajax call in my case, I haven't been able to successfully do it yet.
I would appreciate that.
Aucun commentaire:
Enregistrer un commentaire