Yo, i'm trying to create a custom button for RICKSHAW chart.. Is here someone who can help me with that ?
I tried: data.push by click on the button, but that way doesn't update the legend.. Then i tried this one graph.series[0].disable() and chart.series[0].disable() and $('.rickshaw_legend .line:nth-child(1)').addClass('disabled');
I found the rickshaw.toggle code but don't have any idea how to take the right thing out of there and use it like my legend type..
So if someone have any idea with that:
var graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: "",
renderer: 'line',
series: [{
name: '1st Campaign',
color: 'rgba(26, 188, 156,0.5)',
data: [
{ x: 0, y: 600 },
{ x: 1, y: 498 },
{ x: 2, y: 491 },
{ x: 3, y: 480 },
{ x: 4, y: 480 },
{ x: 5, y: 475 },
{ x: 6, y: 470 },
{ x: 7, y: 468 },
{ x: 8, y: 463 },
{ x: 9, y: 452 },
{ x: 10, y: 450 },
{ x: 11, y: 440 },
{ x: 12, y: 434 },
{ x: 13, y: 290 },
{ x: 14, y: 258 },
{ x: 15, y: 253 },
{ x: 16, y: 230 },
{ x: 17, y: 130 },
{ x: 18, y: 130 },
{ x: 19, y: 130 },
{ x: 20, y: 130 },
{ x: 21, y: 130 },
{ x: 22, y: 129 },
{ x: 23, y: 127 },
{ x: 24, y: 125 },
{ x: 25, y: 125 },
{ x: 26, y: 20 },
{ x: 27, y: 10 },
{ x: 28, y: 10 },
{ x: 29, y: 10 },
{ x: 30, y: 10 } ]
}, {
name: '2th Campaign',
color: 'rgba(230, 126, 34,.5)',
data: [
{ x: 0, y: 200 },
{ x: 1, y: 198 },
{ x: 2, y: 191 },
{ x: 3, y: 180 },
{ x: 4, y: 180 },
{ x: 5, y: 175 },
{ x: 6, y: 170 },
{ x: 7, y: 168 },
{ x: 8, y: 163 },
{ x: 9, y: 152 },
{ x: 10, y: 150 },
{ x: 11, y: 140 },
{ x: 12, y: 134 },
{ x: 13, y: 90 },
{ x: 14, y: 58 },
{ x: 15, y: 53 },
{ x: 16, y: 30 },
{ x: 17, y: 30 },
{ x: 18, y: 30 },
{ x: 19, y: 30 },
{ x: 20, y: 30 },
{ x: 21, y: 30 },
{ x: 22, y: 29 },
{ x: 23, y: 27 },
{ x: 24, y: 25 },
{ x: 25, y: 25 },
{ x: 26, y: 20 },
{ x: 27, y: 10 },
{ x: 28, y: 10 },
{ x: 29, y: 10 },
{ x: 30, y: 10 } ]
}, {
name: '3th Campaign',
color: 'rgba(231, 76, 60,.5)',
data: [
{ x: 0, y: 400 },
{ x: 1, y: 498 },
{ x: 2, y: 491 },
{ x: 3, y: 480 },
{ x: 4, y: 480 },
{ x: 5, y: 675 },
{ x: 6, y: 670 },
{ x: 7, y: 668 },
{ x: 8, y: 663 },
{ x: 9, y: 652 },
{ x: 10, y: 750 },
{ x: 11, y: 740 },
{ x: 12, y: 734 },
{ x: 13, y: 700 },
{ x: 14, y: 708 },
{ x: 15, y: 353 },
{ x: 16, y: 330 },
{ x: 17, y: 330 },
{ x: 18, y: 330 },
{ x: 19, y: 330 },
{ x: 20, y: 230 },
{ x: 21, y: 230 },
{ x: 22, y: 229 },
{ x: 23, y: 227 },
{ x: 24, y: 225 },
{ x: 25, y: 225 },
{ x: 26, y: 520 },
{ x: 27, y: 510 },
{ x: 28, y: 110 },
{ x: 29, y: 110 },
{ x: 30, y: 10 } ]
}, {
name: '4th Campaign',
color: 'rgba(155, 89, 182,.5)',
data: [
{ x: 0, y: 1400 },
{ x: 1, y: 1498 },
{ x: 2, y: 1491 },
{ x: 3, y: 1480 },
{ x: 4, y: 1480 },
{ x: 5, y: 975 },
{ x: 6, y: 970 },
{ x: 7, y: 968 },
{ x: 8, y: 963 },
{ x: 9, y: 952 },
{ x: 10, y: 850 },
{ x: 11, y: 840 },
{ x: 12, y: 834 },
{ x: 13, y: 800 },
{ x: 14, y: 808 },
{ x: 15, y: 653 },
{ x: 16, y: 630 },
{ x: 17, y: 630 },
{ x: 18, y: 630 },
{ x: 19, y: 630 },
{ x: 20, y: 530 },
{ x: 21, y: 530 },
{ x: 22, y: 529 },
{ x: 23, y: 527 },
{ x: 24, y: 525 },
{ x: 25, y: 525 },
{ x: 26, y: 420 },
{ x: 27, y: 410 },
{ x: 28, y: 410 },
{ x: 29, y: 410 },
{ x: 30, y: 410 } ]
}]
});
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph
});
xAxis.render();
var yAxis = new Rickshaw.Graph.Axis.Y({
graph: graph
});
yAxis.render();
var legend = new Rickshaw.Graph.Legend({
graph: graph,
element: document.querySelector('#chart')
});
var shelving = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: graph,
legend: legend
});
var hoverDetail = new Rickshaw.Graph.HoverDetail( {
graph: graph,
xFormatter: function(x) { return x + " second" },
yFormatter: function(y) { return Math.floor(y) + " %" }
} );
var resize = function() {
graph.configure({
width: window.innerWidth * 0,
height: 220
});
graph.render();
}
window.addEventListener('resize', resize);
resize();
$('#series-1').click(function(event) {
$('.rickshaw_legend path:nth-child(1)').fadeToggle();
});
#chart {padding-bottom: 20px; margin-left: 15px; width: 95%;}
.rickshaw_graph .x_tick { border-left: 0 !important; }
.rickshaw_graph .y_ticks path {opacity: 0.05;}
g.tick {font-weight: normal;}
g.y_ticks.plain {transform: translate(-3px,8px);}
.rickshaw_graph .y_ticks .tick line {display: none;}
.rickshaw_graph .y_grid .tick {stroke: rgba(0,0,0,0.1) !important; stroke-dasharray: 0 !important;}
.rickshaw_graph .detail .item.active {background: #fff; border: 1px solid #ecf0f1; margin-top: -1px;}
.rickshaw_graph .detail {top: 2px !important; bottom: 20px !important; border-left: 10px solid rgba(0,0,0,0.05); border-right: 10px solid rgba(0,0,0,0.05); background: none !important; width: 1px;}
.rickshaw_graph .detail .x_label {opacity: 1 !important; background: rgba(0,0,0,0.05) !important; border: none !important;}
.rickshaw_graph .x_tick .title {bottom: 5px !important; margin-left: -7px !important; font-size: 10px !important;}
g.tick {opacity: 0.5 !important;}
.rickshaw_graph .detail .dot { margin-top: 6.5px !important;}
.rickshaw_legend .line { overflow: hidden; text-overflow: ellipsis; width: 100%;}
.rickshaw_legend ul {position: relative; margin-top: 20px !important;}
.rickshaw_graph .detail .x_label.left { left: 11px !important;}
.rickshaw_graph .detail .x_label.right { right: 11px !important; }
.rickshaw_legend {background: none !important; color: #000 !important;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>
<input type="button" id="series-1">
<div id="chart"></div>
Here is a copied code from rickshaw.js for toggle:
Rickshaw.namespace("Rickshaw.Graph.Behavior.Series.Toggle");
Rickshaw.Graph.Behavior.Series.Toggle = function(args) {
this.graph = args.graph;
this.legend = args.legend;
var self = this;
this.addAnchor = function(line) {
var anchor = document.createElement("a");
anchor.innerHTML = "✔";
anchor.classList.add("action");
line.element.insertBefore(anchor, line.element.firstChild);
anchor.onclick = function(e) {
if (line.series.disabled) {
line.series.enable();
line.element.classList.remove("disabled")
} else {
if (this.graph.series.filter(function(s) {
return !s.disabled
}
).length <= 1)
return;
line.series.disable();
line.element.classList.add("disabled")
}
self.graph.update()
}
.bind(this);
var label = line.element.getElementsByTagName("span")[0];
label.onclick = function(e) {
var disableAllOtherLines = line.series.disabled;
if (!disableAllOtherLines) {
for (var i = 0; i < self.legend.lines.length; i++) {
var l = self.legend.lines[i];
if (line.series === l.series) {} else if (l.series.disabled) {} else {
disableAllOtherLines = true;
break
}
}
}
if (disableAllOtherLines) {
line.series.enable();
line.element.classList.remove("disabled");
self.legend.lines.forEach(function(l) {
if (line.series === l.series) {} else {
l.series.disable();
l.element.classList.add("disabled")
}
}
)
} else {
self.legend.lines.forEach(function(l) {
l.series.enable();
l.element.classList.remove("disabled")
}
)
}
self.graph.update()
}
}
;
if (this.legend) {
var $ = jQuery;
if (typeof $ != "undefined" && $(this.legend.list).sortable) {
$(this.legend.list).sortable({
start: function(event, ui) {
ui.item.bind("no.onclick", function(event) {
event.preventDefault()
}
)
},
stop: function(event, ui) {
setTimeout(function() {
ui.item.unbind("no.onclick")
}
, 250)
}
})
}
this.legend.lines.forEach(function(l) {
self.addAnchor(l)
}
)
}
this._addBehavior = function() {
this.graph.series.forEach(function(s) {
s.disable = function() {
if (self.graph.series.length <= 1) {
throw "only one series left"
}
s.disabled = true
}
;
s.enable = function() {
s.disabled = false
}
}
)
}
;
this._addBehavior();
this.updateBehaviour = function() {
this._addBehavior()
}
}
;
Ok, for now i figured out with this way.. it's not a really elegant, but it's works :
CODE:
$('.rickshaw_legend .label:contains("1th")').siblings('.action').click();
Just a directed to rickshaw legend and .click() on the label that contains text 1st (name of series)..
NEED: Enable the legend ( and u can set in CSS display: none;
Thats my code: .rickshaw_legend ul {display: none;}
{
name: '1th',
data: [...]
}
Hope, that i help to someone with that.
Related
I am using LightningChart JS and would like to implement a virtual measurement device, where I can click on point A and then drag to point B and obtain the x,y values of both point A and point B.
As far as I have looked into the event handlers they just return a mouse event with start and stop positions in terms of screen positions. Please, correct me if I'm wrong. Also please suggest an efficient way to do this.
Thanks in advance.
The mouse events return the mouse coordinates in the same coordinate space as normal JS mouse events. To get the click location in the series coordinate space, a couple of steps need to be taken.
First the mouse coordinates need to be converted to the engine coordinate space. The engine coordinate space is the canvas area with 0,0 on the bottom left of the canvas. This can be done with chart.engine.clientLocation2Engine(ev.clientX,ev.clientY). This returns the event coordinate in the engine coordinate space using the chart engine scale.
This needs to be then converted to the series coordinate. This can be done with translatePoint method. translatePoint can be used to convert points between two different scales. Scale in LightningChart JS is basically a coordinate space.
const m = chart.engine.clientLocation2Engine(ev.clientX, ev.clientY)
const translated = translatePoint(m, chart.engine.scale, lineSeries.scale)
Now the translated variable contains the click location in the series coordinate space.
See a full code snippet below where you can drag on the series area and when drag is stopped markers are placed to the start and end locations of the drag.
const {
lightningChart,
SolidLine,
SolidFill,
ColorRGBA,
AxisTickStrategies,
UIOrigins,
DataPatterns,
translatePoint,
ColorHEX
} = lcjs
const chart = lightningChart().ChartXY()
const diesel = [
{ x: 0, y: 1.52 },
{ x: 1, y: 1.52 },
{ x: 2, y: 1.52 },
{ x: 3, y: 1.58 },
{ x: 4, y: 2.00 },
{ x: 5, y: 2.00 },
{ x: 6, y: 2.00 },
{ x: 7, y: 2.00 },
{ x: 8, y: 2.26 },
{ x: 9, y: 1.90 },
{ x: 10, y: 1.90 },
{ x: 11, y: 1.90 },
{ x: 12, y: 1.90 },
{ x: 13, y: 1.60 },
{ x: 14, y: 1.60 },
{ x: 15, y: 1.60 },
{ x: 16, y: 1.00 },
{ x: 17, y: 1.00 },
{ x: 18, y: 1.00 },
{ x: 19, y: 1.74 },
{ x: 20, y: 1.47 },
{ x: 21, y: 1.47 },
{ x: 22, y: 1.47 },
{ x: 23, y: 1.74 },
{ x: 24, y: 1.74 },
{ x: 25, y: 1.74 },
{ x: 27, y: 1.5 },
{ x: 28, y: 1.5 },
{ x: 29, y: 1.5 }
]
const gasoline = [
{ x: 0, y: 1.35 },
{ x: 1, y: 1.35 },
{ x: 2, y: 1.35 },
{ x: 3, y: 1.35 },
{ x: 4, y: 1.90 },
{ x: 5, y: 1.90 },
{ x: 6, y: 1.90 },
{ x: 7, y: 1.92 },
{ x: 8, y: 1.50 },
{ x: 9, y: 1.50 },
{ x: 10, y: 1.3 },
{ x: 11, y: 1.3 },
{ x: 12, y: 1.3 },
{ x: 13, y: 1.3 },
{ x: 14, y: 1.3 },
{ x: 15, y: 1.32 },
{ x: 16, y: 1.40 },
{ x: 17, y: 1.44 },
{ x: 18, y: 1.02 },
{ x: 19, y: 1.02 },
{ x: 20, y: 1.02 },
{ x: 21, y: 1.02 },
{ x: 22, y: 1.02 },
{ x: 23, y: 1.02 },
{ x: 24, y: 1.02 },
{ x: 25, y: 1.02 },
{ x: 27, y: 1.30 },
{ x: 28, y: 1.30 },
{ x: 29, y: 1.30 }
]
const lineSeries = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
const lineSeries2 = chart.addLineSeries({ dataPattern: DataPatterns.horizontalProgressive })
lineSeries2.add(diesel.map((point) => ({ x: point.x, y: point.y })))
lineSeries.add(gasoline.map((point) => ({ x: point.x, y: point.y })))
const markerA = chart.addChartMarkerXY()
.setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#f00')))))
.setMouseInteractions(false)
const markerB = chart.addChartMarkerXY()
.setPointMarker((marker) => marker.setFillStyle((f => f.setColor(ColorHEX('#0f0')))))
.setMouseInteractions(false)
function getClickInSeriesScale(point, scale) {
const m = chart.engine.clientLocation2Engine(point.x, point.y)
return translatePoint(m, chart.engine.scale, scale)
}
chart.onSeriesBackgroundMouseDragStop((obj, ev, b, start) => {
let pointA = getClickInSeriesScale(start, lineSeries.scale)
let pointB = getClickInSeriesScale({x:ev.clientX,y:ev.clientY}, lineSeries.scale)
// move markes to start and end points
markerA.setPosition(pointA)
markerB.setPosition(pointB)
})
<script src="https://unpkg.com/#arction/lcjs#1.3.1/dist/lcjs.iife.js"></script>
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>
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();