Ajax sample.

Change chart type, data period and template with ajax requests.

*As any other sample here, you can get this example live in our release for download.

**If you haven`t already, see Setting up for a MVC project.

In this sample you have 3 sets of data by year. 
In the drop down lists above you can choose which period, chart type 
and template you want to see.
The chart will be updated by Ajax when you change any value on the drop down lists. 

Into the View you use the HtmlHelper to render the chart, create the drop down lists and the ajax* request.
*using jQuery(course it is not mandatory).


<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        loadChart = function () {
            var period          = $("#period option:selected").val();
            var chartType       = $("#chartType option:selected").val();
            var chartTemplate   = $("#chartTemplate option:selected").val();
                url: "/Home/GetSalesXmlData",
                type: "POST",
                data: { chartType: chartType, chartTemplate: chartTemplate, period: period },
                dataType: "application/JSON",
                success: function (data) {
                    Chart01.xmlData   = data;
                    Chart01.chartType = chartType;
    <select id="period" onchange="loadChart();">
        <option value="2010">2010</option>
        <option value="2009">2009</option>
        <option value="2008">2008</option>
    <select id="chartType" onchange="loadChart();">
        <option value="Area2DChart">Area 2D Chart</option>
        <option value="Bar2DChart">Bar 2D Chart</option>
        <option value="Column2DChart">Column 2D Chart</option>
        <option value="Column3DChart">Column 3D Chart</option>
        <option value="LineChart">Line Chart</option>
    <select id="chartTemplate" onchange="loadChart();">
        <option value="OfficeTemplate">Office</option>
        <option value="OfficeLightTemplate">Office Light</option>
        <option value="OfficeDarkTemplate">Office Dark</option>
        <option value="OceanTemplate">Ocean</option>
    <hr />
    <%=Html.FChart("Chart01", ViewData["MyChart"], 600, 400)%>


In your controller you select which chart by using a switch


public ActionResult Sample_Ajax()
    ViewData["MyChart"] = GetSalesChart("2010""Area2DChart""OfficeTemplate");
    return View();
public ActionResult GetSalesXmlData(string period, string chartType, string chartTemplate)
    return this.Content(GetSalesChart(period, chartType, chartTemplate).ToXML(), "text/xml");
private SingleSeriesChart GetSalesChart(string period, string chartType, string chartTemplate)
    SingleSeriesChart oChart;
    switch (chartType)
        case "Area2DChart": oChart = new Area2DChart(); break;
        case "Bar2DChart": oChart = new Bar2DChart(); break;
        case "Column2DChart": oChart = new Column2DChart(); break;
        case "Column3DChart": oChart = new Column3DChart(); break;
        case "LineChart": oChart = new LineChart(); break;
        defaultthrow new Exception("chart type not expected.");
    switch (chartTemplate)
        case "OfficeTemplate": oChart.Template = new OfficeTemplate(); break;
        case "OfficeLightTemplate": oChart.Template = new OfficeLightTemplate(); break;
        case "OfficeDarkTemplate": oChart.Template = new OfficeDarkTemplate(); break;
        case "OceanTemplate": oChart.Template = new OceanTemplate(); break;
        defaultthrow new Exception("chart template not expected.");
    oChart.ChartTitles.Caption = "Anual Sales";
    oChart.ChartTitles.SubCaption = "Period 2010";
    oChart.DataSource = GetData(period).ToList();
    oChart.DataTextField = "Month";
    oChart.DataValueField = "Total";
    return oChart;

Last edited Dec 5, 2010 at 3:58 AM by robertobarbedo, version 10


No comments yet.