JavaScript Canvas JS, Daten eingeben?

WieauchImmer23 · 3. November 2015

Hallo,
Ich muss ein paar Daten im browser visualisieren und verwende dazu CanvasJS.

Nun möchte ich dazu ein paar Testdaten erzeugen allerdigns werden keine in den Chart eingetragen und ich habe keine Ahnung weshalb.

Code:

<div id="chartContainer1" style="height: 256px; width: 100%;">

  $(document).ready(function () {
   var stacks = 10;
            dps = [];
            for (i = 0; i < stacks; i++) {
                for (var j = 0; j < 1000; j++) {
                    yVal = yVal + Math.round(5 + Math.random() * (-5 - 5));
                    dps.push({
                        x: j, y: yVal
                    });
                }
                var data = {
                    color: "red",
                    type: "stackedColumn100",
                    dataPoints: dps
                };
                dps = [];
                graphData.push(data);
            }

            var chart = new CanvasJS.Chart("chartContainer1", {
                title: {
                    text: "Live Random Data"
                },
                data: [graphData]
            });

            chart.render();
}

Im Endeffekt möchte ich einfach mal 1000 bars erzeugen wobei jeder einzelne aus zehn stacks besteht.

Wenn ich den obigen Code verwende wird ein chart mit dem Titel angezeigt, aber das ist es auch schon.
Wenn ich den Debugger anwerfe kann ich sehen, dass in graphData 10 Arrays mit jeweils 1000 JSON Objekten sind, allerdings wird mir im chart nur ein leeres Array angezeigt und ich habe keine Ahnung weshalb.

Ich haber mir bereits gedacht, dass die Datentypen falsch sind aber wenn ich mir die Beispiele ansehe schaun diese gleich aus.
hier ist ein Beispieldatensatz

Könnte mir bitte jemand meinen Fehler verraten?

r15ch13 · 3. November 2015

Habe einfach mal den Code auf der Beispiel Seite angepasst. (Kannst den unten einfach einfuegen)
Also in deinem Codeschnipsel fehlen erstmal die VariableN graphData und yVal.
Ausserdem muesstest du das zusaetzliche Array bei der Zuweisung von graphData auslassen.

Code:

<!DOCTYPE HTML>
<html>

<head>  
    <script type="text/javascript">
    window.onload = function () 
    {
        var graphData = [];
        var stacks = 10;
        dps = [];
        for (i = 0; i < stacks; i++) {
            for (var j = 0; j < 1000; j++) {
                dps.push({
                    x: j, y: Math.round(5 + Math.random() * (-5 - 5))
                });
            }
            var data = {
                color: "red",
                type: "stackedColumn100",
                dataPoints: dps
            };
            dps = [];
            graphData.push(data);
        }

        var chart = new CanvasJS.Chart("chartContainer", 
        {
            title: {
                text: "Live Random Data"
            },
            data: graphData
        });

        chart.render();
    }
</script>
<script type="text/javascript" src="/assets/script/canvasjs.min.js"></script>

</head>
<body>
    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>
</html>

Suche

JavaScript Canvas JS, Daten eingeben?

WieauchImmer23

Cadet 1st Year

r15ch13

Lieutenant

Ähnliche Themen