Tooltip based on pixels in an image - javascript

I have a set of images. Each image is displaying multiple objects. I want to show a tooltip whenever I hover my mouse pointer over each object in the image. I have pixel coordinates, and width and height for each object in an image.
I know a couple of different ways to implement a tooltip for an element but don't know how to handle pixel dimensions inside an image with respect to the tooltip.


You could use image maps for this:
var elements = [
{ label: 'Yellow', x: 112, y: 23, w: 112, h: 89 },
{ label: 'Pink', x: 27, y: 119, w: 110, h: 195 },
{ label: 'Brown', x: 198, y: 124, w: 112, h: 90 }
];
var img = document.querySelector('img'),
map = document.createElement('map');
map.name = 'my-map';
img.setAttribute('usemap', '#' + map.name);
elements.forEach(function(el) {
var area = document.createElement('area');
area.title = el.label;
area.coords = [el.x, el.y, el.x + el.w, el.y + el.h].join(',');
map.appendChild(area);
});
document.body.appendChild(map);
<img src="https://image.shutterstock.com/image-photo/three-macaroons-sweet-desserts-isolated-260nw-351030134.jpg">
If you have multiple images, you could make it into a reusable function:
addImageMap(
document.getElementById('image-a'),
[
{ label: 'Yellow', x: 112, y: 23, w: 112, h: 89 },
{ label: 'Pink', x: 27, y: 119, w: 110, h: 195 },
{ label: 'Brown', x: 198, y: 124, w: 112, h: 90 }
]
);
addImageMap(
document.getElementById('image-b'),
[
{ label: 'Drink', x: 111, y: 90, w: 310, h: 450 },
{ label: 'Burger', x: 471, y: 100, w: 320, h: 450 },
{ label: 'Fries', x: 891, y: 52, w: 300, h: 450 }
]
);
// If you want responsive image maps (see plugin added in HTML)
imageMapResize();
function addImageMap(img, elements) {
var map = document.createElement('map');
map.name = 'my-map-' + getUniqueMapId();
img.setAttribute('usemap', '#' + map.name);
elements.forEach(function(el) {
var area = document.createElement('area');
area.title = el.label;
area.coords = [el.x, el.y, el.x + el.w, el.y + el.h].join(',');
map.appendChild(area);
});
document.body.appendChild(map);
}
function getUniqueMapId() {
window.uniqueMapId = (window.uniqueMapId || 0) + 1;
return window.uniqueMapId;
}
img { width: 200px; }
<!-- Docs: https://github.com/davidjbradshaw/image-map-resizer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/image-map-resizer/1.0.10/js/imageMapResizer.min.js"></script>
<img id="image-a" src="https://image.shutterstock.com/image-photo/three-macaroons-sweet-desserts-isolated-260nw-351030134.jpg">
<img id="image-b" src="https://previews.123rf.com/images/ifh/ifh1512/ifh151200179/49541375-illustration-of-set-of-three-objects-such-as-hamburger-french-fries-and-coffee.jpg">

Related

Slice/convert 1D array to 2D array based on defined length in JavaScript

