Asked by:
Using Chart JS in asp.net

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 -
User516094431 posted
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
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 tutorialWednesday, April 18, 2018 12:45 PM -
User516094431 posted
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:
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