This project has moved. 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)});


	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

2Series.PNG

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

Comments

No comments yet.