Develop Reference

Chart.js not displaying when passing dynamic labels

I am trying to draw a chart by passing values for labels and data dynamically using char.js.
The chart.js module refuses to accept the labels when passed as a variable.
When I hardcode it, it works just fine.
The label variable prints out the values on the page and seems to be correct in format.
Very similar to the problem described in the below query, except that I am already using a proper array.
[https://stackoverflow.com/questions/60453491/chart-js-not-showing-data-when-pass-dynamic-labels][1]
mypage.html:
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.4"></script>
{{Messages.vm_size_in_use_labels}}
{{Messages.vm_size_in_use_data}}
<canvas id="chart" width="50" height="50"></canvas>
<script lang="JavaScript">
let ctx = document.getElementById("chart").getContext("2d");
let chart = new Chart(ctx, {
type: "pie",
data: {
labels: {{Messages.vm_size_in_use_labels}},
datasets: [
{
label: "Gross volume ($)",
backgroundColor: "#79AEC8",
borderColor: "#417690",
data: {{Messages.vm_size_in_use_data}},
}
]
},
options: {
title: {
text: "Gross Volume in 2020",
display: true
}
}
});
</script>
The page shows the printed value correctly but chart doesn't display:
['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s']
[3, 3, 1, 1]
If I change the label to hard values,
labels: ['Standard_B1ls', 'Standard_D2_v2', 'Standard_D4s_v3', 'Standard_B1s'],
this works just fine and chart is displayed.
Not sure what is missing here. the framework is django if it matters.

ChartJS x-axis show only months of year

So I'm making this mobile app using Cordova, which allows me to use HTML, CSS and JavaScript. I'm currently using SQLite as a database (works almost same as mySQL) but that isn't that important. All I do is get my data from that database. I get both the date (of when the data was added to the Database) and the weight of a person.
I'm using a linegraph which show the weight on the Y-axis and the data on the X-axis.
What I want to do is only show the months as labels on the x-axis but still make it so that it show data for each day seperate. So for example if I add data on the 1st of January, the 2nd of January and the 3rd of January. I want to be able to see all 3 days as dots on my graph but on the X-axis it should only say 'January'.
I've been looking into the 'time' option of Chart.JS but can't really make any sense of how I'm supposed to do it.
HTML:
<canvas id="myChart" style="margin-top: 20px;"></canvas>
JavaScript:
//these are the arrays that I will fill dynamically. Labels will be my months and data will be the weight
var labels = [];
var data = [];
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
// The type of chart we want to create
type: 'line',
// The data for our dataset
data: {
labels: labels,
datasets: [{
backgroundColor: 'rgba(255, 119, 0, 0.5)',
borderColor: 'rgba(255, 119, 0, 1)',
data: data
}]
},
// Configuration options go here
options: {
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});

Use the time-type in your x-axis. With time: { unit: 'month' } (always months) or minUnit (months and years if necessary) you can get the month labels.
As label for your data you need to pass a Date or moment
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'month'
}
}],
}
Here is a complete example.
Check the moment docs for dates, especially the creation and parsing of dates. Chart.js works with moment dates so it's quite important (and quite easy btw).

Drawing a graph with indexedDB values using Chart.js

