This project is read-only.
The sample web site provided with the sources may help you to use the Google Chart API Helper.

I would advise you to use the Control with an asynchronous call to render quickly your web application and then get the values.


5 steps to follow

1. Prepare your environment

Change your web.Config file to use the Google Chart API Helper. In the page element add this :
<controls>
<add assembly="ElGee.Google.Charts" namespace="ElGee.Google.Charts" tagPrefix="elgee" />
</controls>

Use themes and skins to set up your control :
<elgee:AreaChartControl runat="server"
CssClass="areaChart"
LoaderImage="~/App_themes/Default/chart-loader.gif"
LoaderImageCssClass="loadingProgress"
ErrorCssClass="errorMessage"
LoaderImageText="Loading Chart..." />

Be sure to use JQuery 1.5 Library and the JQuery Plug In
<asp:ScriptManager ID="ScriptManager1" EnableCdn="false" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.5.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery-elgee.google.chart-0.1.js" />
</Scripts>
</asp:ScriptManager>
The jquery plug in will be added automatically in future release in your script section.

2. Add your control

In a web page or in a UserControl, add the chart of your choice :
<elgee:AreaChartControl runat="server" id="asynchAreaChart" EnableViewState="false" />

3. Set the options of your Chart on server side

Define the style of your Chart
var chart = new AreaChart();
chart.Style.Title = "Sales Comparaison";
chart.Style.TitlePosition = TypeOfPosition.In;
chart.Style.Height = 300;
chart.Style.Width = 400;
chart.Style.Colors.Add("#333333");
chart.Style.Colors.Add("#33DD00");
chart.Style.LineWidth = 2;
asynchAreaChart.Chart = chart;

Define now the DataSource of your Chart
asynchAreaChart.DataSourceAddress = new Uri("http://localhost:1488/AreaChartSample/DataSource.ashx");

4. Build the Generic Handler to return the DataSource

The datasource is a combinaison of style and source because style can be also set up in the DataSource :

public void ProcessRequest(HttpContext context)
{
// No Cache, because need fresh values !
context.Response.Cache.SetCacheability(HttpCacheability.NoCache);

// Set the content type and encoding for JSON
context.Response.ContentType = "application/json";
context.Response.ContentEncoding = Encoding.UTF8;

var chart = new AreaChart();
chart.Style.Title = "Sales Comparaison";
chart.Style.TitlePosition = TypeOfPosition.In;
chart.Style.Height = 300;
chart.Style.Width = 400;
chart.Style.Colors.Add("#333333");
chart.Style.Colors.Add("#33DD00");
chart.Style.LineWidth = 2;

var ds = new ChartDataSource();
// Horizontal Axis
ChartDataTable dt = new ChartDataTable(TypeOfAxis.Horizontal, TypeOfColumn.String, "x Axis");
dt.Data.Add("Jan");
dt.Data.Add("Feb");
dt.Data.Add("Mar");
dt.Data.Add("Apr");
dt.Data.Add("May");
dt.Data.Add("Jun");
dt.Data.Add("Jul");
dt.Data.Add("Aug");
dt.Data.Add("Sep");
dt.Data.Add("Oct");
dt.Data.Add("Nov");
dt.Data.Add("Dec");
ds.Tables.Add(dt);

// Vertical Axis, we have 2 series
dt = new ChartDataTable(TypeOfAxis.Vertical, TypeOfColumn.Number, "Sales 2009");
dt.Data.Add("214.34");
dt.Data.Add("219.01");
dt.Data.Add("510.10");
dt.Data.Add("420.47");
dt.Data.Add("310.45");
dt.Data.Add("410.47");
dt.Data.Add("612.49");
dt.Data.Add("524.47");
dt.Data.Add("848.79");
dt.Data.Add("689.47");
dt.Data.Add("635.05");
dt.Data.Add("812.42");
ds.Tables.Add(dt);

dt = new ChartDataTable(TypeOfAxis.Vertical, TypeOfColumn.Number, "Sales 2010");
dt.Data.Add("234.34");
dt.Data.Add("289.01");
dt.Data.Add("470.10");
dt.Data.Add("410.47");
dt.Data.Add("420.45");
dt.Data.Add("510.47");
dt.Data.Add("512.49");
dt.Data.Add("624.47");
dt.Data.Add("748.79");
dt.Data.Add("789.47");
dt.Data.Add("835.05");
dt.Data.Add("912.42");
ds.Tables.Add(dt);

AreaChartDataSource ds = new AreaChartDataSource(ds, chart);

// Returning the object in JSON Format
context.Response.Write(new JavaScriptSerializer().Serialize(ds));
}

5. Run your application

Once the page is loaded, the custom control will display the loading status :
Loading.jpg

When the Chart will receive the DataSource, the Client will render the Chart :
Loaded.jpg

Last edited Mar 1, 2011 at 12:26 PM by ElGeeFr, version 4

Comments

No comments yet.