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.

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 ASPX file is set the FChart control, the drop down lists and the ajax* request.
*using jQuery(course it is not mandatory).


<script src="js/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: "exemplo_Ajax.aspx?chartType=" + chartType + "&chartTemplate=" + chartTemplate + "&period=" + period,
            type: "POST",
            dataType: "text",
            success: function (data) {
                var oChart 		= <%=chtSales.ClientID %>;
                oChart.xmlData   	= data;
                oChart.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 />
<fcl:FChart ID="chtSales" runat="server" Width="500" Height="320" />

Into CS code we simply hand all requests and, by using a switch, define the chart selected.


protected void Page_Load(object sender, EventArgs e)
    if (Request["chartType"] != null)
        string xmlData = GetSalesChart(
        //loaded by ajax
        Response.ContentType = "text/xml";
public 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 1, 2010 at 1:35 AM by robertobarbedo, version 6


No comments yet.