We Keep Coding

why tooltip appears wrong in my chart JS?

I have a chart that I have developed using Chart JS and it works good. The problem here is that when I hover on a point, the x axes of that point appears wrong! So for example in the image below, I am hovering on that orange point which have '23000' x axes point. but it appears '18428.91'! it has right values only with the first purple line on the bottom. I think the problem with the tooltip option but I do understand what’s the problem
html
<div class="card-body">
<canvas id="lineChart_1"></canvas>
</div>
JS
<script type="text/javascript">
(function($) {
/* "use strict" */
/* function draw() {
} */
var dzSparkLine = function(){
let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var lineChart1 = function(){
if(jQuery('#lineChart_1').length > 0 ){
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
datasets: [
{ label: '5390',
data: [ {x: 10000 , y: 58.81 },
{x: 11000 , y: 57.34 },
{x: 12000 , y: 55.99 },
{x: 13000 , y: 54.21 },
{x: 14000 , y: 52.09 },
{x: 15000 , y: 49.32 },
{x: 16000 , y: 45.53 },
{x: 17000 , y: 41.87 },
{x: 18000 , y: 36.87 },
{x: 18428.91 , y: 34.15 },
],
borderColor: '#FF00FF',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#FF00FF'}, { label: '6160',
data: [ {x: 12000 , y: 76.66 },
{x: 13000 , y: 75.7 },
{x: 14000 , y: 74.15 },
{x: 15000 , y: 72.38 },
{x: 16000 , y: 70.14 },
{x: 17000 , y: 68.08 },
{x: 18000 , y: 64.76 },
{x: 19000 , y: 60.64 },
{x: 20000 , y: 55.75 },
{x: 21000 , y: 49.57 },
{x: 22000 , y: 42.18 },
],
borderColor: '#4472C4',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#4472C4'}, { label: '6930',
data: [ {x: 14000 , y: 97.17 },
{x: 15000 , y: 96.06 },
{x: 16000 , y: 94.58 },
{x: 17000 , y: 93.3 },
{x: 18000 , y: 91.41 },
{x: 19000 , y: 89.35 },
{x: 20000 , y: 86.44 },
{x: 21000 , y: 82.95 },
{x: 22000 , y: 79.01 },
{x: 23000 , y: 73.08 },
{x: 24000 , y: 65.36 },
{x: 25000 , y: 55.55 },
{x: 25357.89 , y: 50.67 },
],
borderColor: '#ED7D31',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#ED7D31'}, { label: '7700',
data: [ {x: 16000 , y: 119.81 },
{x: 17000 , y: 119.22 },
{x: 18000 , y: 117.988 },
{x: 19000 , y: 116.55 },
{x: 20000 , y: 115.05 },
{x: 21000 , y: 113.003 },
{x: 22000 , y: 110.186 },
{x: 23000 , y: 108.44 },
{x: 24000 , y: 104.15 },
{x: 25000 , y: 99.4 },
{x: 26000 , y: 93.33 },
{x: 27000 , y: 84.8 },
{x: 28000 , y: 68.7 },
{x: 28264.22 , y: 60.7 },
],
borderColor: '#A5A5A5',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#A5A5A5'}, { label: '8085',
data: [ {x: 19000 , y: 130.56 },
{x: 20000 , y: 129.3 },
{x: 21000 , y: 127.6 },
{x: 22000 , y: 126.08 },
{x: 23000 , y: 123.7 },
{x: 24000 , y: 121.088 },
{x: 25000 , y: 117.9 },
{x: 26000 , y: 113.6 },
{x: 27000 , y: 108.2 },
{x: 28000 , y: 99.17 },
{x: 29000 , y: 84.9 },
{x: 29555.19 , y: 66.15 },
],
borderColor: '#0070C0',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#0070C0'}, {
label: 'Efficiency',
data: [
{x: 17000, y: 100}
],
borderColor: 'black'
} ],
},
options: {
interaction: {
mode: 'y'
},scales: {
x: {
type: 'linear'
}
}
}
});
}
}
/* Function ============ */
return {
init:function(){
},
load:function(){
lineChart1();
},
resize:function(){
lineChart1();
}
}
}();
jQuery(document).ready(function(){
});
jQuery(window).on('load',function(){
dzSparkLine.load();
});
jQuery(window).on('resize',function(){
dzSparkLine.resize();
});
})(jQuery);
</script>
After Editing:

