Please refer this code
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js" type="text/javascript"></script>
<script src="//cdn.jsdelivr.net/chart.js/0./Chart.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
LoadChart();
});
function LoadChart() {
$.ajax({
type: "POST",
url: "Default2.aspx/GetChart",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var stringData = eval(r.d);
debugger;
$("#dvChart").html("");
$("#dvLegend").html("");
var data = {
labels: stringData[0].labels,
datasets: [{
label: "My First dataset",
fillColor: "#8B13D4",
strokeColor: "#E2D3EC",
highlightFill: "#5AD381",
highlightStroke: "#CBEADC",
data: stringData[0].datasets[0].data
}]
};
var el = document.createElement('canvas');
$("#dvChart")[0].appendChild(el);
//Fix for IE 8
if ($.browser.msie && $.browser.version == "8.0") {
G_vmlCanvasManager.initElement(el);
}
var ctx = el.getContext('2d');
var chart = new Chart(ctx).Bar(data, {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 5,
//Number - Spacing between each of the X value sets
barValueSpacing: 10,
//Number - Spacing between data sets within X values
barDatasetSpacing: 15
}
);
var div1 = $("<div />");
div1.css("margin-bottom", "10px");
div1.html("<span style = 'display:inline-block;height:10px;width:10px;'> </span> Months = Turnover in Lacks");
$("#dvLegend").append(div1);
for (var i = 0; i < stringData[0].labels.length; i++) {
var div = $("<div />");
div.css("margin-bottom", "10px");
div.html("<span style = 'display:inline-block;height:10px;width:10px;'> </span> <span style = 'padding-right:50px'>" + stringData[0].labels[i] + "</span> " + stringData[0].datasets[0].data[i]);
$("#dvLegend").append(div);
}
},
failure: function (response) {
alert('There was an error.');
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="dvChart">
</div>
</td>
<td>
<div id="dvLegend">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Namespaces
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Text;
using System.Web.Services;
C#
[WebMethod]
public static string GetChart()
{
string values = string.Empty;
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
string query = string.Format("SELECT Month, Turnover FROM Sales");
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = query;
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
StringBuilder sb = new StringBuilder();
sb.Append("[");
sb.Append("{");
sb.Append("labels: [");
while (sdr.Read())
{
sb.Append(string.Format("'{0}',", sdr[0]));
values += (string.Format("{0},", sdr[1]));
}
sb = sb.Remove(sb.Length - 1, 1);
values = values.Remove(values.Length - 1, 1);
sb.Append("]");
sb.Append(",");
sb.Append("datasets: [");
sb.Append("{");
sb.Append(@"label: ""My First dataset"",
fillColor: ""rgba(220,220,220,0.5)"",
strokeColor: ""rgba(220,220,220,0.8)"",
highlightFill: ""rgba(220,220,220,0.75)"",
highlightStroke: ""rgba(220,220,220,1)"",");
sb.Append("data:[");
sb.Append(values);
sb.Append("]");
sb.Append("}");
sb.Append("]");
sb.Append("}");
sb.Append("]");
con.Close();
return sb.ToString();
}
}
}
}
Database
CREATE TABLE [dbo].[Sales](
[Turnover] [DECIMAL](10, 2) NULL,
[Month] INT NULL
) ON [PRIMARY]
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(80,1)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(70,2)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(30,3)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(77,4)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(40,5)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(35,6)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(50,7)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(60,8)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(90,9)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(40,10)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(35,11)
GO
INSERT INTO [Sales]([Turnover],[Month])VALUES(59,12)
GO
Screenshot
