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>
Related
I have a dataset like this:
const dataset = [
{ 'color': 'red', 'data': [{ x: 0, y: 600 }, { x: 2, y: 900 }, { x: 4, y: 650 }, { x: 6, y: 700 }, { x: 9, y: 600 }] },
{ 'color': 'blue', 'data': [{ x: 0, y: 400 }, { x: 2, y: 300 }, { x: 4, y: 450 }, { x: 6, y: 900 }, { x: 9, y: 400 }] },
{ 'color': 'yellow', 'data': [{ x: 0, y: 200 }, { x: 2, y: 100 }, { x: 4, y: 550 }, { x: 6, y: 600 }, { x: 9, y: 400 }] }
];
I want to find domain values for max and min x-axis. I try this code but it doesn't work:
.domain([d3.min(arrangedata, (array) => array.x), d3.max(arrangedata, (array) => array.x)])
I also tried d3.extend, but I couldn't handle it. Any idea ?
For using either d3.max/min or d3.extent, you have to merge the inner arrays, which you can do with Array.prototype.reduce. Then, specify the x property in the accessor.
All together, it's just this:
const extent = d3.extent(dataset.reduce((a, c) => a.concat(c.data), []), d => d.x);
Here is the demo:
const dataset = [{
'color': 'red',
'data': [{
x: 0,
y: 600
}, {
x: 2,
y: 900
}, {
x: 4,
y: 650
}, {
x: 6,
y: 700
}, {
x: 9,
y: 600
}]
},
{
'color': 'blue',
'data': [{
x: 0,
y: 400
}, {
x: 2,
y: 300
}, {
x: 4,
y: 450
}, {
x: 6,
y: 900
}, {
x: 9,
y: 400
}]
},
{
'color': 'yellow',
'data': [{
x: 0,
y: 200
}, {
x: 2,
y: 100
}, {
x: 4,
y: 550
}, {
x: 6,
y: 600
}, {
x: 9,
y: 400
}]
}
];
const extent = d3.extent(dataset.reduce((a, c) => a.concat(c.data), []), d => d.x);
console.log(extent)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
You can try applying Math. min/max to the mapped series data.
d3.minValue = function(dataset, field) {
return d3.min(dataset, series => Math.min.apply(Math, series.data.map(data => data[field])))
}
d3.maxValue = function(dataset, field) {
return d3.max(dataset, series => Math.max.apply(Math, series.data.map(data => data[field])))
}
const dataset = [{
'color': 'red',
'data': [{ x: 0, y: 600 }, { x: 2, y: 900 }, { x: 4, y: 650 }, { x: 6, y: 700 }, { x: 9, y: 600 }]
}, {
'color': 'blue',
'data': [{ x: 0, y: 400 }, { x: 2, y: 300 }, { x: 4, y: 450 }, { x: 6, y: 900 }, { x: 9, y: 400 }]
}, {
'color': 'yellow',
'data': [{ x: 0, y: 200 }, { x: 2, y: 100 }, { x: 4, y: 550 }, { x: 6, y: 600 }, { x: 9, y: 400 }]
}]
//let domain = d3.domain([ d3.minValue(dataset, 'x'), d3.maxValue(dataset, 'x') ])
console.log(d3.minValue(dataset, 'x'), d3.maxValue(dataset, 'x')) // 0, 9
console.log(d3.minValue(dataset, 'y'), d3.maxValue(dataset, 'y')) // 100, 900
.as-console-wrapper { top: 0; max-height: 100% !important; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
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>
Here is my chart:
Here's is the chart if I add a line as the first series (note the lack of labels on the x axis):
For some reason, most of the points on the x axis are disappearing.
Here's a reduced case:
$(function () {
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: [
{
type: 'line',
data: [
{ x: 1476749571000, y: 36581540.37153554 },
{ x: 1477429910000, y: 36763124.20193958 }
]
},
{
type: 'scatter',
data: [
{ x: 1476749571000, y: 37170874 },
{ x: 1476756736000, y: 36541961 },
{ x: 1476760298000, y: 36412560 },
{ x: 1476771158000, y: 36766829 },
{ x: 1476774759000, y: 36819204 },
{ x: 1476778351000, y: 36193069 },
{ x: 1476781953000, y: 36289990 },
{ x: 1476789144000, y: 36751180 },
{ x: 1476796338000, y: 36058553 },
{ x: 1476807129000, y: 36803593 },
{ x: 1476810763000, y: 35963538 },
{ x: 1476821507000, y: 36896693 },
{ x: 1476825189000, y: 36187712 },
{ x: 1476835902000, y: 37084673 },
{ x: 1476843121000, y: 37136577 },
{ x: 1476846735000, y: 36607531 },
{ x: 1476853934000, y: 36334610 },
{ x: 1476864716000, y: 37140192 },
{ x: 1476875538000, y: 35929136 },
{ x: 1476900734000, y: 36137618 },
{ x: 1476907888000, y: 37195952 },
{ x: 1476915103000, y: 37170028 },
{ x: 1476922333000, y: 36438640 },
{ x: 1476936739000, y: 36425736 },
{ x: 1476951130000, y: 36954993 },
{ x: 1476969138000, y: 36288051 },
{ x: 1476972690000, y: 36666854 },
{ x: 1476976353000, y: 37066932 },
{ x: 1476979924000, y: 36628386 },
{ x: 1476990726000, y: 36997524 },
{ x: 1477005114000, y: 37036777 },
{ x: 1477008734000, y: 36069816 },
{ x: 1477019586000, y: 36788879 },
{ x: 1477026712000, y: 37195266 },
{ x: 1477030349000, y: 36568077 },
{ x: 1477033944000, y: 35936353 },
{ x: 1477041102000, y: 35840667 },
{ x: 1477069967000, y: 36826033 },
{ x: 1477077134000, y: 37165725 },
{ x: 1477084331000, y: 37078309 },
{ x: 1477091521000, y: 37195750 },
{ x: 1477095153000, y: 36788377 },
{ x: 1477105972000, y: 36951953 },
{ x: 1477109539000, y: 37072255 },
{ x: 1477113124000, y: 35688693 },
{ x: 1477120378000, y: 37021539 },
{ x: 1477134712000, y: 36883044 },
{ x: 1477138302000, y: 36838067 },
{ x: 1477141938000, y: 36719537 },
{ x: 1477145571000, y: 35900066 },
{ x: 1477149173000, y: 36141158 },
{ x: 1477156353000, y: 36647699 },
{ x: 1477163535000, y: 36516520 },
{ x: 1477167130000, y: 35817224 },
{ x: 1477181544000, y: 36758274 },
{ x: 1477188754000, y: 36717498 },
{ x: 1477195935000, y: 36913901 },
{ x: 1477203152000, y: 36518492 },
{ x: 1477217518000, y: 37143381 },
{ x: 1477224743000, y: 36334856 },
{ x: 1477231914000, y: 36910162 },
{ x: 1477249968000, y: 36977544 },
{ x: 1477257157000, y: 37174847 },
{ x: 1477267956000, y: 37051864 },
{ x: 1477289539000, y: 36343981 },
{ x: 1477296761000, y: 37020845 },
{ x: 1477300357000, y: 36180803 },
{ x: 1477307506000, y: 36145191 },
{ x: 1477311156000, y: 37102437 },
{ x: 1477325543000, y: 35496804 },
{ x: 1477332732000, y: 37193777 },
{ x: 1477339942000, y: 36683704 },
{ x: 1477354323000, y: 36577391 },
{ x: 1477357932000, y: 36231277 },
{ x: 1477361539000, y: 37198585 },
{ x: 1477365133000, y: 36789070 },
{ x: 1477379517000, y: 37138966 },
{ x: 1477386738000, y: 36953176 },
{ x: 1477397539000, y: 37135591 },
{ x: 1477408304000, y: 35867866 },
{ x: 1477411936000, y: 37141581 },
{ x: 1477415513000, y: 36864017 },
{ x: 1477422756000, y: 36743302 },
{ x: 1477426328000, y: 36948156 },
{ x: 1477429910000, y: 37199122 }
]
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Any ideas?
There appears to be a difference in how Highcarts interprets things between the line and scatter series types, though I am unclear how the particular scenario is explained.
But you can work around this by using a line series for both, and simply removing the line from the scatter data.
This way, you can skip setting a tickInterval, and you get the dynamic interpretation by the chart that you want.
Example:
{
type: 'line',
lineWidth: 0,
marker: {
enabled: true
},
findNearestPointBy: 'xy',
data: [ ... ]
}
Updated fiddle:
http://jsfiddle.net/jlbriggs/g6fjjach/4/
Set axis.tickInterval to force ticks to be drawn.
xAxis: {
type: 'datetime',
tickInterval: 1000 * 3600 * 24 // one day interval
},
example: http://jsfiddle.net/g6fjjach/2/
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
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();