Populate JQuery Flot Chart with Ajax and Json

Question

I'm trying to use JQuery Flot Charts http://www.flotcharts.org/ in my MVC 5 application. At the moment I'm just trying to get an understanding of how they work. I've used this example code which creates a Bar Chart:

$(document).ready(function () {

    $(function () {

    var data = [[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 I were to use JQuery Flot Charts, I'd need to be able to pull the data in dynamically via AJAX as opposed to being hard coded into my Razor View like above.

I created an Action in my Controller which returns the same data as that hard coded into the example above

[HttpGet]
public ActionResult GetTestData()
{
     return 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 then amended the code in my Razor View by commenting out the data and plot calls and replaced them with an Ajax Request

//var data = [[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 then call the GetTestData Action in my Controller and return the Json data. However, I've put a break point on my GetTestData Action, debugged, and the Action never gets called, therefore the data is never returned in order to create the Bar Chart.

Could anyone please help me find out why my Action isn't called by my Ajax code.

Thanks for any feedback.

Answer 1

This example may help. How to change simple jquery flot chart with ajax : Receive data via AJAX with jQuery Flot

Answer 2

I just come with http://www.jqueryflottutorial.com/how-to-make-jquery-flot-ajax-update-chart.html

if i want to update the chart with my local json data take a look at my code

function GetData() {
    $.ajaxSetup({ cache: false });

    $.ajax({
        url: "data.json",
        dataType: 'json',
        success: update,
        error: function () {
            setTimeout(GetData, updateInterval);
        }
    });
}

data.json

{
"cpu":10, 
"core":30, 
"disk":50
} 

if i want to add more data in the json file, it will not show the output. Is there any way to make the chart dynamically with more data like this in json file?

{
"cpu":70, 
"core":20, 
"disk":10
},
{
"cpu":90, 
"core":20, 
"disk":80
},
{
"cpu":50, 
"core":10, 
"disk":60
} 

Answer 3

Folks, the problem was that the line of code

var dataset = [{ label: "2012 Average Temperature", data: data, color: "#5482FF" }];

was outside of my Ajax Call. This meant that within this line of code, the variable data was being assigned, yet it didn't exist.

Therefore the solution was to move the Flot Chart specific code inside the success function of the Ajax Call, like so

$.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 this helps someone else.