Ich möchte ein Flot-Diagramm für eine variable Anzahl von Trackern mit einer variablen Anzahl von verfolgbaren Objekten erstellen. Mein Code scheint so weit zu funktionieren, aber ich habe 2 Anomalien bemerkt.Wie erstellt man dynamisch einen Datensatz für Flot JS?
Wenn mehr als 1 Wert in: "var trackerList = [" a "," b "," c "," d "," e "];" zeigt nur den letzten Wert im Array.
Wenn mehr als 1 Wert in: var registeredTrackableObjects = ["a", "b", "c", "d"]; zeigt es überhaupt nichts.
Ich habe einige Beispiele gesehen, also denke ich, dass mein Code funktionieren sollte, was fehlt mir? Während ich dabei bin, was wäre der beste Weg, um dieses Diagramm wie eine Sekunde zu aktualisieren? Ich möchte den Testwert mit den tatsächlichen Daten aus meinem Java-Code austauschen.
Danke.
<script type="text/javascript">
$(document).ready(function()
{ \t
\t //Test values
\t var intensity = 5;
\t var trackerList = ["a", "b", "c", "d", "e"];
\t var registeredTrackableObjects = ["a", "b", "c", "d"];
\t
\t
\t var xDistance = 1.05;//Distance between bars
\t var yMin = 0;
\t var yMax = 20;
\t var xMin = 0;
\t var xMax = 10;
\t var data = [];//Flot JS format, which contains pairs of {label, array}
\t var customBarArray = [];
\t var customBar = [];
\t //Create a data set for every TO
\t for(i = 0; i<registeredTrackableObjects.length; i++)
\t {
\t \t //Create 1 bar for every tracker
\t \t customBar = [];
\t \t
\t \t for(j = 0; j<trackerList.length; j++)
\t \t {
\t \t \t customBar[j] = j;
\t \t \t customBar.push([xDistance * j, intensity]);
\t \t }
\t \t
\t \t customBarArray.push(customBar);
\t \t var name = "Beacon: " + i;
\t \t data.push({label: name, data: customBarArray[i]});
\t \t xDistance += 1.05;
\t }
$.plot($("#placeholder"), data,
{
series: {
bars: {
show: true,
barWidth: 0.1,
lineWidth: 0,
order: 1,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 0.7
}]
}
}
},
xaxis: {
mode: "time",
min: xMin,
max: xMax,
tickLength: 0,
tickSize: [1, "month"],
axisLabel: 'Month',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 10,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 1
},
yaxis: {
min: yMin,
max: yMax,
axisLabel: 'Value',
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 10,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
legend: {
backgroundColor: "#EEE",
labelBoxBorderColor: "none"
},
colors: ["#AA4643", "#89A54E", "#4572A7"]
});
});
</script>