Multi Series Chart, adding data by DataSource.

Supose your data is comming from a database in the following way:


In your ASPX page you simply need to add a FChart control. It just acts as a place holder for the chart.
Here you’ll also define the width and height of your chart.

<%@ Register Assembly="Libero.FusionCharts" Namespace="Libero.FusionCharts.Control" TagPrefix="fcl" %>
<fcl:FChart runat="server" ID="chtProductSales" Width="530" Height="300" />


In your code behind you will define:

  • The type of chart you want (see supported charts).
  • All appearence properties, as backgroung color, titles, and so on.
  • And the main part, the data. Here using the DataSource property.

When you call ShowChart it automatically calls DataBind to parse your data source
to chart's properties, and then, it calls ApplyTemplate to load template's definitions to your chart.

* Remarks:
When the data is parsed from your data source to the chart's properties, the API will
sort the data by Series Name and then by Category Name.
It's necessary because that way Libero API is able to receive any data source in any order.
You can disable this behavior by setting IsDataSourceSorted to TRUE. If you do it
the parser won't sort your data. In some cases it'll may be necessary. 

MSBar2DChart oChart = new MSBar2DChart();

// Set properties
oChart.Background.BgColor = "ffffff";
oChart.Background.BgAlpha = 50;
oChart.ChartTitles.Caption = "# Mobile in last months";

// Set a template
oChart.Template = new Libero.FusionCharts.Template.OfficeLightTemplate();

// Set data   *DataTable OR IList<T>
List<Sales> lstSample = GetSalesAsGenericList();
oChart.DataSource = lstSample;
oChart.DataCategoryTextField = "Month";
oChart.DataSeriesTextField = "Brand";
oChart.DataSeriesValueField = "Quantity";
// Link the WebControl and the Chart

Last edited Mar 6, 2011 at 6:52 PM by robertobarbedo, version 8


No comments yet.