Reference:
http://www.rgraph.net/download#stable
You can populate from WebMethod also like this
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="demos/demos.css" type="text/css" media="screen" />
<script type="text/javascript" src="libraries/RGraph.common.core.js"></script>
<script type="text/javascript" src="libraries/RGraph.line.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!--[if lt IE 9]><script src="excanvas/excanvas.js"></script><![endif]-->
<meta name="description" content="A basic Line chart" />
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
A basic line chart</h1>
<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "Default.aspx/GetData",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var line = new RGraph.Line('cvs', [response.d])
.set('spline', true)
.set('numxticks', 11)
.set('numyticks', 5)
.set('background.grid.autofit.numvlines', 11)
.set('colors', ['red'])
.set('linewidth', 5)
.set('gutter.left', 40)
.set('gutter.right', 15)
.set('labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'])
.set('shadow', true)
.set('shadow.color', '#aaa')
.set('shadow.blur', 5)
.set('tickmarks', null)
.draw();
}
});
});
</script>
</div>
</form>
</body>
</html>
C#
[System.Web.Services.WebMethod]
public static int[] GetData()
{
return new int[] { 8, 9, 15, 16, 21, 23, 4, 6, 21, 15, 18, 11 };
}
Screenshot
