How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web application?RSS

5 replies

Last post Jul 02, 2020 11:11 AM by mgebhard

‹ Previous Thread|Next Thread ›

Shortcuts

samiarja

None

0 Points

4 Posts

How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web application?

Jul 01, 2020 07:01 AM|samiarja|LINK

I am trying to create a web application on ASP.NET which connects to the SQL server to create a dashboard. For the dashboard, I am using chartjs library. But now I decided to use the linear gauge chart and circular gauge chart. For example, for the circular gauge chart it is meant to be HTML and Javascript, so if I wanna included it in the .aspx file it should look like that:

<!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>

How can I integrate this script in C# so I can select data from the SQL table and display them on the charts?

I appreciate the help

- Reply
asteranup
All-Star

20863 Points

4945 Posts

Re: How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web applicatio...

Jul 01, 2020 06:11 PM|asteranup|LINK

You can simply do an ajax call to server and get the data. After that, you can initiate chart js

Thanks & Regards
Anup Das Gupta
Mark as if you feel so. Visit My Blog
- Reply
samiarja
None

0 Points

4 Posts

Re: How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web applicatio...

Jul 02, 2020 03:44 AM|samiarja|LINK

Could you please elaborate more about this, like an example of how this can be done? I would appreciate that

yij sun

Participant

1460 Points

646 Posts

Re: How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web applicatio...

Jul 02, 2020 07:04 AM|yij sun|LINK

Hi samiarja,

Accroding to your description and codes,As far as I think,you could use ajax to get the data from database and return data into gauge chart.

More details,you could refer to below codes:

<script>
        //var randomScalingFactor = function () {
        //    return Math.round(Math.random() * 100);

        //};

        var randomData = function () {
            $.ajax({
                type: "POST",
                url: "2168615.aspx/getTrafficSourceData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess_,  
            });
            function OnSuccess_(response) {
                var aData = response.d;
                var arr = [];
                $.each(JSON.parse(aData), function (inx, val) {
                    .....
                });
                 return arr;
            }
            //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>

Code-behind:

public class trafficSourceData
        {

            public string value { get; set; }

        }

        [WebMethod]
        public static string getTrafficSourceData()
        {
            

            string conn = ConfigurationManager.ConnectionStrings["aspnet-TestApplicationWithDatabase-20190820030542"].ConnectionString;

            using (SqlConnection cn = new SqlConnection(conn))
            {
                string myQuery = "select * from traffic_data";
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = myQuery;
                cmd.CommandType = CommandType.Text;
                cmd.Connection = cn;
                cn.Open();
                List<trafficSourceData> t = new List<trafficSourceData>();
                SqlDataReader dr = cmd.ExecuteReader();
                if (dr.HasRows)
                {
                    //int counter = 0;
                    while (dr.Read())
                    {
                        trafficSourceData tsData = new trafficSourceData();
                        tsData.value = dr["visit_count"].ToString();
                        //tsData.label = dr["traffic_source"].ToString();
                        //tsData.color = arrColor[counter];
                        t.Add(tsData);
                        //counter++;
                    }
                }
                return "{\"data\":" + JsonConvert.SerializeObject(t) + "}";
            }
            
        }

Best regards,

Yijing Sun

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

samiarja

None

0 Points

4 Posts

Re: How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web applicatio...

Jul 02, 2020 10:41 AM|samiarja|LINK

Thanks for your reply.

I am using ASP.NET web application. I have a question

What am I suppose to include here?

$.each(JSON.parse(aData), function (inx, val) {
   .....
});

This is my configuration and this is how I connect to the SQL server

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;
               }
          }        
    }
}

This is how the circular gauge looks like.

How to integrate your implementation in my current template. I tried to but I wasn't able to integrate them.

Thank you

mgebhard

All-Star

48421 Points

21297 Posts

Re: How to integrate chartjs linear gauge and circular gauge in C# code in ASP.NET web applicatio...

Jul 02, 2020 11:11 AM|mgebhard|LINK

You need to learn JSON, JavaScript, chartjs, AJAX or fetch, and Web Web Methods. Building a dynamic string is not a good approach. You'll either build a JavaScript application that manages the chart or you'll build the chart using code blocks to populate the chart data on the server.

Below are a few examples.

https://forums.asp.net/p/2129509/6169081.aspx

https://forums.asp.net/t/2145924.aspx

Example based on https://chart-js.com/documentation/charts/gauge-chart.php

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="WebFormsDemo.chartjs._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <div class="col-md-12 py-2">
        <span class="badge badge-dark">Chart-JS.com</span>
    </div>
    <div class="col-md-6 offset-md-3 my-5">
        <div class="card">
            <div class="card-body">
                <h1 class="pt-3 text-center">Chart JS Gauge Chart</h1>
                <hr>
            </div>
            <div class="card-body">
                <canvas id="myChart"></canvas>
            </div>
        </div>
    </div>

    <!-- https://chart-js.com/documentation/charts/gauge-chart.php -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
    <script>
    var ctx = document.getElementById('myChart').getContext('2d');
    var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'doughnut',

        // The data for our dataset
        data: <%= Newtonsoft.Json.JsonConvert.SerializeObject(Model)%>,

        // Configuration options go here
        options: {
            circumference: 1 * Math.PI,
            rotation: 1 * Math.PI,
            cutoutPercentage: 90
        }
    });
    </script>
</asp:Content>

using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebFormsDemo.chartjs
{
   
    public partial class _default : System.Web.UI.Page
    {
        public ChartJsDataModel Model { get; set; }
        protected void Page_Load(object sender, EventArgs e)
        {
            Model = new ChartJsDataModel()
            {
                labels = new string[] { "January", "February", "March", "April", "May" },
                datasets = new Dataset[]
                 {
                     new Dataset()
                     {
                        backgroundColor = new string[] {"rgb(0, 99, 132)", "green", "red", "yellow", "orange" },
                        borderColor ="My First dataset",
                        label = "#fff",
                        data = new int[] { 5, 10, 5, 2, 20 }
                     }
                 }
            };

            var s = JsonConvert.SerializeObject(Model);
        }
    }

    public class ChartJsDataModel
    {
        public string[] labels { get; set; }
        public Dataset[] datasets { get; set; }

    }

    public class Dataset
    {
        public string label { get; set; }
        public string[] backgroundColor { get; set; }
        public string borderColor { get; set; }

        public int[] data { get; set; }
    }
}

‹ Previous Thread|Next Thread ›