Chart.js will not show up second line - javascript

I have a question about chart.js. I created a line chart with two lines. One line for the high values and one line for the lower values.
Everything works fine, but the low red line won't appear in the diagram. Is there anything i have forgotten?
Thank you for your help!
var config = {
type: 'line',
data: {
labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
datasets: [{
label: 'High',
backgroundColor: 'blue',
borderColor: 'blue',
data: [10.43, 10.42, 10.44, 10.43, 10.40],
fill: false,
}, {
label: 'low',
fill: false,
backgroundColor: 'red',
borderColor: 'red',
data: [
[8.43, 8.5, 8.39, 8.38, 8.38],
],
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Test'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>


Your second dataset data array is double wrapped:
data: [
[8.43, 8.5, 8.39, 8.38, 8.38],
],
Removing the second set of brackets generates the graph correctly.
var config = {
type: 'line',
data: {
labels: ['16:30', '17:30', '18:30', '19:30', '20:30'],
datasets: [{
label: 'High',
backgroundColor: 'blue',
borderColor: 'blue',
data: [10.43, 10.42, 10.44, 10.43, 10.40],
fill: false,
}, {
label: 'low',
fill: true,
backgroundColor: 'red',
borderColor: 'red',
data: [8.43, 8.5, 8.39, 8.38, 8.38], // ****THIS IS WHERE THE UPDATE IS****
}]
},
options: {
responsive: true,
title: {
display: true,
text: 'Test'
},
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Time'
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
};
var ctx = $('#dia');
var myChart = new Chart(ctx, config);
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="dia"></canvas>

Related

Chart.js working with database arrays and data structures

I'm making a chart which is drawing data from a database array. I have 2 arrays:
const numPostPerCat= <?php echo json_encode($countCateT); ?>;
const catName= <?php echo json_encode($cateTforChart); ?>;
Which I use to feed the chart in the traditional way:
const data2= {
labels: catName,
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: numPostPerCat,
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}],
};
const config2={
type: 'bar',
data: data2,
options: {
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid:{
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Territorios',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);
But how can I use database arrays when I want to use data structure? Should I use a different kind of a array? There's another configuration in JS? because this doesn't work:
const data2= {
datasets: [{
label: 'Terri',
backgroundColor: 'rgb(166,166,166)',
borderColor: 'rgb(166,166,166)',
data: [
{Terris: catName, cuantos: {cantidad: numPostPerCat}
},
],
borderWidth: 2,
barThickness: 3,
datalabels: {
color:'gray',
anchor: 'end',
align: 'top',
},
}]
};
const config2={
type: 'bar',
data: data2,
options: {
parsing:{
xAxisKey: 'Terris',
yAxisKey: 'cuantos.cantidad',
},
scales: {
x:{
grid:{
display: false,
},
},
y:{
ticks:{
display: false,
},
grid: {
display: false,
},
},
},
plugins:{
legend: {
display: false
},
title:{
display: true,
text: 'Años',
align: 'start',
},
},
responsive: true,
maintainAspectRatio: false,
}
};
const myChart2 = new Chart(
document.getElementById('myChart2'),
config2
);

How do you set x and y axis and Title for a line chart using charts.js?

This is using charts.js. This code only makes the line graph but the title, x axis and y axis does not show. I want to add title, and the names for those 2 axis onto the graph. what is wrong and how do you fix it? I also want to make the y axis to start from 0 and up.
async function chartDisplay() {
await getData1();
await getData2();
const ctx = document.getElementById('chart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: xLabels,
datasets: [{
data: ratingDataI,
label: "data1",
borderColor: "#3E95CD",
fill: false
},
{
data: ratingDataA,
label: "data2",
borderColor: "#3E95CD",
fill: false
}
]
},
options: {
responsive: true,
title: {
display: true,
text: 'Chart.js Line Chart'
},
tooltips: {
mode: 'label',
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
x: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Dates'
}
}],
y: [{
display: true,
scaleLabel: {
display: true,
labelString: 'Value'
}
}]
}
}
});
}

the x and y should not be arrays but objects, also the scaleLabel prop is called title now. For all the changes please read the migration guide (https://www.chartjs.org/docs/master/getting-started/v3-migration.html)
Example:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
scales: {
y: {
beginAtZero: true,
title: {
display: true,
text: 'yAxis'
}
},
x: {
title: {
display: true,
text: 'xAxis'
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.js"></script>
</body>

Create a 100 percent stacked line chart with chart.js

I'm using chart.js to build my charts, but felt the need to create a stacked chart inline, but using the stacked:true property doesn't seem to work
Here is my code
var chart1 = new Chart(document.getElementById("invests2").getContext("2d"), {
type: "line",
options: {
layout: {
padding: 0
},
elements: {
point:{
radius: 0
},
},
responsive: true,
bezierCurve: false,
maintainAspectRatio: false,
scales: {
yAxes: [{
stacked:true,
display: true,
scaleLabel: {
display: true,
},
ticks: {
maxTicksLimit:100,
fontSize:12,
maxRotation: 0,
minRotation: 0
},
gridLines: {
display: false,
}
}]
}
},
data: {
labels: ['01/04/2018','01/05/2018','01/06/2018','01/07/2018','01/08/2018','01/09/2018'],
datasets: [{
type: 'line',
label: 'Tit. Publicos',
data: [20940429854.44,19639459015.81,19191914837.46,19290826114.34,19702912802,21274400792.07]
},
{
type: 'line',
label: 'Tit. Privados',
data: [315734585.11,332328878.86,349823178.63,343130519.19,342839692.62,367877901.82,]
}
]
},
});
The look presented was this
But i need this
Stacked:true not work for line chart?

White Space in stacked bar using chart.js

I'm using chart.js version 2.7.2 to plot some charts.
The chart is a bar chart, and i'm using a time axis to set the dataset points.
If i use a normal graph the dataset is showed correctly, but if i set the stacked axis, at the first item the render show a strange white space!
Look at the charts, with stacked:false its all ok, with stacked:true there's a strange white space at the first bar!
Is there a way to remove that white space?
Thanks
function newDate(days) {
return moment().add(days, 'd').toDate();
}
const lineData = {
labels: null,
datasets:
[
{
label: 'A',
fill: false,
backgroundColor: "hsl(50, 50%, 80%)",
data:
[
{
x: newDate(1),
y: 12
},
{
x: newDate(2),
y: 15
},
],
},
{
label: 'B',
fill: false,
backgroundColor: "hsl(250, 50%, 80%)",
data:
[
{
x: newDate(0),
y: 23
},
{
x: newDate(2),
y: 34
},
{
x: newDate(3),
y: 45
},
]
}
],
}
const lineOptions = {
type: 'bar',
data: lineData,
options:
{
title:
{
display: true,
text: 'STACKED TRUE'
},
legend:
{
display: true,
},
hover:
{
mode: 'nearest'
},
fill: false,
responsive: true,
scales:
{
xAxes:
[
{
stacked: true,
display: true,
ticks:
{
beginAtZero: false,
},
scaleLabel:
{
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time:
{
unit: 'day',
unitStepSize: 1,
displayFormats:
{
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}
],
yAxes:
[
{
ticks:
{
beginAtZero: true,
},
display: true,
stacked: true,
scaleLabel:
{
display: true,
labelString: "Items",
}
}
]
},
tooltips:
{
mode: 'x',
},
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);
const lineOptions2 = {
type: 'bar',
data: lineData,
options:
{
title:
{
display: true,
text: 'STACKED FALSE'
},
legend:
{
display: true
},
hover:
{
mode: 'nearest'
},
fill: false,
responsive: true,
scales:
{
xAxes:
[
{
//stacked: true,
display: true,
ticks:
{
beginAtZero: false,
},
scaleLabel:
{
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time:
{
unit: 'day',
unitStepSize: 1,
displayFormats:
{
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}
],
yAxes:
[
{
ticks:
{
beginAtZero: true,
},
display: true,
//stacked: true,
scaleLabel:
{
display: true,
labelString: "Items",
}
}
]
},
tooltips:
{
mode: 'x',
},
}
}
const chart2 = new Chart(document.getElementById("chart2").getContext("2d"), lineOptions2);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<canvas id="chart" width="600" height="400"></canvas>
<canvas id="chart2" width="600" height="400"></canvas>
</body>
https://jsfiddle.net/tgfy6q82/42/

You have both xAxes and yAxes set to stacked:true.
Commenting out stacked:true on the yAxes will do the trick;
function newDate(days) {
return moment().add(days, 'd').toDate();
}
const lineData = {
labels: null,
datasets: [{
label: 'A',
fill: false,
backgroundColor: "hsl(50, 50%, 80%)",
data: [{
x: newDate(1),
y: 12
},
{
x: newDate(2),
y: 15
},
],
},
{
label: 'B',
fill: false,
backgroundColor: "hsl(250, 50%, 80%)",
data: [{
x: newDate(0),
y: 23
},
{
x: newDate(2),
y: 34
},
{
x: newDate(3),
y: 45
},
]
}
],
}
const lineOptions = {
type: 'bar',
data: lineData,
options: {
title: {
display: true,
text: 'STACKED TRUE'
},
legend: {
display: true,
},
hover: {
mode: 'nearest'
},
fill: false,
responsive: true,
scales: {
xAxes: [{
stacked: true,
display: true,
ticks: {
beginAtZero: false,
},
scaleLabel: {
display: true,
labelString: "Day",
},
barThickness: 15,
type: 'time',
distribution: 'linear',
bounds: 'ticks',
time: {
unit: 'day',
unitStepSize: 1,
displayFormats: {
'day': 'DD/MM',
},
tooltipFormat: 'DD/MM',
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
},
display: true,
// stacked: true,
scaleLabel: {
display: true,
labelString: "Items",
}
}]
},
tooltips: {
mode: 'x',
},
}
}
const chart = new Chart(document.getElementById("chart").getContext("2d"), lineOptions);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<body>
<canvas id="chart" width="600" height="400"></canvas>
</body>
Alternatively, since setting yAxes stacked:true should be intended, data can be updated such that there exists data for A and B, even if one of them is 0. https://jsfiddle.net/zqrp0w76/2/

Chart JS Error: Chart is not defined Firefox

I am new to Chart JS, I am currently using it in Angular JS version 1.5.3 and Chart JS I am using version 2.1.4 this is my code below
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'Player Count',
data: count,
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {titleFontSize:29, bodyFontSize:29},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
I am seeing my chart displayed in Chrome, but in Firefox I am getting this error
Error: Chart is not defined
I am not sure what is the reason, any feedback will help thanks

This is because, ChartJS library is not being loaded by the time you are creating the chart.
You should rather initialize your chart on window onload event, like so ...
var app = angular.module('app', []);
app.controller("myCtrl", function($scope) {
$scope.load = function() {
var myChart = new Chart(canvas, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar'],
datasets: [{
label: 'Player Count',
data: [1, 2, 3],
backgroundColor: "rgba(153,255,51,0.6)"
}]
},
options: {
tooltips: {
titleFontSize: 29,
bodyFontSize: 29
},
scales: {
xAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Date',
fontColor: '#000000'
}
}],
yAxes: [{
display: true,
gridLines: {
display: true
},
ticks: {
fontColor: '#000000'
},
scaleLabel: {
display: true,
labelString: 'Player Count',
fontColor: '#000000'
}
}]
}
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<div ng-app="app" ng-controller="myCtrl">
<canvas id="canvas" ng-init="load()"></canvas>
</div>

You have to provide the path to chart.js without / at the beginning.
<script src="libs/Chart.js/2.1.4/Chart.min.js"></script>

Categories

Resources