Chart for DevExtreme - How to use the dxChart in an ASP.NET WebForms application
This example is an illustration of the KA20011: DevExtreme Mobile - Technical FAQ KB Article. Refer to the Article for an explanation.
Files to Review
- ASP
- DataHelper.cs (VB: DataHelper.vb)
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
- Pros and cons of CDN usage in projects with ChartJS
- How to bind dxChart to AJAX-enabled WCF service in an ASP.NET application
This example is an illustration of the KA20011: DevExtreme Mobile - Technical FAQ KB Article. Refer to the Article for an explanation.
Files to Review
- ASP
- DataHelper.cs (VB: DataHelper.vb)
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
- Pros and cons of CDN usage in projects with ChartJS
- How to bind dxChart to AJAX-enabled WCF service in an ASP.NET application
Example Code
C#using System;
using System.Collections;
using System.Collections.Generic;
public class DataHelper {
private readonly List<string> FeedList;
public DataHelper() {
this.FeedList = new List<string>();
this.FeedList.Add("ASP.NET");
this.FeedList.Add("WinForms");
this.FeedList.Add("WPF");
this.FeedList.Add("SL");
this.FeedList.Add("VCL");
}
public IEnumerable GetItems() {
Random randomizer = new Random();
List<KBInfo> kbItems = new List<KBInfo>();
foreach (string name in FeedList) {
kbItems.Add(new KBInfo() {
PlatformName = name,
Count = randomizer.Next(100, 500)
});
}
return kbItems;
}
}
public class KBInfo {
public string PlatformName { get; set; }
public int Count { get; set; }
}
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html, body, form
{
margin: 0;
padding: 0;
}
</style>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="Scripts/globalize.js" type="text/javascript"></script>
<script src="Scripts/knockout-2.2.1.js" type="text/javascript"></script>
<script src="Scripts/dx.chartjs.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#chartContainer").dxChart({
dataSource: chartData,
commonSeriesSettings: {
argumentField: 'PlatformName',
type: 'bar'
},
series: [
{ valueField: 'Count' }
]
});
});
</script>
</head>
<body>
<form id="frmMain" runat="server">
<div id="chartContainer" style="height: 500px; width: 500px">
</div>
</form>
</body>
</html>
C#using System;
using System.Collections;
using System.Web.Script.Serialization;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
RegisterScriptObjectFromDataObject(GetDataObject());
}
private IEnumerable GetDataObject() {
return new DataHelper().GetItems();
}
private void RegisterScriptObjectFromDataObject(IEnumerable dataObject) {
JavaScriptSerializer serializer = new JavaScriptSerializer();
string jsonData = serializer.Serialize(dataObject);
ClientScript.RegisterStartupScript(this.GetType(), "ANY_KEY", string.Format("var chartData = {0};", jsonData), true);
}
}