Multi Series Chart, adding data by DataSource.

 

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

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

In your controller or model you will define: (just as an example we will define everything on the controller) 

  • 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 ToXML() 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. 

* ToXML() is called on the Html Helper FChart method.

** 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. 

 

public ActionResult Sample_MS_Datasource()
{
    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>
    DataTable dtSample = GetSalesDataTableMS();
    oChart.DataSource = dtSample;
    oChart.DataCategoryTextField = "Month";
    oChart.DataSeriesTextField = "Brand";
    oChart.DataSeriesValueField = "Quantity";
 
    //Load it into ViewData.
    ViewData["MyChart"] = oChart;
 
    return View();
}

 

And our view will be:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<%@ Import Namespace="MvcApplication1" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Sample_MS_Datasource
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <h2>Multi Series Chart, adding data by DataSource.</h2>
    <br />
    <%=Html.FChart("Chart01", ViewData["MyChart"], 600, 400)%>
 
</asp:Content>

Last edited Nov 27, 2010 at 6:52 PM by robertobarbedo, version 6

Comments

No comments yet.