I'm trying to use an array from my indexedDB, to plot a graph on Chart.js for my web application. I've attached the code from my javascript file where the array is obtained.
The array looks like this Objarr = ["34", "89"] and the numbers are added to the array when the user inputs these.
But I'm not able to say data: Objarr in my javascript code for the chart? Please, may you help me?
Javascript Code:
var chart = document.getElementById('lineChart').getContext('2d');
var lineChart = new Chart(chart, {
type: 'line',
data: {
labels: ["Jan", "Feb", "Mar", "April", "May", "June", "July"],
datasets: [{
label: " Peak flow values",
fill: false,
data: Objarr,
}
]

chart.js version 2.4.0 does not display bars for me

I'm trying to display a simple bar chart using chart.js 2.4.0 (the most recent version). I've followed two tutorials and do not see what I am doing wrong. The grid displays, but the bars do not. It's as if it is not seeing the data set data at all.
I've simplified the page, so at this point it is only loading jquery-2.1.4.min.js before the 2.4.0 Chart.bundle.min.js. No other js library is loaded.
Here is the html code:
<div id="scorecard_results1" class="scorecard_results" >
<div id="holder1"></div>
<canvas id="bargraph1"></canvas>
<script type="text/javascript" charset="utf-8">
var ctx = document.getElementById("bargraph1");
console.log("id is " + ctx.id);
var bargraph = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
dataSets : [{
label: "test",
data: [12, 19, 3, 5, 2, 3],
backgroundColor: "#333"
} ]
}
});
</script>
</div>
As you can see, it is basically copied directly from the Chart.js example in the documentation. I've googled but have not found anything helpful. It should just work from all I've read. Not sure what I am doing wrong.
There are no errors showing up in the firebug console. Any suggestions on how to debug or troubleshoot this would be greatly appreciated.

You have a type-O for the dataSets property. Should be datasets (lowercase s).
datasets
https://jsfiddle.net/fhx55z43/3/

Bar graph from json response using Jquery

I have an AJAX call which on success gets a JSON response in the below format. Where the number of JSON array columns does not change but the number of entries can increase. Need help in plotting this as a bar chart using jQuery.
[
{
"amount": XX,
"instanceId": "XXX",
"timeStamp": XXX
},
{
"amount": XX,
"instanceId": "XX",
"timeStamp": XX
}
]

You should show code of what you have tried so far and ask a specific question about an issue you are having. Without this information it's hard to provide a suitable answer. That being said, I will provide one way of creating a dynamic bar chart with JavaScript.
This approach uses Chart.js which is a responsive HTML5 charting library that uses the <canvas> element. They provide a bar chart implementation and you can find the documentation for it here.. The first thing to do is include the library into your HTML file (download it and put it in a directory on your server first):
<script src="Chart.js"></script>
Then, in your HTML add a canvas element where the chart will be displayed:
<canvas id="myChart" width="400" height="400"></canvas>
Now, in your JavaScript file, create the chart object using the canvas context:
var ctx = document.getElementById("myChart").getContext("2d");
var chartObject = new Chart(ctx);
Then, using the chart object we created, we can call the Bar(data, options) factory method on it to create the bar chart. The Bar() method takes two arguments: a data object and a options object. The options object allows you to alter certain default functionality. The data object is where you will add your values retrieved from your AJAX call.
The data object contains two direct properties: labels and datasets; each of which are arrays. The labels will be what displays on the bottom of the graph going horizontally, such as dates. Each object in the datasets array will contain a data property which will be the y-value of that particular bar graph corresponding to the label at the same index. They may sound confusing but it's really not once you have a look:
var data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,0.8)",
highlightFill: "rgba(220,220,220,0.75)",
highlightStroke: "rgba(220,220,220,1)",
data: [65, 59, 80, 81, 56, 55, 40]
},
{
label: "My Second dataset",
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,0.8)",
highlightFill: "rgba(151,187,205,0.75)",
highlightStroke: "rgba(151,187,205,1)",
data: [28, 48, 40, 19, 86, 27, 90]
}
]
};
Where the first index of both objects data arrays will correspond to the first index in the label array: bar one was at 65 in January and bar two was at 28 in January.
Since now we have our data object, we can now create the bar graph:
var barChart = chartObject.Bar(data);
Now, whenever you get more data you can add it with the following method:
// The values array passed into addData should be one for each dataset in the chart
barChart.addData([40, 60], "August");
// The new data will now animate at the end of the chart.
And you can even add more datasets:
barChart.datasets.push("data to push");
That should give you enough of a start. You just need to provide some alterations to fit your scenario.