I'm trying to generate a drawing based on mouse events and I'm noticing some interesting rendering behavior that I can't explain why it's happening that way. Here's a jsbin that shows this example: https://jsbin.com/qiqetoy/edit?html,output
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#4.2.0/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Free Drawing Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
Tool:
<select id="tool">
<option value="brush">Brush</option>
<option value="eraser">Eraser</option>
</select>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight - 25;
// first we need Konva core things: stage and layer
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
var isPaint = false;
var mode = 'brush';
var lastLine;
stage.on('mousedown touchstart', function(e) {
isPaint = true;
var pos = e.pos;
lastLine = new Konva.Line({
stroke: '#df4b26',
strokeWidth: 5,
globalCompositeOperation:
mode === 'brush' ? 'source-over' : 'destination-out',
points: [pos.x, pos.y]
});
layer.add(lastLine);
});
stage.on('mouseup touchend', function() {
isPaint = false;
});
// and core function - drawing
stage.on('mousemove touchmove', function(e) {
if (!isPaint) {
return;
}
const pos = e.pos;
var newPoints = lastLine.points().concat([pos.x, pos.y]);
lastLine.points(newPoints);
layer.batchDraw();
});
var select = document.getElementById('tool');
select.addEventListener('change', function() {
mode = select.value;
});
const line = [{
"et": "md",
"x": 109,
"y": 94
}, {
"et": "mm",
"x": 110,
"y": 98
}, {
"et": "mm",
"x": 110,
"y": 103
}, {
"et": "mm",
"x": 110,
"y": 111
}, {
"et": "mm",
"x": 110,
"y": 116
}, {
"et": "mm",
"x": 110,
"y": 123
}, {
"et": "mm",
"x": 110,
"y": 129
}, {
"et": "mm",
"x": 110,
"y": 135
}, {
"et": "mm",
"x": 110,
"y": 141
}, {
"et": "mm",
"x": 110,
"y": 143
}, {
"et": "mm",
"x": 110,
"y": 147
}, {
"et": "mm",
"x": 110,
"y": 150
}, {
"et": "mm",
"x": 111,
"y": 152
}, {
"et": "mm",
"x": 114,
"y": 155
}, {
"et": "mm",
"x": 112,
"y": 154
}, {
"et": "mm",
"x": 117,
"y": 155
}, {
"et": "mm",
"x": 120,
"y": 155
}, {
"et": "mm",
"x": 123,
"y": 154
}, {
"et": "mm",
"x": 127,
"y": 151
}, {
"et": "mm",
"x": 131,
"y": 148
}, {
"et": "mm",
"x": 135,
"y": 145
}, {
"et": "mm",
"x": 139,
"y": 140
}, {
"et": "mm",
"x": 142,
"y": 137
}, {
"et": "mu"
}, ];
line.forEach(point => {
if (point.et === 'mm') {
stage.fire('mousemove', {
pos: {
x: point.x,
y: point.y
}
});
} else if (point.et == 'md') {
stage.fire('mousedown', {
pos: {
x: point.x,
y: point.y
}
});
} else if (point.et === 'mu') {
stage.fire('mouseup', {
pos: {
x: point.x,
y: point.y
}
});
}
});
</script>
</body>
</html>
Here's the interesting part of that drawing:
You can see above that there're a couple of sharp edges/lines that're drawn at the curve. I can't explain how this is happening. You can also clearly see that it's not 5px wide (the stroke width is set at 5px).
Can someone who's got more experience with canvas/konvajs drawing help explain what's happening here and what should I do to get rid of this behavior?
Thanks,
K
I think I figured out what the issue here is. The data seems to have an issue. Here's the JSBin that isolates the data in question. https://jsbin.com/nayado/edit?html,output
{
"et": "md",
"x": 110,
"y": 147
}, {
"et": "mm",
"x": 110,
"y": 150
}, {
"et": "mm",
"x": 111,
"y": 152
}, {
"et": "mm",
"x": 114,
"y": 155
}, {
"et": "mm",
"x": 112,
"y": 154
}, {
"et": "mm",
"x": 117,
"y": 155
}, {
"et": "mu"
},
The data seems to be out of order which is probably what's causing the issue. I need to now figure out how's the canvas generating touch events that seem to be out of order.
Related
For example, I'd like to detect a coded string like "A5b1x" written in handwriting. So I'd either split it up manually so that I have an image of each character, or try to have Vision recognize it immediately. Neither is working for now, as I'm not sure how to specify that it's not a language (or specify that it's singular characters). This is what I typed in a Google compute instance:
gcloud ml vision detect-document "weblink to image"
No result for image of "g":
g
No result for image of "e": e
Result for image of "fxb3":fxb3
{
"responses": [
{
"fullTextAnnotation": {
"pages": [
{
"blocks": [
{
"blockType": "TEXT",
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"paragraphs": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"words": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.56,
"symbols": [
{
"boundingBox": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 2135,
"y": 1304
},
{
"x": 2105,
"y": 706
},
{
"x": 2403,
"y": 691
}
]
},
"confidence": 0.4,
"text": "\u0967"
},
{
"boundingBox": {
"vertices": [
{
"x": 2063,
"y": 1308
},
{
"x": 1788,
"y": 1322
},
{
"x": 1758,
"y": 723
},
{
"x": 2033,
"y": 710
}
]
},
"confidence": 0.62,
"text": "\u0967"
},
{
"boundingBox": {
"vertices": [
{
"x": 1750,
"y": 1323
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 1720,
"y": 725
}
]
},
"confidence": 0.67,
"property": {
"detectedBreak": {
"type": "LINE_BREAK"
}
},
"text": "X"
}
]
}
]
}
]
}
],
"height": 2112,
"width": 4608
}
],
"text": "\u0967\u0967X\n"
},
"textAnnotations": [
{
"boundingPoly": {
"vertices": [
{
"x": 1467,
"y": 690
},
{
"x": 2432,
"y": 690
},
{
"x": 2432,
"y": 1335
},
{
"x": 1467,
"y": 1335
}
]
},
"description": "\u0967\u0967X\n",
"locale": "und"
},
{
"boundingPoly": {
"vertices": [
{
"x": 2433,
"y": 1289
},
{
"x": 1498,
"y": 1336
},
{
"x": 1468,
"y": 737
},
{
"x": 2403,
"y": 691
}
]
},
"description": "\u0967\u0967X"
}
]
}
]
}
The Google Cloud Vision API is not able to recognise single characters at this point. There is a feature request submitted with regard to character recognition here. Please star it so that you could receive updates about this feature request and do not hesitate to add additional comments to provide details of the desired implementation.
With respect to your question about recognising "coded" strings, the Vision API is able to do that. I have successfully tried to pass an image with fxb3 to the API and the results were good (here is image1 and image2). The response you are getting from the API is two consecutive unicode characters and "x". The quality of the writing is what is causing the response to be quite poor. The model for OCR is constantly being improved, but at this point it cannot properly detect what might be considered rather unclear handwriting.
I didn't find any solution how to add prefix/suffix for Y-Axis of XYAmChart. Seems like labelFunction are not supported for valueAxes in XY chart type. Any suggestions?
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"theme": "light",
"dataDateFormat": "DD-MM-YYYY",
"graphs": [
{
"id":"g8",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":0,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c2",
"yField":"p-1-c2",
"xAxis":"g8",
"balloonText":"<span style='font-size:18px;'>[[d-1-c2]]</span><br>07/1/2017-12/31/2017"
},
{
"id":"g8-copy1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet":"round",
"bulletBorderAlpha":1,
"bulletColor":"#FFFFFF",
"bulletSize":5,
"dashLength":15,
"hideBulletsCount":50,
"lineThickness":2,
"lineColor":"#67b7dc",
"title":"Store 8",
"useLineColorForBulletBorder":true,
"xField":"d-1-c1",
"yField":"p-1-c1",
"xAxis":"g8-copy1",
"balloonText":"<span style='font-size:18px;'>[[d-1-c1]]</span><br>1/1/2017-6/29/2017"
}
],
"valueAxes": [
{
"id": "g8",
"axisAlpha": 1,
"gridAlpha": 1,
"axisColor": "#b0de09",
"color": "#b0de09",
"dashLength": 5,
"centerLabelOnFullp": true,
"position": "bottom",
"type": "date",
"minp": "DD-MM-YYYY",
"markPeriodChange": false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
},
{
"id": "g8-copy1",
"gridAlpha": 0,
"axisAlpha": 1,
"centerLabelOnFullp": false,
"position": "bottom",
"offset": 40,
"type": "date",
"minp": "DD-MM-YYYY",
'markPeriodChange': false,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}
],
"dataProvider": [
{
"d-1-c2":"01/01/2017",
"p-1-c2":"5684.6400"
},{
"d-1-c2":"01/02/2017",
"p-1-c2":"6468.9600"
},{
"d-1-c2":"01/03/2017",
"p-1-c2":"9032.7600"
},{
"d-1-c2":"01/04/2017",
"p-1-c2":"6385.9200"
},{
"d-1-c2":"01/05/2017",
"p-1-c2":"10087.3900"
},{
"d-1-c2":"01/06/2017",
"p-1-c2":"6136.3300"
},
{
"d-1-c1":"01/07/2017",
"p-1-c1":"4659.7000"
},{
"d-1-c1":"01/08/2017",
"p-1-c1":"9719.7100"
},{
"d-1-c1":"01/09/2017",
"p-1-c1":"4789.7300"
},{
"d-1-c1":"01/10/2017",
"p-1-c1":"7448.3900"
},{
"d-1-c1":"01/11/2017",
"p-1-c1":"6202.7200"
},{
"d-1-c1":"01/12/2017",
"p-1-c1":"9274.0300"
},{
"d-1-c1":"01/01/2018"
},{
"d-1-c2":"01/07/2017"
}
]
});
#chartdiv {
width: 100%;
height: 500px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
labelFunction is definitely supported as you can see below.
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
Demo:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"labelFunction": function(value, valueText) {
return "prefix:" + valueText;
}
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
You can also use unit and unitPosition if your custom labeling doesn't
require any additional logic that you can leverage through labelFunction.
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
Demo below.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "xy",
"theme": "light",
"balloon":{
"fixedPosition":true,
},
"dataProvider": [ {
"y": 10,
"x": 14,
"value": 59,
"y2": -5,
"x2": -3,
"value2": 44
}, {
"y": 5,
"x": 3,
"value": 50,
"y2": -15,
"x2": -8,
"value2": 12
}, {
"y": -10,
"x": 8,
"value": 19,
"y2": -4,
"x2": 6,
"value2": 35
}, {
"y": -6,
"x": 5,
"value": 65,
"y2": -5,
"x2": -6,
"value2": 168
}, {
"y": 15,
"x": -4,
"value": 92,
"y2": -10,
"x2": -8,
"value2": 102
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": -2,
"x2": 0,
"value2": 41
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": -3,
"value2": 16
} ],
"valueAxes": [ {
"position": "bottom",
"axisAlpha": 0,
"unit": "unit-prefix:",
"unitPosition": "left"
}, {
"minMaxMultiplier": 1.2,
"axisAlpha": 0,
"position": "left",
"unit": "unit-prefix:",
"unitPosition": "left"
} ],
"startDuration": 1.5,
"graphs": [ {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "x:<b>[[x]]</b> y:<b>[[y]]</b><br>value:<b>[[value]]</b>",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
} ]
} );
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/xy.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
In my angular application I have used Krispo Multichart graph. Where I am getting some weird graph points.
See below screen shot:
UPDATE
Screen shot 1 :
Screen shot 2:
Screen shot 3:
In above screen shots, the data are coming in every minutes (i;e expected). Data seems correct.
Here is my Options:
$scope.options_line = {
chart: {
type: 'multiChart',
yDomain1: [0, 250],
yDomain2: [0, 0],
height: 260,
width: 550,
margin: {
top: 10,
right: 50,
bottom: 50,
left: 60
},
x: function (d) {
return d.x;
},
y: function (d) {
return d.y;
},
text: function (d) {
return d.x;
},
color: d3.scale.category10().range(),
showValues: true,
valueFormat: function (d) {
return d3.format('f')(d);
},
duration: 500,
xAxis: {
axisLabel: 'Time',
tickFormat: function (d) {
return d3.time.format('%H:%M')(new Date(d));
}
},
yAxis1: {
axisLabelDistance: 0,
axisLabel: 'Voltage [ V ]',
tickFormat: function (d) {
return d3.format('f')(d);
}
},
yAxis2: {
axisLabelDistance: 0,
axisLabel: 'Current [ A ]',
tickFormat: function (d) {
return d3.format('f')(d);
},
width: 50,
},
interactive: true,
tooltip: {
contentGenerator: function (e) {
//return html content
//console.log(e);
//console.log($scope.tooltip_format);
var data = e;
console.log(data.point.y);
var series = e.series[0];
if($scope.set_offset_val) { $scope.xtime = data.point.x - $scope.set_offset_val} else {
$scope.xtime = data.point.x;
}
return '<h3>' + series.key + '</h3>' +
'<p>' + parseFloat(data.point.y).toFixed(2) + ' at ' + $filter('date')($scope.xtime, $scope.tooltip_format) + '</p>'
}
}
}
};
And JSON data:
[{
"yAxis": 1,
"values": [{
"x": "1487939640000",
"y": "150"
}, {
"x": "1487939700000",
"y": "150"
}, {
"x": "1487939760000",
"y": "150"
}, {
"x": "1487939820000",
"y": "151"
}, {
"x": "1487939880000",
"y": "151"
}, {
"x": "1487939940000",
"y": "151"
}, {
"x": "1487940000000",
"y": "151"
}, {
"x": "1487940060000",
"y": "151"
}, {
"x": "1487940660000",
"y": "168"
}, {
"x": "1487940720000",
"y": "169"
}, {
"x": "1487940840000",
"y": "165"
}, {
"x": "1487942100000",
"y": "165"
}, {
"x": "1487942160000",
"y": "165"
}, {
"x": "1487942220000",
"y": "154"
}, {
"x": "1487942280000",
"y": "165"
}, {
"x": "1487942340000",
"y": "165"
}, {
"x": "1487942400000",
"y": "165"
}, {
"x": "1487942460000",
"y": "165"
}, {
"x": "1487942520000",
"y": "165"
}, {
"x": "1487942580000",
"y": "165"
}, {
"x": "1487942640000",
"y": "165"
}, {
"x": "1487942700000",
"y": "165"
}],
"type": "line",
"key": "PVVoltage"
}, {
"yAxis": 2,
"values": [{
"x": "1487939640000",
"y": "4"
}, {
"x": "1487939700000",
"y": "4"
}, {
"x": "1487939760000",
"y": "2.3"
}, {
"x": "1487939820000",
"y": "2.1"
}, {
"x": "1487939880000",
"y": "1.6"
}, {
"x": "1487939940000",
"y": "1"
}, {
"x": "1487940000000",
"y": "1.5"
}, {
"x": "1487940060000",
"y": "0.1"
}, {
"x": "1487940660000",
"y": "3.5"
}, {
"x": "1487940720000",
"y": "0.1"
}, {
"x": "1487940840000",
"y": "0.5"
}, {
"x": "1487942100000",
"y": "2"
}, {
"x": "1487942160000",
"y": "0.2"
}, {
"x": "1487942220000",
"y": "3.2"
}, {
"x": "1487942280000",
"y": "0"
}, {
"x": "1487942340000",
"y": "0"
}, {
"x": "1487942400000",
"y": "0"
}, {
"x": "1487942460000",
"y": "0"
}, {
"x": "1487942520000",
"y": "0.1"
}, {
"x": "1487942580000",
"y": "0.1"
}, {
"x": "1487942640000",
"y": "0"
}, {
"x": "1487942700000",
"y": "0"
}],
"type": "line",
"key": "PVCurrent"
}]
Expected graph should not have the curve in it as this is a line graph. I my case point has went right and again left and then up.
Anyone have any idea why this is happening? and how can I fix this.
I can't set a NVD3 multibarchart able to sort the bars by dates in the xAxis.
I'm aware the input data must be grouped by key before displaying it into a multibarchart.
Here a jsfiddle illustrating what I'm talking about: http://jsfiddle.net/fontanon/z4aZ4/54/
As you can see in the data variable, I've added three groups of bars (key1, key2 and key3). Each group has the x values sorted ascendently. The first bar of key2 should be the first (as for having the minimum x value), then the first bar of key1 followed by the second bar of key2, etc. But this is not how the bars are being displayed.
What is exactly happening?
Below the data.
var data = [
{
"key": "Key1",
"values": [
{
"x": 2393337532000,
"y": 1401431
},
{
"x": 4394337660000,
"y": 26188
},
{
"x": 7395510769000,
"y": 865575
},
]
},
{
"key": "Key2",
"values": [
{
"x": 1396337532000,
"y": 1401431
},
{
"x": 3397337660000,
"y": 26188
},
{
"x": 6398510769000,
"y": 865575
}
]
},
{
"key": "Key3",
"values": [
{
"x": 5399337532000,
"y": 1401431
},
{
"x": 8400337660000,
"y": 26188
},
{
"x": 9401510769000,
"y": 865575
}
]
}
]
Your data should be look like this
var data = [
{
"key": "Key1",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
},
{
"key": "Key2",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
},
{
"key": "Key3",
"values": [
{
"x": 7393337532000,
"y": 1401431
},
{
"x": 8394337660000,
"y": 26188
},
{
"x": 3398510769000,
"y": 865575
}
]
}
]
Currently d3.layout.stack calculates the stacked-Y value based on the layers or series given.
Now I would like to generate stacked layout by both "X" value and by series. Anyway I am having 2-dimensional array of equal size.
For eg if my given data is,
var layers = [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91},
{ "x": 1, "y": 290},
{ "x": 1, "y": 190},
{ "x": null, "y": null}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9},
{ "x": 1, "y": 49},
{ "x": 1, "y": 50},
{ "x": 2, "y": 220}
]
}
];
Here I have two layers ("apple","oranges"). My "x" values are [0,1,2];But If "X " values in the same layers looks same, then Y coordinate should be calculated based on the previous X value and series. Currently Y coordinate was calculated mapped by index.
Actual output for previous data:
var stacked_actual= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290, ,"y0":0},
{ "x": 1, "y": 190, ,"y0":0},
{ "x": null, "y": null, ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":290},
{ "x": 1, "y": 50,"y0":190},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Expected output for previous data:
var stacked_expected= [
{
"name": "apples",
"values": [
{ "x": 0, "y": 91,"y0":0},
{ "x": 1, "y": 290 ,"y0":0},
{ "x": 1, "y": 190,"y0":190},
{ "x": null, "y": null ,"y0":0}
]
},
{
"name": "oranges",
"values": [
{ "x": 0, "y": 9,"y0":91},
{ "x": 1, "y": 49,"y0":480},
{ "x": 1, "y": 50,"y0":520},
{ "x": 2, "y": 220,"y0":0}
]
}
];
Is there any way to achieve this model?
Pls check the reference image
enter link description here