As published in the source code example files (Example 2), this post is to show how to create a chart with two series
Server side code
public string Example2Data()
{
var dt = new Wrapper.DataTable();
//X Axis column
dt.AddColumn(new Column(ColumnType.String, "Year"));
//Series 1
dt.AddColumn(new Column(ColumnType.Number, "Sales", "Sales - Legend"));
//Series 2
dt.AddColumn(new Column(ColumnType.Number, "Expenses"));
//creating some data...
var row1 = dt.NewRow();
var row2 = dt.NewRow();
var row3 = dt.NewRow();
var row4 = dt.NewRow();
var row5 = dt.NewRow();
var row6 = dt.NewRow();
///note: see how 3 values (cells) are injected per row!
row1.AddCellRange(new[] {new Cell("2009"), new Cell(10), new Cell(20)});
row2.AddCellRange(new[] {new Cell("2010"), new Cell(10), new Cell(50)});
row3.AddCellRange(new[] {new Cell("2011"), new Cell(20), new Cell(10)});
row4.AddCellRange(new[] {new Cell("2012"), new Cell(11), new Cell(20)});
row5.AddCellRange(new[] {new Cell("2013"), new Cell(18), new Cell(18)});
row6.AddCellRange(new[] {new Cell("2014"), new Cell(30), new Cell(19)});
dt.AddRow(row1);
dt.AddRow(row2);
dt.AddRow(row3);
dt.AddRow(row4);
dt.AddRow(row5);
dt.AddRow(row6);
return dt.GetJson();
}
Client side code
Declare this part in the HTML page:
<!--1. Load the jQUery library-->
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<!--2. Load the Google charts-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<!--3. Declare the div-->
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<!--4. AJAX javascript -->
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
var jsonData = '@Html.Raw(ViewBag.JSON)';
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
title: 'Company Performance',
hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
vAxis: { minValue: 0 }
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Result