Line charts default to a linear Y axis and a category X axis. Specifying data.labels explicitly sets labels for the x-axis category ticks but these are just text, and won't match the computed scale.
As x and y values are passed both axes need to be linear:
Remove the data.labels array.
Add the following to options:
scales: {
x: {
type: 'linear'
}
}
Working example:
(function($) {
/* "use strict" */
/* function draw() {
} */
var dzSparkLine = function() {
//let draw = Chart.controllers.line.__super__.draw; //draw shadow
var screenWidth = $(window).width();
var lineChart1 = function() {
if (jQuery('#lineChart_1').length > 0) {
//basic line chart
const lineChart_1 = document.getElementById("lineChart_1").getContext('2d');
lineChart_1.height = 100;
new Chart(lineChart_1, {
type: 'line',
data: {
defaultFontFamily: 'Poppins',
/*labels: [10000, 11000, 12000, 13000, 14000, 15000, 16000, 17000, 18000, 18428.91, 19000, 20000, 21000, 22000, 23000, 24000, 25000, 25357.89, 26000, 27000, 28000, 28264.22, 29000, 29555.19],*/
datasets: [{
label: '5390',
data: [{
x: 10000,
y: 58.81
},
{
x: 11000,
y: 57.34
},
{
x: 12000,
y: 55.99
},
{
x: 13000,
y: 54.21
},
{
x: 14000,
y: 52.09
},
{
x: 15000,
y: 49.32
},
{
x: 16000,
y: 45.53
},
{
x: 17000,
y: 41.87
},
{
x: 18000,
y: 36.87
},
{
x: 18428.91,
y: 34.15
},
],
borderColor: '#FF00FF',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#FF00FF'
}, {
label: '6160',
data: [{
x: 12000,
y: 76.66
},
{
x: 13000,
y: 75.7
},
{
x: 14000,
y: 74.15
},
{
x: 15000,
y: 72.38
},
{
x: 16000,
y: 70.14
},
{
x: 17000,
y: 68.08
},
{
x: 18000,
y: 64.76
},
{
x: 19000,
y: 60.64
},
{
x: 20000,
y: 55.75
},
{
x: 21000,
y: 49.57
},
{
x: 22000,
y: 42.18
},
],
borderColor: '#4472C4',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#4472C4'
}, {
label: '6930',
data: [{
x: 14000,
y: 97.17
},
{
x: 15000,
y: 96.06
},
{
x: 16000,
y: 94.58
},
{
x: 17000,
y: 93.3
},
{
x: 18000,
y: 91.41
},
{
x: 19000,
y: 89.35
},
{
x: 20000,
y: 86.44
},
{
x: 21000,
y: 82.95
},
{
x: 22000,
y: 79.01
},
{
x: 23000,
y: 73.08
},
{
x: 24000,
y: 65.36
},
{
x: 25000,
y: 55.55
},
{
x: 25357.89,
y: 50.67
},
],
borderColor: '#ED7D31',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#ED7D31'
}, {
label: '7700',
data: [{
x: 16000,
y: 119.81
},
{
x: 17000,
y: 119.22
},
{
x: 18000,
y: 117.988
},
{
x: 19000,
y: 116.55
},
{
x: 20000,
y: 115.05
},
{
x: 21000,
y: 113.003
},
{
x: 22000,
y: 110.186
},
{
x: 23000,
y: 108.44
},
{
x: 24000,
y: 104.15
},
{
x: 25000,
y: 99.4
},
{
x: 26000,
y: 93.33
},
{
x: 27000,
y: 84.8
},
{
x: 28000,
y: 68.7
},
{
x: 28264.22,
y: 60.7
},
],
borderColor: '#A5A5A5',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#A5A5A5'
}, {
label: '8085',
data: [{
x: 19000,
y: 130.56
},
{
x: 20000,
y: 129.3
},
{
x: 21000,
y: 127.6
},
{
x: 22000,
y: 126.08
},
{
x: 23000,
y: 123.7
},
{
x: 24000,
y: 121.088
},
{
x: 25000,
y: 117.9
},
{
x: 26000,
y: 113.6
},
{
x: 27000,
y: 108.2
},
{
x: 28000,
y: 99.17
},
{
x: 29000,
y: 84.9
},
{
x: 29555.19,
y: 66.15
},
],
borderColor: '#0070C0',
borderWidth: "2",
backgroundColor: 'transparent',
pointBackgroundColor: '#0070C0'
}, {
label: 'Efficiency',
data: [
{
x: 17000,
y: 100
}
],
borderColor: 'black'
}],
},
options: {
interaction: {
//mode: 'y'
},
scales: {
x: {
type: 'linear'
}
}
}
});
}
}
/* Function ============ */
return {
init: function() {},
load: function() {
lineChart1();
},
resize: function() {
lineChart1();
}
}
}();
jQuery(document).ready(function() {});
jQuery(window).on('load', function() {
dzSparkLine.load();
});
jQuery(window).on('resize', function() {
dzSparkLine.resize();
});
})(jQuery);
<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.5.1/chart.min.js"></script>
<div class="card-body">
<canvas id="lineChart_1"></canvas>
</div>