I have 1D pointer array like below:
Darray = [{x: 334, y: 400.5}, {x: 237, y: 389},{x: 149, y: 387.5},{x: 55, y: 379.5},{x: 210, y: 301.5},{x: 48, y: 295.5},{x: 378.5, y: 224.5},{x: 283, y: 217.5},{x: 121.5, y: 211.5},{x: 198.5, y: 211.5},{x: 42.5, y: 201},{x: 33, y: 134},{x: 364, y: 142},{x: 268.5, y: 137},{x: 192, y: 136.5},{x: 106, y: 131.5},{x: 263.5, y: 68},{x: 182.5, y: 63.5},{x: 102.5, y: 61.5},{x: 344.5, y: 65.5},{x: 32, y: 52}]
//console.log(Darray)
const points = Darray.slice();
points.sort((a, b) => a.y - b.y);
console.log(points)
I want to convert this 1D array into 2D array based on the array row length. For example,
row_length = [5, 5, 5, 2, 4]
new_Darray = [[element[1,1],element[1,2], element[1,3], element[1,4], element[1,5],
[element[2,1],element[2,2], element[2,3], element[2,4], element[2,5],
[element[3,1],element[3,2], element[3,3], element[3,4], element[3,5],
[element[4,1],element[4,2],
[element[5,1],element[5,2], element[5,3], element[5,4], element[5,5]]
Here, element[i] represents {x:someValue, y:someValue}
Sorry, if I wrongly represented anything. Any help will be highly appreciated.

Using map, slice and temp variable, can be simplified to one-liner
const Darray = [
{ x: 334, y: 400.5 },
{ x: 237, y: 389 },
{ x: 149, y: 387.5 },
{ x: 55, y: 379.5 },
{ x: 210, y: 301.5 },
{ x: 48, y: 295.5 },
{ x: 378.5, y: 224.5 },
{ x: 283, y: 217.5 },
{ x: 121.5, y: 211.5 },
{ x: 198.5, y: 211.5 },
{ x: 42.5, y: 201 },
{ x: 33, y: 134 },
{ x: 364, y: 142 },
{ x: 268.5, y: 137 },
{ x: 192, y: 136.5 },
{ x: 106, y: 131.5 },
{ x: 263.5, y: 68 },
{ x: 182.5, y: 63.5 },
{ x: 102.5, y: 61.5 },
{ x: 344.5, y: 65.5 },
{ x: 32, y: 52 },
];
const points = Darray.slice();
points.sort((a, b) => a.y - b.y);
// console.log(points);
const row_length = [5, 5, 5, 2, 4];
let last = 0;
const output = row_length.map((len) => points.slice(last, (last += len)));
console.log(output);

Add multi color gradient for different points in d3.js

I have to add gradient inside a foot shape according to the value of a point inside the foot. I have X and Y coordinates of a point and a value is attached to it. According to the value I have to assign color gradient like in the picture below. Higher the value of a point, darker the area is
So far, I have created the foot and added 2 color gradient to the whole foot, but I am unable to add gradient like this in the picture. Below is what I have achieved. Please if anyone could help me to find any solution to this
Here is the Stackblitz Link
Sample data :
[
{sensor: 0, value: 7.4, x: 108, y: 406}
{sensor: 1, value: 8.1, x: 68, y: 412}
{sensor: 2, value: 3.6, x: 108, y: 346}
{sensor: 3, value: 4.5, x: 61, y: 350}
{sensor: 4, value: 0.5, x: 108, y: 280}
{sensor: 5, value: 1, x: 49, y: 288}
{sensor: 6, value: 1, x: 122, y: 200}
{sensor: 7, value: 0.5, x: 30, y: 218}
{sensor: 8, value: 3.3, x: 140, y: 109}
{sensor: 9, value: 3.4, x: 105, y: 114}
{sensor: 10, value: 2.7, x: 78, y: 119}
{sensor: 11, value: 2.3, x: 51, y: 124}
{sensor: 12, value: 1.6, x: 22, y: 136}
{sensor: 13, value: 3.5, x: 121, y: 41}
{sensor: 14, value: 1.2, x: 85, y: 45}
{sensor: 15, value: 1, x: 50, y: 59}
]

Here is a hit map with 'populated' data (based on average value of closest points):
Just add the mask of the foot contour...
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const populateData = (points, width, height, step) => {
const populated = [];
for (let x = 0; x < width; x += step)
for (let y = 0; y < height; y += step) {
const distances = points.map(p =>
({...p, distance: Math.hypot(p.x - x, p.y - y)})).filter(d => d.distance < 100);
const sum = distances.reduce((s, d) => s + 1 / d.distance, 0);
const value = distances.reduce((a, d) => a + 1 / sum / d.distance * d.value, 0);
populated.push({x, y, value});
}
return populated;
};
const pd = populateData(data, 300, 500, 10);
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
pd.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />

Here is a simple plot with the data you provided:
If you have more points, it can be a more precise picture
const data = [
{sensor: 0, value: 7.4, x: 108, y: 406},
{sensor: 1, value: 8.1, x: 68, y: 412},
{sensor: 2, value: 3.6, x: 108, y: 346},
{sensor: 3, value: 4.5, x: 61, y: 350},
{sensor: 4, value: 0.5, x: 108, y: 280},
{sensor: 5, value: 1, x: 49, y: 288},
{sensor: 6, value: 1, x: 122, y: 200},
{sensor: 7, value: 0.5, x: 30, y: 218},
{sensor: 8, value: 3.3, x: 140, y: 109},
{sensor: 9, value: 3.4, x: 105, y: 114},
{sensor: 10, value: 2.7, x: 78, y: 119},
{sensor: 11, value: 2.3, x: 51, y: 124},
{sensor: 12, value: 1.6, x: 22, y: 136},
{sensor: 13, value: 3.5, x: 121, y: 41},
{sensor: 14, value: 1.2, x: 85, y: 45},
{sensor: 15, value: 1, x: 50, y: 59},
];
const RECT_SIZE = 20;
const getColor = v => `rgb(255,${255 - v * 25},0)`
const svg = d3.select('svg');
data.forEach(d => {
svg.append('rect')
.attr('x', d.x - RECT_SIZE / 2)
.attr('y', d.y - RECT_SIZE / 2)
.attr('width', RECT_SIZE / 2)
.attr('height', RECT_SIZE / 2)
.style('fill', getColor(d.value));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="500" />

Reproduce dynamically background in fabric js

I am a novice programmer and just starting out on an adventure and am looking for solutions to my problem.
I would like to reproduce the background while moving the green object and send it dynamically to the red object in fabric js. I don't know totally how to go about it.
JSFiddle: https://jsfiddle.net/8h2akjog
Thank you for any help :)
var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';
var img = new fabric.Image('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', {
left: 1,
top: 1,
lockMovementX: true,
lockMovementY: true,
selectable: false,
hasBorders: false
});
canvas.add(img);
fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', function(myImg) {
canvas.add(myImg);
canvas.sendToBack(myImg)
});
[{"x":52,"y":283},{"x":52,"y":283},{"x":342,"y":283},{"x":342,"y":283},{"x":342,"y":183},{"x":152,"y":183}]
var polygon = new fabric.Polygon([
{ x: 52, y: 283 },
{ x: 52, y: 283 },
{ x: 342, y: 283},
{ x: 342, y: 283},
{ x: 342, y: 183 },
{ x: 152, y: 183 }], {
fill: 'rgba(0,0,0,0)',
stroke: 'green'
});
var polygon2 = new fabric.Polygon([
{ x: 102, y: 333 },
{ x: 102, y: 333 },
{ x: 392, y: 333},
{ x: 392, y: 333},
{ x: 392, y: 233 },
{ x: 202, y: 233 }], {
fill: 'rgba(0,0,0,0)',
stroke: 'red'
});
canvas.add(polygon, polygon2);
canvas.renderAll();

I actually did this once (sorta). I created a magnifier that copied what was "focused" onto another image. (my source shape was square, fyi)
Here's code based your fiddle, but it's not going to work as-is because of CORS issues, but it should give you a better start
var canvas = new fabric.Canvas('can');
canvas.setHeight(window.innerHeight);
canvas.setWidth(window.innerWidth);
var link = 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU';
var img;
fabric.Image.fromURL('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTd63MKMUGUdxDQ_uTxp6DGgjSUKR9Ycg_2CQ&usqp=CAU', function(myImg) {
canvas.add(myImg);
canvas.sendToBack(myImg);
img = myImg;
});
[{"x":52,"y":283},{"x":52,"y":283},{"x":342,"y":283},{"x":342,"y":283},{"x":342,"y":183},{"x":152,"y":183}]
var polygon = new fabric.Polygon([
{ x: 52, y: 283 },
{ x: 52, y: 283 },
{ x: 342, y: 283},
{ x: 342, y: 283},
{ x: 342, y: 183 },
{ x: 152, y: 183 }], {
fill: 'rgba(0,0,0,0)',
stroke: 'green'
});
var polygon2 = new fabric.Polygon([
{ x: 102, y: 333 },
{ x: 102, y: 333 },
{ x: 392, y: 333},
{ x: 392, y: 333},
{ x: 392, y: 233 },
{ x: 202, y: 233 }], {
fill: 'rgba(0,0,0,0)',
stroke: 'red'
});
canvas.add(polygon, polygon2);
canvas.renderAll();
canvas.on('mouse:move', function (obj) {
console.log({
x: polygon.aCoords.tl.x,
y: polygon.aCoords.tl.y,
});
try {
var squareImage = canvas.toDataURL({
format: "png",
left: polygon.left,
top: polygon.top,
width: polygon.width,
height: polygon.height,
multiplier: 1
});
fabric.Image.fromURL(squareImage, function(img) {
img.set({
clipPath: new fabric.Polygon([
{ x: 52, y: 283 },
{ x: 52, y: 283 },
{ x: 342, y: 283},
{ x: 342, y: 283},
{ x: 342, y: 183 },
{ x: 152, y: 183 }])
});
//do what you want with the img
});
} catch (e) {
console.log(e);
}
});

Virtual measurement device with line series chart

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>

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>

Categories