locked
Using Chart JS in asp.net RRS feed

  • Question

  • User1152553138 posted

    How to use chart js in asp.net like below, which is in asp.net mvc

    https://www.c-sharpcorner.com/article/create-free-charts-using-chart-js-in-asp-net-mvc/

    Tuesday, April 17, 2018 9:44 AM

All replies

  • User36583972 posted

    Hi Ashraf007,

    You want use it with ASP.NET Webform Application?

    As far as I know, ChartJS is based on JavaScript and HTML5, Using Chart.js, we can draw charts and graphs on webpage using HTML5 canvas element. This means that we can use it in an ordinary web application including ASP.NET Web Application.

    Implementing Chart.js in ASP.Net Using Angular.js Web Service

    The chartjs official Samples will give you more tips on how to use it.


    Best Regards,

    Yong Lu

    Wednesday, April 18, 2018 6:28 AM
  • Wednesday, April 18, 2018 7:37 AM
  • User1152553138 posted
    The below link is fine example .

    https://www.aspsnippets.com/Articles/Implement-Free-HTML5-Canvas-charts-using-Chartjs-in-ASPNet.aspx

    But it shows the chart in a very old design. It looks very outdated design.

    Since the new charts has full of color and sleek design with animation as well.

    Can I see the new chartjs with aap.net with database data as tutorial
    Wednesday, April 18, 2018 12:45 PM
  • Thursday, April 19, 2018 5:18 AM
  • User1152553138 posted

    I tried ... Chart is not displaying

    <%@ 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 runat="server">
        <title></title>
    </head>
    
    <body>
    
        <form id="form1" runat="server">
       
      
        <script src="js/Chart.js" type="text/javascript"></script>
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    
    
       <select id="ddlyear">
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>
    
    <select id="ddlMonth">
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option></select>
    <button id="btnGeneratePieChart">Show</button>
    <br/>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
         
            $("btnGeneratePieChart").on('click', function (e) {
                e.preventDefault();
                var gData = [];
                gData[0] = $("#ddlyear").val();
    //            gData[1] = $("#ddlMonth").val();
    
                var jsonData = JSON.stringify({
                    gData: gData
                });
                $.ajax({
                    type: "POST",
                    url: "Deafult.aspx/getTrafficSourceData",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                });
    
                function OnSuccess_(response) {
                    var aData = response.d;
                    var arr = [];
                    $.each(aData, function (inx, val) {
                        var obj = {};
                        obj.color = val.color;
                        obj.value = val.value;
                        obj.label = val.label;
                        arr.push(obj);
                    });
                    var ctx = $("#myChart").get(0).getContext("2d");
                    var myPieChart = new Chart(ctx).Pie(arr);
                }
    
                function OnErrorCall_(response) { }
                e.preventDefault();
            });
        });
    
    </script>
    
    
    <canvas id="myChart" width="200" height="200"></canvas>
    
        </form>
    </body>
    </html>


    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.Text;
    using System.Web.Services;
    using System.Data.SqlClient;
    using System.Configuration;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        public class trafficSourceData
        {
            public string label { get; set; }
            public string value { get; set; }
            public string color { get; set; }
            public string hightlight { get; set; }
        }
    
        [WebMethod]
    
        public List<trafficSourceData> getTrafficSourceData(List<string> gData)
        {
            List<trafficSourceData> t = new List<trafficSourceData>();
            string[] arrColor = new string[] { "#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6" };
    
            string conn = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    
            using (SqlConnection cn = new SqlConnection(conn))
            {
                string myQuery = "select * from traffic_data where YEAR =@year ";
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = myQuery;
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@year", gData[0]);
                //cmd.Parameters.AddWithValue("@month", gData[1]);
                cmd.Connection = cn;
                cn.Open();
                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 t;
        }
    
    
    }

    Monday, August 27, 2018 12:19 PM
  • User-1171043462 posted

    Colors have to be generated. I don't see much changes in the new as well as old except that there are more things to control the Chart.

    Thus if it is only Color, you can manually add from an Array.

    Monday, August 27, 2018 2:57 PM
  • User1152553138 posted

    I tried ... Chart is not displaying

    <%@ 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 runat="server">
        <title></title>
    </head>
    
    <body>
    
        <form id="form1" runat="server">
       
      
        <script src="js/Chart.js" type="text/javascript"></script>
        <script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
    
    
       <select id="ddlyear">
        <option>2010</option>
        <option>2011</option>
        <option>2012</option>
        <option>2013</option>
        <option>2014</option>
        <option>2015</option>
    </select>
    
    <select id="ddlMonth">
        <option value="1">Jan</option>
        <option value="2">Feb</option>
        <option value="3">Mar</option></select>
    <button id="btnGeneratePieChart">Show</button>
    <br/>
    
    <script type="text/javascript">
    
        $(document).ready(function () {
         
            $("btnGeneratePieChart").on('click', function (e) {
                e.preventDefault();
                var gData = [];
                gData[0] = $("#ddlyear").val();
    //            gData[1] = $("#ddlMonth").val();
    
                var jsonData = JSON.stringify({
                    gData: gData
                });
                $.ajax({
                    type: "POST",
                    url: "Deafult.aspx/getTrafficSourceData",
                    data: jsonData,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess_,
                    error: OnErrorCall_
                });
    
                function OnSuccess_(response) {
                    var aData = response.d;
                    var arr = [];
                    $.each(aData, function (inx, val) {
                        var obj = {};
                        obj.color = val.color;
                        obj.value = val.value;
                        obj.label = val.label;
                        arr.push(obj);
                    });
                    var ctx = $("#myChart").get(0).getContext("2d");
                    var myPieChart = new Chart(ctx).Pie(arr);
                }
    
                function OnErrorCall_(response) { }
                e.preventDefault();
            });
        });
    
    </script>
    
    
    <canvas id="myChart" width="200" height="200"></canvas>
    
        </form>
    </body>
    </html>
    
    
    
    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.Text;
    using System.Web.Services;
    using System.Data.SqlClient;
    using System.Configuration;
    
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        public class trafficSourceData
        {
            public string label { get; set; }
            public string value { get; set; }
            public string color { get; set; }
            public string hightlight { get; set; }
        }
    
        [WebMethod]
    
        public List<trafficSourceData> getTrafficSourceData(List<string> gData)
        {
            List<trafficSourceData> t = new List<trafficSourceData>();
            string[] arrColor = new string[] { "#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6" };
    
            string conn = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
    
            using (SqlConnection cn = new SqlConnection(conn))
            {
                string myQuery = "select * from traffic_data where YEAR =@year ";
                SqlCommand cmd = new SqlCommand();
                cmd.CommandText = myQuery;
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@year", gData[0]);
                //cmd.Parameters.AddWithValue("@month", gData[1]);
                cmd.Connection = cn;
                cn.Open();
                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 t;
        }
    
    
    }

    The above chart is generating dynamically from database data. But the chart is not getting displayed ... F12 Error Image Link https://ibb.co/mv2J09

    Tuesday, August 28, 2018 3:40 AM
  • User1152553138 posted

    Colors have to be generated. I don't see much changes in the new as well as old except that there are more things to control the Chart.

    Thus if it is only Color, you can manually add from an Array.

    Thanks you ... In need the chart data to be displayed dynamically from database.

    I just found static chart.js detail here http://www.sourcecodehub.com/article/371/how-to-create-draw-a-doughnut-chart-using-chartjs-in-aspnet-detailed-example

    Tuesday, August 28, 2018 3:51 AM
  • User-1473994230 posted

    You may have a spelling mistake in your code - in your ajax call's url you've specified:

    Deafult.aspx

    Wednesday, May 1, 2019 7:14 AM