Chart.js combined line and bar chart with differing data points

I want to use chart.js to plot the daily generation of my solar panels combined with the month total in one chart, much like in the image below. Both graphs alone are easy to produce, but all examples I find for a combined chart have the same amount of datapoints for both charts. I have 12 for the bar chart and 365 or 366 for the line chart.
Is it possible to make this?

Using timeseries as x-Axis, applying additional trick:
Try following:
set x-axis type to timeseries:
for each x-Axis scales: {'daily-x-axis': { type: 'timeseries' ...
for x-Axis type 'time' or 'timeseries' to work, you need additional libraries (like moment.js and its adapter)
Trick: for monthly totals in your data, use first day of month as x value, like x: "2021-01-01" etc ...
style your bars and labels/ticks, adding backgroundColor: 'rgba(0,0,255,0.5)', x- and y-Axis label colors, color of ticks, etc ...
let dailyGeneration = [{x: '2021-01-01', y: 1},{x: '2021-01-02', y: 3},{x: '2021-01-03', y: 2},{x: '2021-01-04', y: 5},{x: '2021-01-05', y: 8},{x: '2021-01-06', y: 2},{x: '2021-01-07', y: 11},{x: '2021-01-08', y: 10},{x: '2021-01-09', y: 7},{x: '2021-01-10', y: 6},{x: '2021-01-11', y: 1.5},{x: '2021-01-12', y: 3},{x: '2021-01-13', y: 4},{x: '2021-01-14', y: 6},{x: '2021-01-15', y: 0.5},{x: '2021-01-16', y: 3},{x: '2021-01-17', y: 9},{x: '2021-01-18', y: 8},{x: '2021-01-19', y: 7},{x: '2021-01-20', y: 6},{x: '2021-01-21', y: 6},{x: '2021-01-22', y: 4},{x: '2021-01-23', y: 3},{x: '2021-01-24', y: 1},{x: '2021-01-25', y: 1},{x: '2021-01-26', y: 2},{x: '2021-01-27', y: 5},{x: '2021-01-28', y: 8},{x: '2021-01-29', y: 7},{x: '2021-01-30', y: 12},{x: '2021-01-31', y: 2},
{x: '2021-02-01', y: 1},{x: '2021-02-02', y: 3},{x: '2021-02-03', y: 2},{x: '2021-02-04', y: 5},{x: '2021-02-05', y: 8},{x: '2021-02-06', y: 2},{x: '2021-02-07', y: 11},{x: '2021-02-08', y: 10},{x: '2021-02-09', y: 7},{x: '2021-02-10', y: 6},{x: '2021-02-11', y: 1.5},{x: '2021-02-12', y: 3},{x: '2021-02-13', y: 4},{x: '2021-02-14', y: 6},{x: '2021-02-15', y: 0.5},{x: '2021-02-16', y: 3},{x: '2021-02-17', y: 9},{x: '2021-02-18', y: 8},{x: '2021-02-19', y: 7},{x: '2021-02-20', y: 6},{x: '2021-02-21', y: 6},{x: '2021-02-22', y: 4},{x: '2021-02-23', y: 3},{x: '2021-02-24', y: 1},{x: '2021-02-25', y: 1},{x: '2021-02-26', y: 2},{x: '2021-02-27', y: 5},{x: '2021-02-28', y: 8}];
let montlyTotals = [{x: '2021-01-01', y: 98},{x: '2021-02-01', y: 120}];
let yourData = {
datasets: [{
type: 'line',
label: 'Daily Generation',
data: dailyGeneration,
borderColor: 'rgba(0,0,255,1)',
xAxisID: 'daily-x-axis',
yAxisID: 'daily-y-axis',
},
{
type: 'bar',
label: 'Monthly Totals',
data: montlyTotals,
borderColor: 'rgba(0,255,0,0.5)',
backgroundColor: 'rgba(0,255,0,0.5)',
xAxisID: 'monthly-x-axis',
yAxisID: 'monthly-y-axis',
}]
};
let yourOptions = {
scales: {
// x-Axis by their IDs
'daily-x-axis': { // <-- v3.x now object "{", not array "[{" anymore
type: 'timeseries', // <-- try "time" and "timeseries" to see difference
time: {
unit: 'day', // <-- set to 'day'
displayFormats: {
day: 'MMM DD, YYYY',
month: 'MMM'
},
tooltipFormat: 'dddd, MMM DD, YYYY'
},
ticks: {
minRotation: 80, // avoiding overlapping of x-Axis ticks
maxRotation: 90,
color: "blue"
},
position: 'bottom'
},
'monthly-x-axis': {
type: 'timeseries', // <-- try "time" and "timeseries" to see difference
time: {
unit: 'month', // <-- set to 'month'
displayFormats: {
day: 'MMM DD, YYYY',
month: 'MMM'
},
tooltipFormat: 'MMM, YYYY'
},
ticks: {
color: "green"
},
position: 'bottom'
},
// y-Axis by their IDs
'daily-y-axis': {
position: 'left',
title: {
display: true,
text: 'kWh / day',
color: "blue"
},
ticks: {
color: "blue"
}
},
'monthly-y-axis': {
position: 'right',
title: {
display: true,
text: 'total kWh / month',
color: "green"
},
ticks: {
color: "green"
}
}
}
};
const ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, {
data: yourData,
options: yourOptions
});
<!-- get the latest version of Chart.js, now at v3.5.1 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- for x-Axis type 'time' or 'timeseries' to work, you need additional libraries -->
<!-- (like moment.js and its adapter) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

Yes, just use object notation:
var options = {
type: 'line',
data: {
datasets: [{
label: '# of Votes',
data: [{
x: new Date('09-08-2021 12:04'),
y: 10
}, {
x: new Date('09-08-2021 12:08'),
y: 15
}, {
x: new Date('09-08-2021 12:12'),
y: 5
}, {
x: new Date('09-08-2021 12:30'),
y: 8
}],
borderColor: 'pink'
},
{
type: 'bar',
label: '# of Points',
data: [{
x: new Date('09-08-2021 12:04'),
y: 4
}, {
x: new Date('09-08-2021 12:08'),
y: 6
}, {
x: new Date('09-08-2021 12:12'),
y: 12
}, {
x: new Date('09-08-2021 12:30'),
y: 18
}, {
x: new Date('09-08-2021 12:022'),
y: 10
}, {
x: new Date('09-08-2021 12:38'),
y: 15
}, {
x: new Date('09-08-2021 12:52'),
y: 5
}, {
x: new Date('09-08-2021 12:59'),
y: 8
}],
backgroundColor: 'orange'
}
]
},
options: {
scales: {
x: {
type: 'time',
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Hide all series button in CanvasJS graph (javascript foreach usage)

The question related to CanvasJS, but probably any expert in pure javascript could help.
I need a button to hide/unhide all elements in canvasjs graph.
There is a working code that can hide element using array index:
chart.options.data[0].visible = !chart.options.data[0].visible;
I'm trying to go through array, but it doesn't work, obviously my code is wrong:
chart.options.data.forEach(visible = !visible);
How should I fix it?
The full code snippet is:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9},
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35},
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30},
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick = function(){
//Works for a single element using index:
chart.options.data[0].visible = !chart.options.data[0].visible;
//Doesn't work, need to modify
//chart.options.data.forEach(visible = !visible);
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>
UP:
Found solution with for loop:
for (var i = 0; i < chart.options.data.length; i++) {
chart.options.data[i].visible = !chart.options.data[i].visible;
}
But still interesting how should it work with foreach

forEach is an Array method that you can use to execute a function on each element in an array. On the other hand for is a loop that is more flexible.
In your case, you can hide all dataSeries onclick of button either using for or forEach. Check the code below:
var chart = new CanvasJS.Chart("chartContainer", {
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9 },
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35 },
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44 }
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30 },
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20 }
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick = function(){
chart.options.data.forEach(function(dataSeries) {
if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
dataSeries.visible = false;
} else {
dataSeries.visible = true;
}
});
/*var dataSeries;
for(var i = 0; i < chart.data.length; i++){
dataSeries = chart.options.data[i];
if (typeof (dataSeries.visible) === "undefined" || dataSeries.visible) {
dataSeries.visible = false;
} else {
dataSeries.visible = true;
}
}*/
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 260px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

