Hi
I am new to the charting feature and web methods as well. Anyhow, I have googled and I managed to come up with this, it's not working at all.
Appreciate if someone can point out what I am missing. Basically, my data is in sql server and I am trying to pull the data into a pie..( just a test I am running before I move on the real project). I found the code at this link https://stackoverflow.com/questions/54884956/pie-chart-using-chart-js-and-asp-net-web-service-asmx - I modified it with the data in my sql..
So this is the code.
This is the Chartnew.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Chartnew.aspx.cs" Inherits="ChartTest.Chartnew" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script><script src="Scripts/Chart.js"></script><title></title></head><body><form id="form1" runat="server"><div id="canvas-holder" style="width:40%"><canvas id="chart-area"></canvas></div></form><script src="Scripts/JavaScript.js"></script></body></html>
This is the code behind page.
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Script.Serialization;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace ChartTest
{
public partial class Chartnew : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public void GetTotalPhoneSales()
{
string cs = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
List<TotalSales> totalSales = new List<TotalSales>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("Sales by Year", con)
{
CommandType = CommandType.StoredProcedure
};
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
TotalSales PhoneSale = new TotalSales
{
Amount = Convert.ToDouble(rdr["Subtotal"]),
Year = Convert.ToInt32(rdr["Year"])
};
totalSales.Add(PhoneSale);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(totalSales));
}
}
class TotalSales
{
public double Amount;
public int Year;
}
}This is the external JavaScript file.
console.log('Hello');
var chartLabel = [];
var chartData = [];$.ajax({
alert: ("It has ended"),
url: 'Chartnew.aspx/GetTotalPhoneSales',
method: 'post',
dataType: 'json',
success: function (data) {$(data).each(function (index, item) {
chartLabel.push(item.Year);
chartData.push(item.Amount);
});
},
error: function (err) {
alert(err);
}
});
var config = {
type: 'pie',
data: {
datasets: [{
data: chartData,
backgroundColor: [
"#3e95cd", "#8e5ea2", "#3cba9f"
],
label: 'Labels'
}],
labels: chartLabel
},
options: {
responsive: true
}
};
window.onload = function () {
var ctx = document.getElementById('chart-area').getContext('2d');
window.myPie = new Chart(ctx, config);
};