CODEWITHSUNDEEP
asp.net-mvc-3chartsjqplot
czetsuya
czetsuya

Reputation: 5093

Passing MVC3 Json encoded data to ViewBag to be read and plot in jqplot

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

Answers (2)

czetsuya
czetsuya

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

Erx
Erx

Reputation: 1

Call your drawChart() function in the document.ready section.

Something like:

jQuery(document).ready(function () {    
    drawChart();
});

Upvotes: 0

Related Questions