Thanks to Vishwas for detailed answer. Generally - yes, both for & forEach are fine usable here. I will mark it as correct, but it helped me to get more concise solution using forEach that I expected:
document.getElementById(""showAllSeries"").onclick = function(){
chart.options.data.forEach(function(dataSeries) {
dataSeries.visible = !dataSeries.visible })
chart.render();
};
Will leave it here for a history also:
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Test Button to Hide All Series"
},
legend: {
cursor: "pointer",
itemclick: function (e) {
//console.log("legend click: " + e.dataPointIndex);
//console.log(e);
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
} else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
data: [
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 5 },
{ x: 20, y: 9},
{ x: 30, y: 17 },
{ x: 40, y: 32 },
{ x: 50, y: 22 },
{ x: 60, y: 14 },
{ x: 70, y: 25 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 31 },
{ x: 20, y: 35},
{ x: 30, y: 30 },
{ x: 40, y: 35 },
{ x: 50, y: 35 },
{ x: 60, y: 38 },
{ x: 70, y: 38 },
{ x: 80, y: 34 },
{ x: 90, y: 44}
]
},
{
showInLegend: true,
type: "line",
dataPoints: [
{ x: 10, y: 25 },
{ x: 20, y: 30},
{ x: 30, y: 20 },
{ x: 40, y: 45 },
{ x: 50, y: 30 },
{ x: 60, y: 10 },
{ x: 70, y: 15 },
{ x: 80, y: 18 },
{ x: 90, y: 20}
]
}
]
});
chart.render();
document.getElementById("showAllSeries").onclick=function(){
chart.options.data.forEach(function(dataSeries){
dataSeries.visible = !dataSeries.visible
})
chart.render();
};
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<center><button id= "showAllSeries" style= "margin: 10px;">Show/Hide All series</button></center>

