Füllen JQuery Flot Diagramm mit Ajax und Json

Ich versuche zu verwenden die JQuery-Flot-Charts http://www.flotcharts.org/ in meiner MVC 5-Anwendung. Im moment bin ich gerade versucht, zu verstehen, wie Sie funktionieren. Ich habe dieses Beispiel-code, die erstellt ein Balkendiagramm:

$(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);
    });

});

Wenn ich die JQuery-Flot-Charts, würd ich brauchen zu können, ziehen Sie die Daten dynamisch per AJAX im Gegensatz zu hart codiert in meine Razor-Ansicht wie oben.

Ich habe eine Action in meinem Controller liefert die gleichen Daten wie die, die hart codiert in dem Beispiel oben

[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);
}

Habe ich dann geändert, der code in meinem Razor-Ansicht durch auskommentieren der Daten und Handlung fordert, und ersetzt Sie mit einem 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);
            }
        });

Diesem Ajax-Request sollte dann rufen die GetTestData Aktion in meinem Controller und der Rückkehr der Json-Daten. Jedoch, ich habe einen break-point auf meinem GetTestData Aktion, debugged, und die Handlung wird nie aufgerufen, daher die Daten werden nie zurückgegeben, um erstellen Sie das Balkendiagramm.

Könnte jemand bitte helfen Sie mir, herauszufinden, warum meine Aktion ist nicht von mir den Ajax-code.

Danke für jedes feedback.

Sie haben eine variable namens mismatach in Ihrem success - handler, gibt es data rufen Sie $.plot mit dataset...
Darüber hinaus, wenn Ihre Aktion nicht aufgerufen wird, tut @Url.Action("GetTestData") zeigen Sie auf die richtige URL? Wenn Sie Ihre javascript-debugger, der unter den Netzwerk-tab Typ, hat die $.ajax Anfrage genannt? Hat es Antwort, 404, 403, 500...?
Vielen Dank für deine Hilfe, Mark. Ich dachte, die Lösung und es gepostet unten.

InformationsquelleAutor tcode | 2014-10-06

Leute, das problem war, dass die code-Zeile

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

war außerhalb meiner Ajax-Call. Dies bedeutet, dass in dieser Codezeile die variable data zugewiesen wird, wurde, trotzdem es gar nicht gibt.

Daher war die Lösung, bewegen sich die Flot-Chart bestimmten code innerhalb der success-Funktion des Ajax-Aufrufs, wie 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);
            }
        });

Hoffentlich hilft jemand anderes.

InformationsquelleAutor tcode

Nur komm ich mit http://www.jqueryflottutorial.com/how-to-make-jquery-flot-ajax-update-chart.html

wenn ich das Diagramm aktualisieren mit meinem lokalen json-Daten einen Blick auf meinen code

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

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

Daten.json

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

wenn ich will hinzufügen, mehr Daten in der json-Datei, es wird nicht den Ausgang zeigen. Gibt es eine Möglichkeit, um das Diagramm dynamisch mit mehr Daten, wie diese in der json-Datei?

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

InformationsquelleAutor user458766

1

Diesem Beispiel kann helfen. So ändern Sie einfachen jquery flot Diagramm mit ajax :
Empfangen von Daten über AJAX mit jQuery Flot

InformationsquelleAutor Sulung Nugroho

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.