Create Bar chart Dynamic data using MVC 4 with Jquery

Question

My Code

 

Controller Code :-

 

public JsonResult DashboardGraph()

{

int UserTypeId = Convert.ToInt32(Session["UserType"]);

int ContactId = Convert.ToInt32(Session["ContactId"]);

int UserId = Convert.ToInt32(Session["UserId"]);

int intStatusId = 99;

string strStatus = "Invalid";

returndbmlPOOfferSummaryView objreturndbmlPOOfferSummaryView = new returndbmlPOOfferSummaryView();

ObservableCollection<dbmlPOOfferSummaryView> dbmlPOOfferSummaryView = new ObservableCollection<dbmlPOOfferSummaryView>();

try

{

objreturndbmlPOOfferSummaryView = objServiceClient.POOfferSummaryViewGetAll(ContactId, UserTypeId, 101, objServiceContract.GetSecurityInfo());

if (objreturndbmlPOOfferSummaryView.objdbmlStatus != null && objreturndbmlPOOfferSummaryView.objdbmlStatus.StatusId == 1)

{

intStatusId = objreturndbmlPOOfferSummaryView.objdbmlStatus.StatusId;

strStatus = objreturndbmlPOOfferSummaryView.objdbmlStatus.Status;

dbmlPOOfferSummaryView = objreturndbmlPOOfferSummaryView.objdbmlPOOfferSummaryView;

Session["ExportData"] = dbmlPOOfferSummaryView;

}

else

{

strStatus = objreturndbmlPOOfferSummaryView.objdbmlStatus.Status;

}

var chartData = new object[dbmlPOOfferSummaryView.Count + 1];

chartData[0] = new object[] {

"Zone",

"TotalCustomer"

};

int j = 0;

foreach (var i in dbmlPOOfferSummaryView)

{

j++;

chartData[j] = new object[] { i.Zone, i.TotalCustomer };

}

}

catch (Exception ex)

{

ViewData["MSG"] = ex.Message;

}

return new JsonResult { Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

//return Json(new { ZoneWiseReportView = dbmlPOOfferSummaryView, Status = strStatus, StatusId = intStatusId }, JsonRequestBehavior.AllowGet);

}

 

 

 

 

Cshtml Page Code :-

<div id="visualization">

</div>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script>

$(document).ready(function () {

debugger;

var chartdata = null;

$.ajax({

url: '<%: url.action("dashboardgraph","home")%>',

type: 'get',

datatype: 'json',

data: {},

async: true,

success: function (d) {

chartdata = d;

//drawchart(d);

},

error: function () {

alert("error");

}

}).done(function () {

drawchart(chartdata);

});

});

function drawchart(d) {

debugger;

var chartData = d;

var data = null;

data = google.visualization.arrayToDataTable(chartData);

var view = new google.visualization.Dataview(data);

view.setColoums([0, {

type: 'number',

label: data.getColumnLabel(0),

calc: function () { return 0; }

}, {

type: 'number',

label: data.getColumnLabel(0),

calc: function () { return 0; }

}]);

var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));

var option = {

title: 'Customer Wise Reports',

legend: 'bottom',

hAxis: {

title: 'Zone',

format: '#'

},

vAxis: {

title: 'Customer'

},

chartArea: {

left: 100, top: 50, width: '70%', height: '50%'

},

animation: {

duration: 1000

}

};

var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {

google.visualization.events.removeListener(runFirstTime);

chart.draw(data, option);

});

chart.draw(view, option)

}

</script>