How to integrate charts.JS and google chart in C#? RRS feed

  • Question

  • User-1313071134 posted

    I am building a web application using ASP.NET core web application.

    I have been using chart.js and google chart to create dashboards. This dashboard is connected to the SQL back-end server, and use the tabular data to display them in a chart on the front end.

    So until now, I have been using the existing template offered by chart.js and google charts, but I wasn't able to integrate the template with the SQL server in a way that every time I get a new data the charts dynamically change per chart (I don't want to refresh the entire web page to update the chart), therefore, ajax call is needed.

    So this is the code for the circular gauge, This is purely written in the .aspx file.  

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <script type="text/javascript">
           google.charts.load('current', { 'packages': ['gauge'] });
           function drawChart() {
               var data = google.visualization.arrayToDataTable([
                   ['Label', 'Value'],
                   ['T1', 80],
                   ['T2', 55],
                   ['T3', 68],
                   ['T4', 55],
                   ['T5', 68]
               var options = {
                   width: 400, height: 120,
                   redFrom: 90, redTo: 100,
                   yellowFrom: 75, yellowTo: 90,
                   minorTicks: 5
               var options = {
                   'width': 1500,
                   'height': 500
               var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
               chart.draw(data, options);
               setInterval(function () {
                   data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
                   chart.draw(data, options);
               }, 13000);
               setInterval(function () {
                   data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
                   chart.draw(data, options);
               }, 5000);
               setInterval(function () {
                   data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
                   chart.draw(data, options);
               }, 26000);
        <div id="chart_div" align="center" style='width: 2000px; height: 400px;'></div>

    What should do to integrate it in my page loader function in the .aspx.cs file, like shown below:

     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();
                    SqlDataReader dr = cmd.ExecuteReader();
                    tb.Load(dr, LoadOption.OverwriteChanges);
                catch { }
                //Check if there is data in the datatable
                if (tb != null)
                    //How to place the gauges code here

    I would appreciate your help.

    Thursday, July 9, 2020 7:58 AM


All replies