Populate JQuery Flot Chart with Ajax and Json -

Populate JQuery Flot Chart with Ajax and Json -

i'm trying utilize jquery flot charts http://www.flotcharts.org/ in mvc 5 application. @ moment i'm trying understanding of how work. i've used illustration code creates bar chart:

$(document).ready(function () { $(function () { var info = [[0, 5],[1, 10],[2, 15],[3, 20],[4, 25],[5, 30]]; var dataset = [{ label: "2012 average temperature", data: data, color: "#5482ff" }]; var ticks = [[0, "london"], [1, "new york"], [2, "new delhi"], [3, "taipei"],[4, "beijing"], [5, "sydney"]]; var options = { series: { bars: { show: true } }, bars: { align: "center", barwidth: 0.5 }, xaxis: { axislabel: "world cities", axislabelusecanvas: true, axislabelfontsizepixels: 12, axislabelfontfamily: 'verdana, arial', axislabelpadding: 10, ticks: ticks }, legend: { nocolumns: 0, labelboxbordercolor: "#000000", position: "nw" }, grid: { hoverable: true, borderwidth: 2, backgroundcolor: { colors: ["#ffffff", "#edf5ff"] } } }; $.plot($("#placeholder"), dataset, options); }); });

if utilize jquery flot charts, i'd need able pull info in dynamically via ajax opposed beingness hard coded razor view above.

i created action in controller returns same info hard coded illustration above

[httpget] public actionresult gettestdata() { homecoming json(new[] { new[] { 0, 5 }, new[] { 1, 10 }, new[] { 2, 15 }, new[] { 3, 20 }, new[] { 4, 25 }, new[] { 5, 30 }, new[] { 6, 35 } },jsonrequestbehavior.allowget); }

i amended code in razor view commenting out info , plot calls , replaced them ajax request

//var info = [[0, 11],[1, 15],[2, 25],[3, 24],[4, 13],[5, 18]]; //$.plot($("#placeholder"), dataset, options); $.ajax({ type: "get", url: '@url.action("gettestdata")', error: function () { alert("an error occurred."); }, success: function (data) { $.plot($("#placeholder"), dataset, options); } });

this ajax request should phone call gettestdata action in controller , homecoming json data. however, i've set break point on gettestdata action, debugged, , action never gets called, hence info never returned in order create bar chart.

could please help me find out why action isn't called ajax code.

thanks feedback.

folks, problem line of code

var dataset = [{ label: "2012 average temperature", data: data, color: "#5482ff" }];

was outside of ajax call. meant within line of code, variable data beingness assigned, yet didn't exist.

therefore solution move flot chart specific code within success function of ajax call,

$.ajax({ type: "get", contenttype: 'application/json; charset=utf-8', datatype: 'json', url: '/statistics/gettestdata/', error: function () { alert("an error occurred."); }, success: function (data) { //alert("success."); var dataset = [{ label: "2012 average temperature", data: data, color: "#5482ff" }]; var ticks = [[0, "london"], [1, "new york"], [2, "new delhi"], [3, "taipei"], [4, "beijing"], [5, "sydney"]]; var options = { series: { bars: { show: true } }, bars: { align: "center", barwidth: 0.5 }, xaxis: { axislabel: "world cities", axislabelusecanvas: true, axislabelfontsizepixels: 12, axislabelfontfamily: 'verdana, arial', axislabelpadding: 10, ticks: ticks }, legend: { nocolumns: 0, labelboxbordercolor: "#000000", position: "nw" }, grid: { hoverable: true, borderwidth: 2, backgroundcolor: { colors: ["#ffffff", "#edf5ff"] } } }; $.plot($("#placeholder"), dataset, options); } });

hopefully helps else.

jquery ajax asp.net-mvc json flot