-
Notifications
You must be signed in to change notification settings - Fork 0
Home
wisecoders edited this page Jul 25, 2015
·
3 revisions
Welcome to the ChartHelper wiki!
This is a example project explaining how we can use MVC Html Helpers to create Google Charts. This helper class reduces the code redundancy and code maintenance
- Include a folder Helpers in your project
- Download ChartController.cs file and place it in there.
Controller:
ChartController.cs
ChartModel model = new ChartModel();
// add columns
model.columns.Add("string", "Topping");
model.columns.Add("number", "Slices");
// add rows. in real world scenario talk to database and get the info.
// to do: convert datatable to objects
DataTable dt = new DataTable();
dt.Clear();
dt.Columns.Add("Topping");
dt.Columns.Add("Slices");
dt.Columns["Slices"].DataType = System.Type.GetType("System.Int32");
DataRow dr = dt.NewRow();
dr["Topping"] = "Mushrooms";
dr["Slices"] = 3;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Topping"] = "Onions";
dr["Slices"] = 3;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Topping"] = "Olives";
dr["Slices"] = 1;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Topping"] = "Zucchini";
dr["Slices"] = 1;
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["Topping"] = "Pepperoni";
dr["Slices"] = 2;
dt.Rows.Add(dr);
model.rows = dt;
//add chart options here.
model.Options.Add("Width", "100%");
model.Options.Add("Height", "65%");
model.Options.Add("Title", "My pie chart");
return View(model);
Usage: - in cshtml
@model GoogleMapsMVCExtension.Models.ChartModel
@using GoogleMapsMVCExtension.Helpers;
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Google Chart MVC Extension Demo</title>
</head>
<body>
<h1>Google Chart MVC Extension Demo</h1>
@ChartHelper.DrawChart(Model, "PieChart", "divChart")
<div id="divChart">
</div>
</body>
</html>