We Keep Coding

Date label in JavaScript chart doesn't display properly

I'm doing a Django project. In my chart.html file, I created a javascript bar chart. The data and the label of the chart have been defined in my views.py file.
This is my JavaScript bar chart: (I'm drawing this chart to display the order numbers in the most recent 7 days)
var ctx = document.getElementById("BarChart7d");
var BarChart7d = new Chart(ctx, {
type: 'bar',
data: {
labels: [{{date7}}, {{date6}}, {{date5}}, {{date4}}, {{date3}}, {{date2}}, {{date1}}],
datasets: [{
label: "orders: ",
backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', "#e74a3b", "#f6c23e", "#9B59B6", "#D68910"],
hoverBackgroundColor: ['#353F8C ', '#17a673', '#2c9faf', "#9C4545", "#9C8545", "#4A235A", "#784212"],
borderColor: "#4e73df",
data: {{value7day}},
}],
},
options: {
maintainAspectRatio: false,
layout: {
padding: {
left: 10,
right: 25,
top: 25,
bottom: 0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: false
},
ticks: {
maxTicksLimit: 6
},
maxBarThickness: 80,
}],
yAxes: [{
ticks: {
callback: function(value, index, values) {
return number_format(value);
}
},
gridLines: {
color: "rgb(234, 236, 244)",
zeroLineColor: "rgb(234, 236, 244)",
drawBorder: false,
borderDash: [2],
zeroLineBorderDash: [2]
}
}],
},
legend: {
display: false
},
tooltips: {
titleMarginBottom: 10,
titleFontColor: '#6e707e',
titleFontSize: 14,
backgroundColor: "rgb(255,255,255)",
bodyFontColor: "#858796",
borderColor: '#dddfeb',
borderWidth: 1,
xPadding: 15,
yPadding: 15,
displayColors: false,
caretPadding: 10,
callbacks: {
label: function(tooltipItem, chart) {
var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
return datasetLabel + number_format(tooltipItem.yLabel);
}
}
},
}
});
The {{value7day}} and the labels {{date7}} to {{date1}} have been defined in views.py:
rnow = {'date': '2022-01-15', 'value': 34},
...
{'date': '2022-03-16', 'value': 26},
{'date': '2022-03-17', 'value': 15},
{'date': '2022-03-18', 'value': 13},
{'date': '2022-03-21', 'value': 29},
{'date': '2022-03-22', 'value': 22},
{'date': '2022-03-23', 'value': 22},
{'date': '2022-03-24', 'value': 25},
{'date': '2022-03-25', 'value': 15}]
day1 = list(rnow)[-1]
day2 = list(rnow)[-2]
day3 = list(rnow)[-3]
day4 = list(rnow)[-4]
day5 = list(rnow)[-5]
day6 = list(rnow)[-6]
day7 = list(rnow)[-7]
value7day = [ day7['value'], day6['value'], day5['value'] , day4['value'], day3['value'], day2['value'], day1['value']]
date7 = day7['date']
date6 = day6['date']
date5 = day5['date']
date4 = day4['date']
date3 = day3['date']
date2 = day2['date']
date1 = day1['date']
The date data is already string type. However, the labels are not shown properly. Instead of being displayed as 2022-03-17, 2022-03-18, 2022-03-21 they are displayed as 2002, 2001, 1998 ?? I think I should change the format of the label to date. How should I do that?

