Panterlo - Panterlo specializes in virtualization infrastructure and software for micro-, small- and medium sized businesses

Background

Google Visualization API is the “larger chart package” from Google which offers interactive charts trough a JavaScript library. The other alternative is the static chart engine that Google offers check out the Google documentation here, http://code.google.com/apis/charttools/index.html, basically it renders out a static image that you reference in your html-page.
To generate chart data for Google Visualization API as interactive charts you basically can do one of two things in MVC:

• Generate the chart data in the view using JavaScript, an example is shown on this blog http://deanhume.com/Home/BlogPost/mvc-and-the-google-visualization-api–datatable-/34. Basically you iterate trough the collection of your data constructing the needed Google Visualization Datatable. Courtesy to Dean for this sample.
  • Some programmers may want this method but I believe it could be cumbersome when handling large quantity of chart data and if you need to construct asynchronous handling it becomes a pain and it cannot support the query functionality. Putting to must logic into the view is also a question for the programmer and designer to design but mostly programmers tend to have most of the logic in the controllers of course.
• Generate the chart data in the MVC controller, you have to parse the incoming request from the Google Visualization API (query) and make your decision what you should do. You then will have to pass back an JSON object matching the requirements of the specifications provided by Google Visualization API documentation. You also need to handle the error and warning etc.

I therefore wrote a class library for this “controller handling” including a new GoogleVisualizationAttribute and GoogleVisualizationResponse. Of course you can use this class library also for traditional, classic ASP.NET pages. The package has today, 2010-10-17, been released into github as GPL v3, check here http://github.com/panterlo/v1s.GoogleVisualization, and I hope others continue to use and contribute to this library to make Google interactive charting a breeze in ASP.NET and MVC.
Let’s take a look at the basic MVC sample which is included in the source code. Please bear in mind that this sample doesn’t show the ErrorInfo and WarningInfo that easily could wrap exceptions and errors occurring in the context of the controller, being further handled by the Google Visualization API.

MVC sample

The MVC sample is included in the source and can be downloaded from git. Please visit http://github.com/panterlo/v1s.GoogleVisualization for further instructions from github.
There is only one controller method of interest which is GetSomeGoogleVisualizationData located in the HomeController. This method get’s requested by the Google Visualization API when calling the query method.

[GoogleVisualizationAttribute]
public GoogleVisualizationResult GetSomeGoogleVisualizationData(GoogleVisualizationRequest googleVisualizationRequest, int numRecords, string someParam)
{
// Let make the response, construct the response by passing the request
GoogleVisualizationResponse googleVisualizationResponse = new GoogleVisualizationResponse(googleVisualizationRequest);

// We need a Google Visualization DataTable to store the data
GoogleVisualizationDataTable dataTable = new GoogleVisualizationDataTable();

// Add a column representing date time
GoogleVisualizationDataTableColumn column1 = dataTable.AddColumn(GoogleVisualizationDataTableColumnType.DateTime, "date");

// Add a column representing a number
GoogleVisualizationDataTableColumn column2 = dataTable.AddColumn(GoogleVisualizationDataTableColumnType.Number, "Serie1");

// Now we need to add the data
Random random = new Random();

// Just use the now date plus 7 days for each iteration
DateTime dateTime = DateTime.Now;

// Fake some data records
for (int i = 0; i < numRecords; i++)
{
// Add new row to the datatable
GoogleVisualizationDataTableRow row = dataTable.AddRow();

// Add cell by column parameter
List cells = dataTable.AddCellForColumn(row, column2,random.Next(10,100), null);

// But you can enter the column index instead when inserting cell values
cells[0].CellValue = dateTime;

// Add 7 days for next iteration
dateTime = dateTime.AddDays(7);
}

// Set the datatable in the response
googleVisualizationResponse.GoogleVisualizationDataTable = dataTable;

// Send back response
return new GoogleVisualizationResult(googleVisualizationResponse);
}

Summary

The v1s.GoogleVisualization class library provides you a ready-to-go package to start building interactive charts with Google Visualization API. On top of this you get access to all the features offered by the API but still you have to implement a query functionality against your data source if you wish you to use it in your asynchronous calls. I will continue to make more samples to show more about the features.

PS ! Do you wonder why the v1s namespace is used ? it’s the namespace of a product that we are currently building and we will release segments of this product under GPL v3 and v1s.GoogleVisualization is one of these libraries.