Reputation: 5093
In 1 of my page I have 2 tabs, 1 that present data in a grid and 1 that shows a graph base on the data. My model contains the list of the object to be presented in the grid, the data for the graph is stored in a ViewBag. But how do I create a chart using Jqplot?
I have something like this in my code:
var arr1 = new object[1];
var arr2 = new object[dataModel.Count()];
var ctr = 0;
foreach (var dm in dataModel)
{
arr2[ctr++] = new object[] { dm.SkuModel, dm.Qty };
}
arr1[0] = arr2;
ViewBag.ChartData = Json(arr1);
function drawChart() {
$.jqplot.config.enablePlugins = true;
//$.parseJSON("{{{'Verwerkende FruedenStunde Companaziert Eine industrie', 9}, {'Retail', 8}, {'Primaire producent', 7}, {'Out of home', 6}, {'Groothandel', 5}, {'Grondstof', 4}, {'Consument', 3}, {'Bewerkende industrie', 2}}}");
var chartData = $.parseJSON("@ViewBag.ChartData");
var chartData = eval("@ViewBag.ChartData");
plotgraph = $.jqplot('jqplot',
[[['Verwerkende FruedenStunde Companaziert Eine industrie', 9], ['Retail', 8], ['Primaire producent', 7], ['Out of home', 6], ['Groothandel', 5], ['Grondstof', 4], ['Consument', 3], ['Bewerkende industrie', 2]]],
//chartData,
{
title: ' ',
seriesDefaults: {
shadow: true,
renderer: $.jqplot.PieRenderer,
rendererOptions: { padding: 2, sliceMargin: 2, showDataLabels: true }
},
legend: { show: true, location: 'e' }
});
}
I've already tried several ways to read back the Json array into javascript object but I can't make it work.
Thanks,
czetsuya
Upvotes: 0
Views: 1476
Reputation: 5093
Code that solved my problem:
--Controller:
var dataModel = MdlRepository.SearchDealerReport(model);
var sb = new StringBuilder("[");
var sbTicks = new StringBuilder("[");
foreach (var dm in dataModel)
{
sb.Append(string.Format("{0},", dm.Qty));
sbTicks.Append(string.Format("'{0}',", dm.Dealer));
}
sb.Append("]");
sbTicks.Append("]");
ViewBag.ChartData = sb.ToString();
ViewBag.ChartTicks = sbTicks.ToString();
return PartialView("perDealer", dataModel);
--View:
eval("@Html.Raw(ViewBag.ChartData)");
Upvotes: 1
Reputation: 1
Call your drawChart()
function in the document.ready section.
Something like:
jQuery(document).ready(function () {
drawChart();
});
Upvotes: 0