I imagine your javascript ends up looking like
data: {
labels: [2022-03-16, 2022-03-17, ...]
The labels are treated as numbers, and some subtraction is done, so you end up with values like 1998, etc.
Those values should be strings:
labels: ["2022-03-16", "2022-03-17", ...]
in other words
labels: ["{{date7}}", "{{date6}}", ...]

Interval columns add padding left/right to google line chart

I have an annoying problem. I'm creating a google line chart with an area-interval. As soon as I give the interval-columns the role: 'interval' the chart creates some sort of left and right boundary inside my linechart. How can I get rid of this?
This is my chart-code:
chartType: 'LineChart',
dataTable: {
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', p: {role: 'interval'}},
{id: 'i1', type: 'number', p: {role: 'interval'}}
],
rows: []
},
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindowMode: 'maximized'
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: blauw1,
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: blauw5},
fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
colors: [blauw1],
areaOpacity: 0.0,
}
};```
This is how my chart look's like when the 2 interval-columns don't have the ```role: 'interval'``` added:
[without role: interval][1]
This is how my chart look's like when the 2 interval-columns have the ```role: 'interval'``` added:
[with role: interval][2]
[1]: https://i.stack.imgur.com/zpT3D.png
[2]: https://i.stack.imgur.com/0x3XG.png

instead of using option --> hAxis.viewWindowMode: 'maximized'
use a distinct view window using the min and max dates from the data...
hAxis.viewWindow: data.getColumnRange(0)
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{type: 'date', label: 'datum'},
{type: 'number', label: 'activatie'},
{id: 'i0', type: 'number', role: 'interval'},
{id: 'i1', type: 'number', role: 'interval'}
],
rows: [
{c:[{v: new Date(2020, 0, 27)}, {v: 10}, {v: 8}, {v: 12}]},
{c:[{v: new Date(2020, 0, 29)}, {v: 12}, {v: 10}, {v: 14}]},
{c:[{v: new Date(2020, 0, 31)}, {v: 14}, {v: 12}, {v: 16}]},
{c:[{v: new Date(2020, 1, 2)}, {v: 10}, {v: 8}, {v: 12}]}
]
});
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart',
dataTable: data,
options: {
height: 70,
hAxis: {
gridlines: {
color: 'none'
},
format: 'd MMM',
ticks: [],
viewWindow: data.getColumnRange(0)
},
vAxis: {
minValue: 0,
gridlines: {
color: 'none'
},
baseline: { color: 'none' },
textPosition: 'none'
},
chartArea: {
width: '100%',
height: 50,
bottom: 20,
left: 0,
right: 0,
backgroundColor: {
fill: 'cyan',
fillOpacity: 0.05,
}
},
backgroundColor: { fill: 'none' },
legend: 'none',
intervals: {style: 'area', color: 'blue'},
//fontName: FONT_FAMILY,
tooltip: { trigger: 'none' },
pointsVisible: false,
//colors: [blauw1],
areaOpacity: 0.0,
}
});
chart.draw();
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Highcharts drilldown doesn't work for 3+ levels

I want to have highchart drilldown with more than 3 levels.
Also, I have tried referring below articles, but I was not able to figure out.
Drilldown multiple levels Highchart
Highcharts - drill down to multiple series
I could do only till 3 levels. After that, bar is not clickable.
Not sure where the mistake is, but this is what I have done so far.
2 Level Drill down - Works fine
Multilevel - Works only till Month level, cannot filter Day level
https://jsfiddle.net/foodiepanda/2ec7d6fz/9/
Below is code (only jquery)
/*Start*/
$('#chart1').highcharts({
chart: {type: 'column'},
title: {text: 'Multi Drilldown'},
xAxis: {type: 'category'},
legend: {enabled: false},
plotOptions:
{
series:
{
dataLabels:
{
enabled: true, //Shown at top of column
}
}
},
series:
[
{
name: 'Year',
//colorByPoint: false,
data:
[
{name: '2019',y: 200,drilldown: '2019'}, //200 clicks in 2018
{name: '2020',y: 450,drilldown: '2020'}, //450 clicks in 2019
]
}
],
drilldown:
{
series:
[
{
id: '2019', //For 2019
name: 'Quarter', //Splitting 200 as 50,100,20,30
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 20,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 30,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,30,20
data:
[
{
name: 'Jan',
y: 10,
drilldown: 'Jan'
},
{
name: 'Feb',
y: 30,
drilldown: 'Feb'
},
{
name: 'Mar',
y: 20,
drilldown: 'Mar'
}
]
},
{
id: 'Jan',
name: 'Day', //Splitting 10 as ...[days]
data:
[
{name:'1', y: 0},
{name:'2', y: 0},
{name:'3', y: 2},
{name:'4', y: 0},
{name:'5', y: 0},
{name:'6', y: 0},
{name:'7', y: 0},
{name:'8', y: 0},
{name:'9', y: 0},
{name:'10', y: 0},
{name:'11', y: 1},
{name:'12', y: 2},
{name:'13', y: 0},
{name:'14', y: 1},
{name:'15', y: 0},
{name:'16', y: 0},
{name:'17', y: 0},
{name:'18', y: 0},
{name:'19', y: 0},
{name:'20', y: 0},
{name:'21', y: 0},
{name:'22', y: 0},
{name:'23', y: 0},
{name:'24', y: 0},
{name:'25', y: 2},
{name:'26', y: 0},
{name:'27', y: 0},
{name:'28', y: 0},
{name:'29', y: 0},
{name:'30', y: 1},
{name:'31', y: 1}
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 80,10,10
data:
[
['Apr', 80],
['May', 10],
['Jun', 10]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 20 as 5,10,5
data:
[
['Jul', 5],
['Aug', 10],
['Sep', 5]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 30 as 5,15,10
data:
[
['Oct', 5],
['Nov', 15],
['Dec', 10]
]
},
//For 2020
{
id: '2020',
name: 'Quarter', //Splitting 450 as 50,100,50,250
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 50,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 250,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,35,5
data:
[
['Jan', 10],
['Feb', 35],
['Mar', 5]
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 40,35,25
data:
[
['Apr', 40],
['May', 35],
['Jun', 25]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 50 as 5,25,20
data:
[
['Jul', 5],
['Aug', 25],
['Sep', 20]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 250 as 75,125,50
data:
[
['Oct', 75],
['Nov', 125],
['Dec', 50]
]
},
] //End Series
} //End Year Drilldown
}); //End Highchart function
//Explicitly change Y axis
var curChart = $('#chart1').highcharts();
curChart.yAxis[0].update({
title:{
text:"Number of Hits"
}
});
/*End*/

I was able to figure out what the issue was.
The name parameter and drilldown parameter were having same values.
I just renamed name parameter from 'Q1' to '_Q1' and it worked like a charm.
{
name: 'Q1',
y: 50,
drilldown: '_Q1'
}
Updated JSFiddle :
https://jsfiddle.net/foodiepanda/2ec7d6fz/11/

How to hide/remove slider ticks/steps and their labels in plotly.js?

Is it possible to remove or hide the animation slider's step ticks and labels? I would like to remove the slider step markers (ticks) and their labels: 'Red', 'Green' and 'Blue' from underneath the slider.
However still keeping the current frame/step label displayed. (Above slider on right side)
Preferably would like to be able to do it with plotly's layout configuration but if it's possible to hide via CSS rules I'm all ears.
The example below is taken directly from their sample page here: https://codepen.io/plotly/pen/NbKmmQ
Plotly.plot('graph', {
data: [{
x: [1, 2, 3],
y: [2, 1, 3],
line: {
color: 'red',
simplify: false,
}
}],
layout: {
sliders: [{
pad: {t: 30},
x: 0.05,
len: 0.95,
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
transition: {duration: 500},
// By default, animate commands are bound to the most recently animated frame:
steps: [{
label: 'red',
method: 'animate',
args: [['red'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}, {
label: 'green',
method: 'animate',
args: [['green'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}, {
label: 'blue',
method: 'animate',
args: [['blue'], {
mode: 'immediate',
frame: {redraw: false, duration: 500},
transition: {duration: 500}
}]
}]
}],
updatemenus: [{
type: 'buttons',
showactive: false,
x: 0.05,
y: 0,
xanchor: 'right',
yanchor: 'top',
direction: 'left',
pad: {t: 60, r: 20},
buttons: [{
label: 'Play',
method: 'animate',
args: [null, {
fromcurrent: true,
frame: {redraw: false, duration: 1000},
transition: {duration: 500}
}]
}, {
label: 'Pause',
method: 'animate',
args: [[null], {
mode: 'immediate',
frame: {redraw: false, duration: 0}
}]
}]
}]
},
// The slider itself does not contain any notion of timing, so animating a slider
// must be accomplished through a sequence of frames. Here we'll change the color
// and the data of a single trace:
frames: [{
name: 'red',
data: [{
y: [2, 1, 3],
'line.color': 'red'
}]
}, {
name: 'green',
data: [{
y: [3, 2, 1],
'line.color': 'green'}]
}, {
name: 'blue',
data: [{
y: [1, 3, 2],
'line.color': 'blue'}]
}]
});
html, body {
margin: 0;
padding: 0;
}
#graph {
vertical-align: top;
}
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>

Currently there is no property in the official docs, So please consider this alternate, where we set the tickcolor and font.color of the slider label and tick as white, which is same as the background.
The properties that do this, are shown below.
tickcolor: 'white',
font: {
color: 'white'
}
Plotly.plot('graph', {
data: [{
x: [1, 2, 3],
y: [2, 1, 3],
line: {
color: 'red',
simplify: false,
}
}],
layout: {
sliders: [{
pad: {
t: 30
},
x: 0.05,
len: 0.95,
currentvalue: {
xanchor: 'right',
prefix: 'color: ',
font: {
color: '#888',
size: 20
}
},
transition: {
duration: 500
},
tickcolor: 'white',
font: {
color: 'white'
},
// By default, animate commands are bound to the most recently animated frame:
steps: [{
label: 'red',
method: 'animate',
args: [
['red'], {
mode: 'immediate',
frame: {
redraw: false,
duration: 500
},
transition: {
duration: 500
}
}
]
}, {
label: 'green',
method: 'animate',
args: [
['green'], {
mode: 'immediate',
frame: {
redraw: false,
duration: 500
},
transition: {
duration: 500
}
}
]
}, {
label: 'blue',
method: 'animate',
args: [
['blue'], {
mode: 'immediate',
frame: {
redraw: false,
duration: 500
},
transition: {
duration: 500
}
}
]
}]
}],
updatemenus: [{
type: 'buttons',
showactive: false,
x: 0.05,
y: 0,
xanchor: 'right',
yanchor: 'top',
direction: 'left',
pad: {
t: 60,
r: 20
},
buttons: [{
label: 'Play',
method: 'animate',
args: [null, {
fromcurrent: true,
frame: {
redraw: false,
duration: 1000
},
transition: {
duration: 500
}
}]
}, {
label: 'Pause',
method: 'animate',
args: [
[null], {
mode: 'immediate',
frame: {
redraw: false,
duration: 0
}
}
]
}]
}]
},
// The slider itself does not contain any notion of timing, so animating a slider
// must be accomplished through a sequence of frames. Here we'll change the color
// and the data of a single trace:
frames: [{
name: 'red',
data: [{
y: [2, 1, 3],
'line.color': 'red'
}]
}, {
name: 'green',
data: [{
y: [3, 2, 1],
'line.color': 'green'
}]
}, {
name: 'blue',
data: [{
y: [1, 3, 2],
'line.color': 'blue'
}]
}]
});
html,
body {
margin: 0;
padding: 0;
}
#graph {
vertical-align: top;
}
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="graph"></div>
</body>

How to use two Y axes in Chart.js v2?

I am trying to create a line chart with two datasets, each with its own Y scale / axis (one to the left, one to the right of the graph) using Chart.js.
This is my code (jsfiddle):
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: [ '1', '2', '3', '4', '5' ],
datasets: [
{
label: 'A',
yAxesGroup: 'A',
data: [ 100, 96, 84, 76, 69 ]
},
{
label: 'B',
yAxesGroup: 'B',
data: [ 1, 1, 1, 1, 0 ]
}
]
},
options: {
yAxes: [
{
name: 'A',
type: 'linear',
position: 'left',
scalePositionLeft: true
},
{
name: 'B',
type: 'linear',
position: 'right',
scalePositionLeft: false,
min: 0,
max: 1
}
]
}
});
However, the second axis is not visible and the second dataset is still scaled exactly as the first (0 to 100 instead of 0 to 1). What do I need to change?

For ChartJs 2.x only a couple changes need to be made (it looks like you have tried to combine 2.x options with the multi-axes options from my fork?),
The yAxes field needs to be in a scales object
the yAxis is referenced by id not name.
For the scale steps/size you just need to wrap these options in a ticks object.
No need forscalePositionLeft this is covered by position
Example:
var canvas = document.getElementById('chart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69]
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0]
}]
},
options: {
scales: {
yAxes: [{
id: 'A',
type: 'linear',
position: 'left',
}, {
id: 'B',
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}]
}
}
});
fiddle example

The accepted answer no longer works as of 3.5, and the cause is listed as part of the breaking changes for 3.X (See 3.x Migration Guide)
The updated code below changes the scales property, from scales: {yScales: [...]} to scales: {[id]: {[options]}} , and also adds fill: true, (Was changed at 3.X from defaulting to true) and tension: 0.4 (The example provided before does have smooth curves, and seems like it was an undocumented "breaking" change)
var canvas = document.getElementById('myChart');
new Chart(canvas, {
type: 'line',
data: {
labels: ['1', '2', '3', '4', '5'],
datasets: [{
label: 'A',
yAxisID: 'A',
data: [100, 96, 84, 76, 69],
fill: true,
tension: 0.4
}, {
label: 'B',
yAxisID: 'B',
data: [1, 1, 1, 1, 0],
fill: true,
tension: 0.4
}]
},
options: {
scales: {
A: {
type: 'linear',
position: 'left',
},
B: {
type: 'linear',
position: 'right',
ticks: {
max: 1,
min: 0
}
}
}
}
});

This solution is working in react.
// "chart.js": "^2.9.4"
// "react-chartjs-2": "^2.11.1"
const lineChartData = {
data: {
labels: ['1', '2', '3', '4', '5', '6'],
datasets: [
{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
fill: false,
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgba(255, 99, 132, 0.2)',
},
{
label: '# of Votes',
data: [19, 9, 2, 1, 1, 21],
fill: false,
backgroundColor: 'rgb(122, 99, 255)',
borderColor: 'rgba(102, 99, 255, 0.2)',
}
],
},
options: {
scales: {
yAxes: [
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
{
type: 'linear',
display: true,
position: 'left',
ticks: {
beginAtZero: true,
},
},
],
},
}
}
<Line
data={lineChartData.data}
options={lineChartData.options}
height={30}
width={80}
options={{ maintainAspectRatio: true }}
/>