how to to bind data to HI canvas js chart in server side div tag

Question

hi , any body please help for this in this link type chart i want to bind data in server side and design any one send sample code https://canvasjs.com/jquery-charts/column-line-area-chart/

Sachin Singh · Answer

there are various example avalable, feel free to post your question , where do you need help to bind data for example you can call api to fetch json data or MVC controller and in callback function define your x and y axis values as shown below window.onload = function() { var dataPoints = []; var chart = new CanvasJS.Chart( "chartContainer" , { animationEnabled: true , theme: "light2" , title: { text: "Daily Sales Data" }, axisY: { title: "Units" , titleFontSize: 24, includeZero: true }, data: [{ type: "column" , yValueFormatString: "#,### Units" , dataPoints: dataPoints }] }); function addData(data) { for (var i = 0; i dataPoints.push({ x: new Date(data[i].date), y: data[i].units }); } chart.render(); } $.getJSON( "https://canvasjs.com/data/gallery/javascript/daily-sales-data.json" , addData); }

Thulasiram pakala · Answer

HI Thanks for giving reply i am in this cs get chart methods values need to bind this graph 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.Data.SqlClient; using System.Configuration; using System.Web.Services; public partial class CS : System.Web.UI.Page { [WebMethod] public static List GetChart(string country1, string country2) { List chartData = new List (); string query = "Select distinct fyear From tblwhinward"; //"SELECT DISTINCT DATEPART(YEAR, OrderDate) Year FROM Orders"; DataTable dtYears = GetData(query); List labels = new List (); foreach (DataRow row in dtYears.Rows) { //Label lbl = new Label(); //lbl.Text =Convert.ToString(row["fyear"]); labels.Add(Convert.ToString(row["fyear"])); } chartData.Add(labels); // query = "Select isnull(SUM(Wqty),0) as wqty From tblwhinward group by fyear"; query = "Select isnull(SUM(Wqty),0) as wqty,isnull(SUM(batchqty),0) as issueqty,(isnull(SUM(Wqty),0)-isnull(SUM(batchqty),0)) as balanceqty From tblwhinward inner join tblwhinwardbatch on tblwhinward.uid=tblwhinwardbatch.whuid"; //if (lblinstid.Text == "") //{ query += " FROM group by tblwhinward.fyear order by fyear"; // } //else //{ // } DataTable dtCountry1 = GetData(query); List series1 = new List (); List series2 = new List (); List series3 = new List (); foreach (DataRow row in dtCountry1.Rows) { series1.Add(Convert.ToInt32(row["wqty"])); series2.Add(Convert.ToInt32(row["issueqty"])); series3.Add(Convert.ToInt32(row["balanceqty"])); } chartData.Add(series1); chartData.Add(series2); chartData.Add(series3); //query = "SELECT DATEPART(YEAR, OrderDate) Year, COUNT(DATEPART(YEAR, OrderDate)) TotalOrders"; //query += " FROM Orders WHERE ShipCountry = '" + country2 + "' GROUP BY DATEPART(YEAR, OrderDate)"; //DataTable dtCountry2 = GetData(query); //List series2 = new List (); //foreach (DataRow row in dtCountry1.Rows) //{ // series2.Add(Convert.ToInt32(row["issueqty"])); //} //chartData.Add(series2); return chartData; } private static DataTable GetData(string query) { DataTable dt = new DataTable(); string constr = ConfigurationManager.ConnectionStrings["constring"].ConnectionString; using (SqlConnection con = new SqlConnection(constr)) { using (SqlCommand cmd = new SqlCommand(query)) { using (SqlDataAdapter sda = new SqlDataAdapter()) { cmd.CommandType = CommandType.Text; cmd.Connection = con; sda.SelectCommand = cmd; sda.Fill(dt); } } return dt; } } }