Reproduce dynamically background in fabric js - javascript

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);
}
});

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);

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>

Tooltip based on pixels in an image

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">

Rickshaw remove series by custom button (TOGGLE ACTION)

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.

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

Categories