Display Canvasjs Line Chart using Data from Database
Aspx Page:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Canvasjs.aspx.cs" Inherits="BloggerCont.Canvasjs" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script src="canvasjs.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
Disp();
});
function Disp() {
var dataPts = [];
var var1;
var var2;
$.ajax({
cache: false,
async: false,
type: "POST",
dataType: "Json",
contentType: "application/json; charset=utf-8",
url: "canvasjs.aspx/GETDT",
data: {},
success: function (data) {
var len = data.d.length;
for (var i = 0; i < len; i++) {
dataPts.push({
x: parseFloat(data.d[i].xval),
y: parseFloat(data.d[i].yval)
});
}
var chart = new CanvasJS.Chart("divchart",
{
title: {
text: "Canvas js"
},
data: [
{
type: "line",
dataPoints: dataPts
}]
});
chart.render();
},
error: function (result) {
alert(result);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divchart"></div>
</form>
</body>
</html>
CS Page:
public class Det
{
public decimal xval;
public decimal yval;
}
[WebMethod]
public static object GETDT()
{
SqlConnection cn = new SqlConnection(ConfigurationManager.ConnectionStrings["blogger"].ToString());
List<Det> obj = new List<Det>();
cn.Open();
DataTable dt = new DataTable();
SqlCommand cmd = new SqlCommand();
SqlDataAdapter da = new SqlDataAdapter("select * from tbl_canvasjs", cn);
da.Fill(dt);
cn.Close();
foreach (DataRow dr in dt.Rows)
{
Det def = new Det();
def.xval = Convert.ToDecimal(dr[1].ToString());
def.yval = Convert.ToDecimal(dr[2].ToString());
obj.Add(def);
}
return obj.ToArray();
}
Database:
Charts:
Dear Sir, This is really great example. I am searching this help from a long time. I will be glad if you send me full VS Project to my email. abumshoyeb@gmail.com
ReplyDeleteHi Shoyeb....Download Option Provided On this CanvasJs Ex Document.
Delete