This was working when it was a line chart, but I am trying to convert it to a bar chart. The X-axis displays properly with all of the separate date spans and it changes when I select a dataset. However, none of the data is being displayed on the Y-axis. What is the issue?
var ctx = document.getElementById('activityChart');
var timeFormat = 'YYYY-MM-DD';
var StMarySchool = [{x: 1583422868000,y:1.5},{x: 1583510166000,y:1.5},{x: 1583516698000,y:0.75},{x: 1583516698000,y:0.75},{x: 1583568876000,y:3.75},{x: 1583575074000,y:0.75},{x: 1583581331000,y:1.875},{x: 1583585883000,y:1.875},{x: 1583664583000,y:0.375},{x: 1583664583000,y:0.375},{x: 1583693978000,y:1.875},{x: 1583749868000,y:0.75},{x: 1583756595000,y:0.75},{x: 1583789510000,y:0.75},{x: 1583837107000,y:1.125},{x: 1583852507000,y:0.75},{x: 1583852988000,y:0.75},{x: 1583872458000,y:1.875},{x: 1584121049000,y:1.5},{x: 1584172626000,y:3.75},{x: 1584445225000,y:0.75},{x: 1584533992000,y:3.75},{x: 1584538374000,y:1.125},{x: 1584538374000,y:1.125},{x: 1584565055000,y:1.125},{x: 1584783939000,y:1.875},{x: 1585034842000,y:1.875},{x: 1585073536000,y:1.875},{x: 1587468291000,y:0.75},{x: 1588780685000,y:1.875},{x: 1589222744000,y:0.75},{x: 1589560042000,y:1.125},{x: 1592056137000,y:1.875},{x: 1592144769000,y:0.75},{x: 1592299139000,y:0.75},{x: 1592816935000,y:0.75},{x: 1592900043000,y:0.75},{x: 1592909141000,y:7.5},{x: 1593162077000,y:1.125},{x: 1593961268000,y:1.875},{x: 1593961312000,y:1.875},{x: 1594487280000,y:1.875},{x: 1595336470000,y:0.75},{x: 1596191887000,y:0.75},{x: 1596785796000,y:3.75},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1596989721000,y:1.5},{x: 1597007626000,y:0.75},{x: 1597139159000,y:0.75},{x: 1597184422000,y:0.75},{x: 1597322300000,y:0.75},{x: 1597341478000,y:1.125},{x: 1597431163000,y:1.5},{x: 1597666257000,y:0.75},{x: 1597857382000,y:1.875},{x: 1598288284000,y:0.75},{x: 1598462641000,y:0.75}];var BagelUniversity = [{x: 1596095822000,y:0.75},{x: 1596966501000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597564562000,y:0.75},{x: 1597765250000,y:0.75},{x: 1598288284000,y:0.75}];var MerighisSavoyInn = [{x: 1597406165000,y:1.875},{x: 1597428169000,y:1.875},{x: 1597681599000,y:1.875}];
var config = {
type: 'bar',
data: {
datasets: [
{label:'Bagel University', data: BagelUniversity, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'Merighis Savoy Inn', data: MerighisSavoyInn, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']},{label:'St. Mary School', data: StMarySchool, fill: true, backgroundColor: ['rgba(239, 248, 251, .70)'],borderColor: ['rgb(42, 159, 216)']}
]
},
options: {
responsive: true,
title: {
display: false
},
scales: {
xAxes: [{
offset: true,
type: "time",
/*time: {
unit: 'month',
format: timeFormat,
tooltipFormat: 'll',
max:"05/03/2020" ,
min:"26/08/2020",
},*/
time: {
unit: 'day',
round: 'day',
displayFormats: {
day: 'MMM D'
}
},
scaleLabel: {
display: true,
labelString: 'Date'
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: '$'
},
ticks: {
beginAtZero: true
}
}]
},
}
};
var myChart = new Chart(ctx, config);
I found that every date has to be in the data, regardless if it contains a datapoint.
Related
I am collecting the data of temperature and relative humidity everyday. I wanted to display these data with Chart.js and currently it is possible to show all my data. But I wonder how to display specific time label in x-axis by Chart.js?
As you can see, the x-axis is too "crowded" with the time label. I searched Chart.js documentation and tried to add autoskip and autoskippadding but it failed to show the targeted time label.
xAxes: [{
ticks: {
autoSkip: true,
autoSkipPadding: 60
}
}]
Hence, as these data were collected every minute and the size of data is so huge, how can I to display specific time label in x-axis only (00:00, 01:00, 02:00... and so on) so that to prevent too "crowded"? Any suggestions are highly appreciated, thank you!
You can define the x-axis as a time cartesian axis as follows:
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
},
tooltipFormat: 'D MMM YYYY - HH:mm:ss'
}
}
}
Please take a look at your amended code below and see how it works. This code now uses the chartjs-adapter-moment together with moment. Feel free to use a different adapter.
$(function() {
getXlsxData();
});
function getXlsxData() {
var xlsxUrl =
"https://script.google.com/macros/s/AKfycbw9PQRojIml3x5gnMMiKihnTh9aLODd86ankhoz0ETIu0a8tcVh1ZIc4R08hlw8nHF8pA/exec?id=1Bvzqyu_NvPdL-zsOShbKF5me2bjtVVWQCK9MDA2KW58&sheet=Today"
var xlsxData = $.getJSON(xlsxUrl, function(data) {
$.each(data.Today, function(i, el) {
labels.push(el.Time);
TodayTemperature.push(el.CurrentTemp);
TodayRH.push(el.CurrentRH);
});
load_chart();
});
}
var labels = [],
TodayTemperature = [],
TodayRH = []
function load_chart() {
var myChart = new Chart('alldata', {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Temperature（°C）',
fill: false,
data: TodayTemperature,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132, 0.8)',
borderWidth: 1,
radius: 0,
}, {
label: 'Relative Humidity （%）',
fill: false,
data: TodayRH,
backgroundColor: 'rgb(255, 159, 64)',
borderColor: 'rgb(255, 159, 64, 0.8)',
hidden: true,
borderWidth: 1,
radius: 0,
}, ]
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
position: 'bottom',
},
layout: {
padding: {
top: 35,
right: 15,
}
},
scales: {
x: {
type: 'time',
time: {
parser: 'HH:mm:ss',
unit: 'hour',
displayFormats: {
hour: 'HH:mm'
},
tooltipFormat: 'D MMM YYYY - HH:mm:ss'
}
}
}
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment#1.0.0"></script>
<canvas id="alldata" height="200"></canvas>
I've been trying to implement area chart which has different datasets and we are following the configuration of timeseries chart by providing the options a min & max value to generate labels automatically. Here is my code :
var feronisData = [398, 445];
var formattedDates = ["Feb 01", "Mar 20"];
var colors = ['#5ba2df', '#e2ac00', '#59b110'];
var data = {
/* labels: formattedDates, */
datasets: [{
type: 'line',
fill: 1,
spanGaps: true,
pointStyle: 'circle',
label: 'Feronis',
data: [{x: moment('2021-02-10 00:00:00.000').format('MMM DD'), y: 250}, {x: moment('2021-02-28 00:00:00.000').format('MMM DD'), y: 350}],
borderColor: '#5ba2df',
labels: [],
borderWidth: 3,
backgroundColor: 'rgba(0, 0, 0,0)',
}, {
type: 'line',
fill: true,
borderColor: '#2187f3',
backgroundColor: '#219634',
borderWidth: 1,
spanGaps: false,
pointStyle: 'circle',
label: 'Others',
data: [{x: moment('2021-01-24 00:00:00.000').format('MMM DD'), y: 150},{x: moment('2021-02-04 00:00:00.000').format('MMM DD'), y: 300}, {x: moment('2021-03-24 00:00:00.000').format('MMM DD'), y: 450}],
borderColor: '#e2ac00',
labels:[],
borderWidth: 3,
backgroundColor: 'rgba(0, 0, 0,0)',
}]
};
var options = {
showLines: true,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 80
}
},
elements: {
point: {
radius: 1,
hoverRadius: 5,
}
},
hover: {
mode: 'index',
intersect: false
},
responsive: true,
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
yAlign: 'right',
},
scales: {
x : {
type: 'time',
min: 'Jan 01',
max: 'Jul 01',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD'
}
}
/* xAxes: [{
type: 'time',
time: {
unit: 'day',
unitStepSize: 10,
format: 'MMM DD',
displayFormats: {
'day': 'dddd',
'week': 'MMM DD',
'month': 'MMM DD'
},
min: 'JAN 01',
max: 'JUL 01'
},
display: true,
interval: 5,
intervalType: "month",
gridLines: {
drawOnChartArea: false,
}
}], */
},
y: {
stacked: true,
}
}}
this.chart = new Chart('canvas', {
responsive: true,
data: data,
options: options
});
The same is available on fiddle here : https://jsfiddle.net/erdfs37h/
Configuaration is Backend is not going to provide me any set of labels as labels array shown in each dataset. Instead we are depending directly on the data array which provides values in this format [{x: 'xItem', y: 'someValueToPlot'}]
Note : actually I'm going to render this with React.js where my common component generates chart based on these configuration, but it is almost similar to what I've shown on fiddle link.
Since we are also using the timeseries configuration, can you point out any specific thing that I'm missing here?
Currently, I think the solution can be achieved by adding these key-fields for each dataset
type: 'line',
fill: {
target: 'origin',
above: 'rgb(123, 43, 54)', // Area will be reddish above the origin
below: 'rgb(65, 47, 231)' // And blue below the origin
},
Your issue is that you provided duplicate keys for the backgroundColor and in your duplicate you set it to a fully transparent color so thats why its not showing also the labels array in your dataset config is redundent since you are using object notation
Example:
var feronisData = [398, 445];
var formattedDates = ["Feb 01", "Mar 20"];
var colors = ['#5ba2df', '#e2ac00', '#59b110'];
var data = {
/* labels: formattedDates, */
datasets: [{
type: 'line',
fill: 1,
spanGaps: true,
pointStyle: 'circle',
label: 'Feronis',
data: [{
x: moment('2021-02-10 00:00:00.000').format('MMM DD'),
y: 250
}, {
x: moment('2021-02-28 00:00:00.000').format('MMM DD'),
y: 350
}],
borderColor: '#5ba2df',
borderWidth: 3,
}, {
type: 'line',
fill: true,
borderColor: '#2187f3',
backgroundColor: '#219634',
borderWidth: 1,
spanGaps: false,
pointStyle: 'circle',
label: 'Others',
data: [{
x: moment('2021-01-24 00:00:00.000').format('MMM DD'),
y: 150
}, {
x: moment('2021-02-04 00:00:00.000').format('MMM DD'),
y: 300
}, {
x: moment('2021-03-24 00:00:00.000').format('MMM DD'),
y: 450
}],
}]
};
var options = {
showLines: true,
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 80
}
},
elements: {
point: {
radius: 1,
hoverRadius: 5,
}
},
hover: {
mode: 'index',
intersect: false
},
responsive: true,
plugins: {
tooltip: {
enabled: true,
mode: 'index',
intersect: false,
yAlign: 'right',
},
},
scales: {
x: {
type: 'time',
min: 'Jan 01',
max: 'Jul 01',
time: {
unit: 'day',
displayFormats: {
day: 'MMM DD'
}
}
},
y: {
stacked: true,
}
}
}
this.chart = new Chart('canvas', {
responsive: true,
data: data,
options: options
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.27.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>
<canvas style="height: 400px;" id='canvas' />
You might also want to check the migration guide out since as I can see fast your tooltip is also wrongly configured:https://www.chartjs.org/docs/master/getting-started/v3-migration.html
I am converting Jqplot chart to ChartJs and I want them both to look the same.
I have the following chart using the chart.js library.
var myChart = new Chart(ctxr, {
type: 'line',
data: {
datasets: [{
label: "Estimated cost",
data: [{
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 8
}, {
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 8
}],
borderColor: [
'rgba(196, 217, 45, 1)',
]
},
{
label: "Actual cost",
data: [{
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 23
}, {
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 24
}],
borderColor: [
'rgba(75, 178, 197, 1)',
]
}],
labels: [new Date("09/24/2020 10:26:20").toLocaleString(), new Date("09/24/2020 10:27:56").toLocaleString()]
},
options: {
responsive: true,
responsiveAnimationDuration: 1,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Auction Overview'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
ticks: {
// Include a GBP in the ticks
callback: function (value, index, values) {
return 'GBP' + value;
}
}
}],
xAxes: [{
type: 'time',
}]
}
}
});
that gives me this chart
I would like to make it have intervals of time between the start date and the end date(like the x axis on the Jqplot chart) and also add string "GBP" in front of each y-value (like y-axis of Jqplot chart).
Both graphs are generated with the same identical data. so they should look the same.
So far everything i have tried from the chart.js docs has failed.
Below is a snipped of my js console:
There is something else wrong with your implementation that you have not told us about, because copy and pasting your code results in a working chart with GBP labels and time span. See below.
Please check your console for errors and also make sure that you are including moment.js, a dependency of Chart.js when work with dates.
I've also set options.yAxes[0].ticks.beginAtZero to true to more closely match the example you gave.
var ctxr = document.getElementById('chart').getContext('2d');
var myChart = new Chart(ctxr, {
type: 'line',
data: {
datasets: [{
label: "Estimated cost",
data: [{
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 8
}, {
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 8
}],
borderColor: [
'rgba(196, 217, 45, 1)',
]
},
{
label: "Actual cost",
data: [{
x: new Date("09/24/2020 10:27:56"),
//x: new Date(),
y: 23
}, {
x: new Date("09/24/2020 10:26:20"),
//x: new Date(),
y: 24
}],
borderColor: [
'rgba(75, 178, 197, 1)',
]
}
],
labels: [new Date("09/24/2020 10:26:20").toLocaleString(), new Date("09/24/2020 10:27:56").toLocaleString()]
},
options: {
responsive: true,
responsiveAnimationDuration: 1,
maintainAspectRatio: false,
aspectRatio: 1,
title: {
display: true,
text: 'Auction Overview'
},
tooltips: {
mode: 'index',
intersect: true
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true,
// Include a GBP in the ticks
callback: function(value, index, values) {
return 'GBP' + value;
}
}
}],
xAxes: [{
type: 'time',
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.9.3"></script>
<canvas id="chart"></canvas>
This is my code
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: [{{ $nDate }}],
datasets: [{
label: 'All Users',
data: [ {{ $nUser }} ],
backgroundColor: ['rgba(54, 162, 235, 0.2)'],
borderColor: ['rgba(54, 162, 235, 1)'],
borderWidth: 3,
lineTension: 0,
labelFontSize : '16',
}]
},
options: {
tooltips: {
mode: 'index',
intersect: false,
position: 'nearest'
},
responsive: false,
legend: { display: false },
scales: {
yAxes: [{
ticks: {
beginAtZero:true,
type: 'category',
labelOffset: 10,
stepSize:250,
callback: function(value, index) {
if (value !== 0) return value;
}
},
gridLines:{
drawBorder:false
}
}],
xAxes: [{
gridLines: {
display: false,
},
}],
},
plugins:{
datalabels:{
display:false
}
}
}
});
My output
My Expected Output
How can I able to put/edit custom tooltip in my line chart? I just want to get the exact tooltips in the second picture but I don't have any idea how to fix it? Another thing is my $nDateI only want to show four dates like 8,15,22,29 But when I tried to create a new array label with value of this [" ", " "]; my chart crashed.
You can use custom callback function to render with your own choice html tags and colors, Follow the official documentation link for further guidance.
http://www.chartjs.org/docs/latest/configuration/tooltip.html#external-custom-tooltips
options: {
tooltips: {
enabled: false,
custom: function(tooltipModel) {}
}
}
Basically I have chartJS based line chart, with two lines. X axis has dates, and Y axes has price.
There is two lines (one for average price and one for minimum price).
So I was wondering, if it is at all possible to so that lets say I hover over a point for minimum price, the average price point's label pops up as well, and vice versa.
Or if that is not possible, maybe it is possible to make it so each label contains both values (the min and average price for that particular day).
Here is the code, I have so far:
var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: <?= json_encode($priceChangeData['labels']); ?>,
datasets: [
{
label: 'Minimali kaina',
backgroundColor: 'rgb(64, 127, 178)',
borderColor: 'rgb(64, 127, 178)',
borderWidth: 1,
data: <?= json_encode($priceChangeData['line']['price_min']); ?>,
fill: false
},
{
label: 'Vidutinė kaina',
backgroundColor: '#686868',
borderColor: '#686868',
borderWidth: 1,
data: <?= json_encode($priceChangeData['line']['price_avg']); ?>,
fill: false
}
],
},
options: {
responsive: true,
layout: {
padding: {
left: 20,
right: 15
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Data'
}
}],
yAxes: [{
display: true,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Kaina'
}
}]
}
}
});
I am assuming you are talking about the tooltip's label. In that case, you can set tooltips mode to index in your chart's options config, like so :
options: {
tooltips: {
mode: 'index'
},
...
ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩
var ctx = document.getElementById('price-history').getContext('2d');
ctx.height = 150;
var chart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], //<?= json_encode($priceChangeData['labels']); ?>,
datasets: [{
label: 'Minimali kaina',
backgroundColor: 'rgb(64, 127, 178)',
borderColor: 'rgb(64, 127, 178)',
borderWidth: 1,
data: [3, 1, 4, 2, 5], //<?= json_encode($priceChangeData['line']['price_min']); ?>,
fill: false
}, {
label: 'Vidutinė kaina',
backgroundColor: '#686868',
borderColor: '#686868',
borderWidth: 1,
data: [2, 4, 1, 5, 3], //<?= json_encode($priceChangeData['line']['price_avg']); ?>,
fill: false
}],
},
options: {
responsive: true,
tooltips: {
mode: 'index'
},
layout: {
padding: {
left: 20,
right: 15
}
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: false,
labelString: 'Data'
}
}],
yAxes: [{
display: true,
stacked: false,
scaleLabel: {
display: false,
labelString: 'Kaina'
}
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<canvas id="price-history"></canvas>