How to schedule dates in Chart.js
I am trying to make a chart for my website that assigns a number of dates (entries for each day) and then displays them in a graph.
I tried to write a function that makes a list of all dates in this v = specific range in the format
"date1", "date2", "date3", ...
and then put this variable line in chart.js line
var lineChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
},
{
label: "My Second dataset",
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: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
If I have the code above it will create a graph. But I need it to be dynamic, so I have functions that create dates and data. But when calling these functions in the linechartData variable, the chart doesn't work.
var lineChartData = {
labels: [genDates()],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: [genData()]
},
This code directly above will not work.
If anyone has any suggestions on how to plot the data, please post below.
GenData method generates random numbers
function gendata() {
var i = 0;
var data = "";
while (i < 365) {
data = data + Math.round(Math.random() * 100) + ", ";
i = i + 1;
}
return data;
}
gendate method
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push(new Date(currentDate));
currentDate = currentDate.addDays(1);
}
dates = "";
for (i = 0; i < dateArray.length; i++) {
date = date + dateArray[i] + ", ";
}
return dates;
}
source to share
var areaChartData = {
labels: labelsnuevos(productos),
// here goes my dataset
};
function labelsnuevos(productos)
{
var labels = [];
$.each(productos, function(key, value) {
var lab = value.nombre;
labels.push(lab);
});
return labels;
}
I have productos instead of dates, but you need to pass your "dates" to a variable, in this case my variable is i sproductos, then with foreach you grab and push its value.
source to share