"An easy to use HTML5 JavaScript Charting
library built on Canvas element. Charts can render across devices
including iPhone, iPad, Android, Windows Phone, Desktops, etc. Graphs include several good looking themes and are 10x
faster than conventional Flash / SVG based Libraries – resulting in
lightweight, beautiful and responsive dashboards". more...
Here is my little ASP.NET program to draw a dynamic chart:
(These codes explains how to access JavaScripts function from codebehind and call codebehind functions from JavaScript)
Codebehind:
Here is my little ASP.NET program to draw a dynamic chart:
(These codes explains how to access JavaScripts function from codebehind and call codebehind functions from JavaScript)
Codebehind:
- protected void Button1_Click(object sender, EventArgs e)
- {
- // Call JavaScript function in aspx
- ScriptManager.RegisterStartupScript(this, GetType(), "draw", "draw();", true);
- }
- [WebMethod]
- public static string chartType()
- {
- return "bar";
- }
- [WebMethod]
- public static string labels()
- {
- return "apple,orange,banana,mango,grape";
- }
- [WebMethod]
- public static string values()
- {
- return "10,20,30,40,50";
- }
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title></title>
- <script type="text/javascript" src="scripts/canvasjs.min.js"></script>
- <script type="text/javascript">
- function draw() {
- var t = '<%=labels()%>'; // get the values from codebhind method
- var l = new Array();
- l = t.split(",");
- var t = '<%=values()%>';
- var v = new Array();
- v = t.split(",");
- var data = [];
- for (var x = 0; x < v.length; x++) {
- data.push({
- label: l[x],
- y: parseInt(v[x]),
- });
- }
- var chart = new CanvasJS.Chart("chartContainer", {
- theme: "theme1",//theme1
- title: {
- text: "Basic Column Chart - CanvasJS"
- },
- animationEnabled: false, // change to true
- data: [
- {
- // Change type to "bar", "splineArea", "area", "spline", "pie",etc.
- type: '<%=chartType()%>',
- dataPoints: data
- }
- ]
- });
- chart.render();
- }
- </script>
- <script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" EnablePartialRendering="true" runat="server" />
- <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
- </div>
- <div id="chartContainer" style="height: 300px; width: 100%;"></div>
- </form>
- </body>
- </html>
No comments:
Post a Comment