This project has moved and is read-only. For the latest updates, please go here.
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)});


	return dt.GetJson();

Client side code

Declare this part in the HTML page:

<!--1. Load the jQUery library-->
<script src="" type="text/javascript"></script>

<!--2. Load the Google charts-->
<script type="text/javascript" src=""></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.

    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);



Last edited Dec 2, 2016 at 10:54 AM by zoranmax, version 4


No comments yet.