I am trying to create a chart using Chart.js that shows the tracked usage over time. I gather all of my chart information into arrays that I now want to use with my chart. The only problem is that I am not sure how to do it. I have included my variables and for loop so show that information is being populated correctly. I have also included my data information with comments of where I want to put each of the Arrays.
These are my variables and how I am create my array:
//variables to use
var ArrayForDailyUsage = [];
var ArrayForTotalUsage = [];
var theTotalUsageSoFar = 0;
var ArrayForTheDate = [];
var ArrayForHoldingTheUsageInformation = [];
var usageplan = 1024;
This is how I set up my data for a line graph:
var data = {
labels: //This is where I want to add ArrayForTheDate[]
["Aug 1", "Aug 2", "Aug 3", "Aug 4", "Aug 5"],
datasets: [{
label: "Usage Plan",
fillColor: "rgba(255,255,255,0.2)", //adds the color below the line
strokeColor: "rgba(224,0,0,1)", //creates the line
pointColor: "rgba(244,0,0,1)", //gets rid of the circle
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: //this is where I want to add my ArrayForHoldingTheUsageInformation[]
[usageplan, usageplan, usageplan, usageplan, usageplan]
}, {
label: "Overall Usage",
fillColor: "rgba(48,197,83,0.2)",
strokeColor: "rgba(48,197,83,1)",
pointColor: "rgba(48,197,83,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(48,197,83,1)",
data: //this is where I want to add ArrayForTotalUsage[]
[15, 25, 45, 70, 80]
}, {
label: "Daily Usage",
fillColor: "rgba(151,187,205,0.2)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(151,187,205,1)",
data: //this is where I want to add ArrayForDailyUsage[]
[15, 10, 20, 25, 10]
}
]
};
In case you were wondering, this is how I add my chart
var maxUsage = 1024;
var maxSteps = 5;
var myLineChart = new Chart(ctx).Line(data, {
pointDot: false,
scaleOverride: true,
scaleSteps: maxSteps,
scaleStepWidth: Math.ceil(maxUsage / maxSteps),
scaleStartValue: 0
});
Why can I not do: labels:ArrayOfDates[];
Is there a simple way to add my arrays to my chart data? How do I approach this? Thank you in advance! Please let me know if I was unclear or if you have any questions!!!