Using Chart JS in asp.net

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

.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.

Reply

mshoaiblibra

Contributor

2842 Points

767 Posts

Re: Using Chart JS in asp.net

Apr 18, 2018 07:37 AM|mshoaiblibra|LINK

I Ashraf,

May be you are looking following sample:

using ASP.Net

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

Using HTML only:

https://www.codeproject.com/Tips/771710/Creating-Charts-using-Chart-js-in-Websites

Please mark the replies as if they help or unmark if not.

M Shoaib Waheed
MCSD & MCPD [Web Development 4.0]
http://shoaib.pk

Reply

Ashraf007

Member

102 Points

952 Posts

Re: Using Chart JS in asp.net

Apr 18, 2018 12:45 PM|Ashraf007|LINK

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

Thanks In Advance ....

Reply

mshoaiblibra

Contributor

2842 Points

767 Posts

Re: Using Chart JS in asp.net

Apr 19, 2018 05:18 AM|mshoaiblibra|LINK

Just download the current version of chart.js 2.7.2.

https://github.com/chartjs/Chart.js/releases

Documentation of chart.js:

http://www.chartjs.org/docs/2.7.2/

Chart demo:

http://www.chartjs.org/docs/2.7.2/charts/bar.html

http://www.chartjs.org/docs/2.7.2/charts/polar.html

Please mark the replies as if they help or unmark if not.

M Shoaib Waheed
MCSD & MCPD [Web Development 4.0]
http://shoaib.pk

Reply

Ashraf007

Member

102 Points

952 Posts

Re: Using Chart JS in asp.net

Aug 27, 2018 12:19 PM|Ashraf007|LINK

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


}

Thanks In Advance ....

Reply

mudassarkhan

All-Star

54508 Points

14111 Posts

Re: Using Chart JS in asp.net

Aug 27, 2018 02:57 PM|mudassarkhan|LINK

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.

.Net Consultant | MVP[2009-2013] | MCC[2012]
Blog: ASPSnippets | Forum: ASPForums | Company: Excelasoft

Reply

Ashraf007

Member

102 Points

952 Posts

Re: Using Chart JS in asp.net

Aug 28, 2018 03:40 AM|Ashraf007|LINK

Ashraf007

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

Thanks In Advance ....

Reply

Ashraf007

Member

102 Points

952 Posts

Re: Using Chart JS in asp.net

Aug 28, 2018 03:51 AM|Ashraf007|LINK

mudassarkhan

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

Thanks In Advance ....

Reply

kgup

None

0 Points

1 Post

Re: Using Chart JS in asp.net

May 01, 2019 07:14 AM|kgup|LINK

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

Deafult.aspx

Using Chart JS in asp.net RSS

9 replies

Shortcuts

Related Links