canviasjs is not showing chart multiple times

I am facing problem to show chart multiple times in a page. following is my code. my application is dynamic. but if the following can show the chart twice or more, my problem will be solved.
This code is showing chart once.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY:{
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [
{
type: "column",
color: "darkgreen",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
]
});
chart.render();
}
</script>
<div id="chartContainer" style="height: 300px; width: 100%;"> <br> <br> <br> <br><br> <br><br> <br><br> <br><br> <br>
<script type="text/javascript">
window.onload = function () {
var chart1 = new CanvasJS.Chart("chartContainer1",
{
title:{
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY:{
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [
{
type: "column",
color: "darkgreen",
dataPoints: [
{ x: 10, y: 71 },
{ x: 20, y: 55},
{ x: 30, y: 50 },
{ x: 40, y: 65 },
{ x: 50, y: 95 },
{ x: 60, y: 68 },
{ x: 70, y: 28 },
{ x: 80, y: 34 },
{ x: 90, y: 14}
]
}
]
});
chart1.render();
}
</script>
<div id="chartContainer1" style="height: 300px; width: 100%;">
</div>
<script type="text/javascript" src="canvasjs.js"></script>
</body>
</html>

You only have to add them together and make sure that your first created canvas is emptied whenever the second is created:
This is the JS you need:
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY: {
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [{
type: "column",
color: "darkgreen",
dataPoints: [
{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
}, {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}
]
}]
});
chart.render();
chart = {}; // empty your first chart
var chart1 = new CanvasJS.Chart("chartContainer1", {
title: {
text: "Using all form of color inputs",
fontColor: "#6A5ACD"
},
axisY: {
interlacedColor: "rgb(255,250,250)",
gridColor: "#FFBFD5"
},
data: [{
type: "column",
color: "darkgreen",
dataPoints: [
{
x: 10,
y: 71
}, {
x: 20,
y: 55
}, {
x: 30,
y: 50
}, {
x: 40,
y: 65
}, {
x: 50,
y: 95
}, {
x: 60,
y: 68
}, {
x: 70,
y: 28
}, {
x: 80,
y: 34
}, {
x: 90,
y: 14
}
]
}]
});
chart1.render();
chart1 = {};
Look at this JSFIDDLE

Thanks everyone. I have exact solution with Google Chart.
https://developers.google.com/chart/interactive/docs/quick_start
Regards,
Zahirul

Rickshaw / d3.js add axis title

Is there a way to add title to the axis? Typically, it is useful to have the y-axis display units. For example: http://code.shutterstock.com/rickshaw/examples/y_axis.html has just numbers, but in any kind of plot you would need to specify: %, $, km/s, etc. How to do that?
Thank you!
var graph = new Rickshaw.Graph( {
element: document.getElementById("chart"),
renderer: 'line',
height: 300,
width: 800,
series: [
{
data: [ { x: 0, y: 120 }, { x: 1, y: 890 }, { x: 2, y: 38 }, { x: 3, y: 70 }, { x: 4, y: 32 } ],
color: "#c05020"
}, {
data: [ { x: 0, y: 80 }, { x: 1, y: 200 }, { x: 2, y: 100 }, { x: 3, y: 520 }, { x: 4, y: 133 } ],
color: "#30c020"
}, {
data: [ { x: 0, y: 200 }, { x: 1, y: 390 }, { x: 2, y: 1000 }, { x: 3, y: 200 }, { x: 4, y: 230 } ],
color: "#6060c0"
}
]
} );
var y_ticks = new Rickshaw.Graph.Axis.Y( {
graph: graph,
orientation: 'left',
tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
element: document.getElementById('y_axis'),
} );
graph.render();