I am trying to get data from json with Leaflet.
I am using Leaflet Data visualization framework.
I want to use ajax, because in future I want to generate random numbers in my data properties (something like Math.random() in time intervals)
What I have already tried
I downloaded Leaflet-ajax plugin, included it in header.
When i use something like that:
new L.geoJSON.ajax
I can't see any of my markers on map. I do not get any errors in this case.
Data, stored in data.js (this file is included in header):
var geojsonred = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"name": "1",
"value": 20 //I want to replace this with Math.random()
},
"geometry": {
"type": "Point",
"coordinates": [315, -360]
}
},
{
"type": "Feature",
"properties": {
"name": "2",
"value": 50 //I want to replace this with Math.random()
},
"geometry": {
"type": "Point",
"coordinates": [360, -360]
}
}
]
}
This is how my script looks like:
var minHue = 120;
var maxHue = 0;
//var marker = new L.RadialMeterMarker(new L.LatLng(-360, 320), meterMarkerOptions);
var marker = new L.geoJSON(geojsonred, {
pointToLayer: function(feature, latlng) {
return new L.RadialMeterMarker(latlng, {
data: {
'Speed': feature.properties.value
},
chartOptions: {
'Speed': {
displayName: 'Speed',
displayText: function (value) {
return value.toFixed(1);
},
color: 'hsl(240,100%,55%)',
fillColor: 'hsl(240,80%,55%)',
maxValue: 200,
minValue: 0
}
},
displayOptions: {
'Speed': {
color: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '25%'}),
fillColor: new L.HSLHueFunction(new L.Point(0,minHue), new L.Point(200,maxHue), {outputSaturation: '100%', outputLuminosity: '50%'})
}
},
fillOpacity: 0.8,
opacity: 1,
weight: 0.5,
radius: 20,
barThickness: 15,
maxDegrees: 360,
rotation: 0,
numSegments: 10
});
},
});
marker.addTo(map);
Do someone have any idea?
Related
I am using amCharts stock chart to show trades within a period of time. I am using php and ajax to get values.
Now I do have period selector as buttons but I need them as a select. When a user selects a value from dropdown, the chart zoom should change accordingly. Is it possible to do that?
Below is my code to get a stock chart. Please help.
<div id="chartdiv" style="width:100%; height:400px;"></div>
<select id="mySelect" onchange="test()">
<option value="5">5
<option value="15">15
<option value="30">30
<option value="60">1H
<option value="D">1D
</select>
<script type="text/javascript">
AmCharts.addInitHandler(function (chart) {
}, ["stock"]);
var chartData = generateChartData();
console.log(chartData);
var chart = AmCharts.makeChart("chartdiv", {
"type": "stock",
"theme": "light",
"autoMarginOffset": 30,
"valueAxesSettings": {
"position": "right",
"inside": false,
"autoMargins": true,
"axisColor": "#000000",
"tickLength": 1
},
"categoryAxesSettings": {
"parseDates": true,
"minPeriod": "ss",
"axisColor": "#000000",
"tickLength": 1
},
"mouseWheelZoomEnabled": true,
"dataSets": [{
"fieldMappings": [{
"fromField": "open",
"toField": "open"
}, {
"fromField": "close",
"toField": "close"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "volume",
"toField": "volume"
}],
"color": "#7f8da9",
"dataProvider": chartData,
"title": '<?php echo $symbol; ?>',
"categoryField": "date"
}
],
"panels": [{
"urlTarget": "_blank",
"showCategoryAxis": true,
"percentHeight": 70,
"valueAxes": [{
"dashLength": 5
}],
"categoryAxis": {
"dashLength": 5
},
"stockGraphs": [{
"id": "g1",
"type": "candlestick",
"proCandlesticks": false,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"openField": "open",
"closeField": "close",
"highField": "high",
"lowField": "low",
"lineAlpha": 1,
"lineColor": "#53b987",
"fillColors": "#53b987",
"fillAlphas": 0.9,
"negativeFillColors": "#eb4d5c",
"negativeLineColor": "#eb4d5c",
"useDataSetColors": false,
"title": "Volume:",
"valueField": "volume"
}],
"stockLegend": {
"valueTextRegular": undefined,
"periodValueTextComparing": "[[percents.value.close]]%"
}
}
],
"chartScrollbarSettings": {
"updateOnReleaseOnly": true,
"autoGridCount": true,
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periodsText": "",
"dateFormat": "YYYY-MM-DD JJ:NN",
"periods": [{
"period": "hh",
"count": 1,
"label": "5",
"selected": true
}, {
"period": "hh",
"count": 6,
"label": "15"
}, {
"period": "hh",
"count": 4,
"label": "30"
}, {
"period": "hh",
"count": 12,
"label": "1H"
}, {
"period": "dd",
"count": 60,
"label": "1D"
}]
},
"listeners": [
{
"event": "rendered",
"method": function (e) {
if (e.chart.ignoreResize) {
e.chart.ignoreResize = false;
return;
}
// init
var margins = {
"left": 0,
"right": 0
};
// iterate thorugh all of the panels
for (var p = 0; p < chart.panels.length; p++) {
var panel = chart.panels[p];
// iterate through all of the axis
for (var i = 0; i < panel.valueAxes.length; i++) {
var axis = panel.valueAxes[i];
if (axis.inside !== false) {
continue;
}
var axisWidth = axis.getBBox().width + 10;
if (axisWidth > margins[axis.position]) {
margins[axis.position] = axisWidth;
}
}
}
// set margins
if (margins.left || margins.right) {
chart.panelsSettings.marginLeft = margins.left;
chart.panelsSettings.marginRight = margins.right;
e.chart.ignoreResize = true;
chart.invalidateSize();
}
}
},
{
"event": "zoomed",
"method": function (e) {
e.chart.lastZoomed = e;
//console.log(e);
console.log("ignoring zoomed");
}
},
]
});
setInterval(function () {
//Setting the new data to the graph
chart.dataProvider = generateChartData();
chart.validateData();
}, 10000);
function test() {
var resolution = $("#mySelect").val();
//console.log(resolution);
var pp, count;
if (resolution == "D") {
resolution = "1D";
pp = 'dd';
count = 60;
}
else if (resolution == "60") {
resolution = "1H";
pp = 'hh';
count = 12;
}
else if (resolution == "30") {
pp = 'hh';
count = 4;
}
else if (resolution == "15") {
pp = 'hh';
count = 6;
}
else if (resolution == "5") {
pp = 'hh';
count = 1;
}
else {
pp = 'hh';
}
//console.log(pp);
for (var x in chart.periodSelector.periods) {
var period = chart.periodSelector.periods[x];
if (pp == period.period && resolution == period.count) {
period.selected = true;
}
else {
period.selected = false;
}
}
// console.log(period.period);
chart.periodSelector.setDefaultPeriod();
}
</script>
How can I add background color to valueAxes guides label?
Seems like there is no options that we can set or I just really dont know what it is.
This is current setup that I have in amcharts
$chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataProvider": $data_trade,
"valueAxes": [ {
"position": "right",
"guides": [ {
"value": $tickValue,
"label": $tickValue,
"position": "right",
"dashLength": 0,
"axisThickness": 1,
"fillColor": "#000",
"axisAlpha": 1,
"fillAlpha": 1,
"color": "#000",
"fontSize": 16,
"backgroundColor": "#008D00",
"labelColorField": "red",
},
],
} ],
../
} );
please see image for reference
image-screenshot
Im new here, I hope I can get help
Thanks
There isn't a built-in way to do this currently but you can use the same technique in this demo to create a colored box around your label in the drawn event by changing the selector to .amcharts-axis-label.amcharts-guide to target the guide label and apply your color there. Note that the demo doesn't set individual colors, but the drawn event gives you access to the chart object if you want to pull the color from your custom backgroundColor properties:
AmCharts.makeChart("...", {
// ...
"valueAxes": [{
// ...
"guides": [{
"value": 4.5,
"label": "4.5",
"backgroundColor": "#22ff11" //custom property for drawn event
}, {
"value": 7.5,
"label": "7.5",
"backgroundColor": "#11ddff"
}]
}],
// ...
"listeners": [{
"event": "drawn",
"method": addLabelBoxes
}]
});
function addLabelBoxes(event) {
var labels = document.querySelectorAll(".amcharts-axis-label.amcharts-guide");
Array.prototype.forEach.call(labels, function(label, i) {
var parent = label.parentNode;
var labelText = label.childNodes[0].textContent; //get guide label from SVG
var svgRect = label.getBBox();
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
// find the matching guide label in the chart object
var guide = event.chart.valueAxes[0].guides.filter(function(guide) {
return guide.label == labelText;
});
rect.setAttribute("x", svgRect.x);
rect.setAttribute("y", svgRect.y);
rect.setAttribute("transform", label.getAttribute("transform"))
rect.setAttribute("width", svgRect.width);
rect.setAttribute("height", svgRect.height);
rect.setAttribute("fill", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#FFD32F")); //apply background from guide if it exists
rect.setAttribute("stroke", (guide && guide.length && guide[0].backgroundColor ? guide[0].backgroundColor : "#4857FF")); //same for the border
rect.setAttribute("opacity", 1);
parent.insertBefore(rect, label);
});
}
Demo
Updated
Can you possible graphs value dynamic.
Below code pass a static value but i get dynamic code graphs.
Example: resultx get 3-4 subcategory i every time define graphs value.
var processedChartData = resultx.map(function(rawDataElement) {
var newDataElement = { "category": rawDataElement.category };
rawDataElement.data.forEach(function(nestedElement, index) {
newDataElement["value" + index] = nestedElement.value;
newDataElement["subcategory" + index] = nestedElement.subcategory
});
return newDataElement;
});
AmCharts.makeChart(id, {
"type": "serial",
"theme": "light",
"categoryField": "category",
"rotate": false,
"startDuration": 0,
"categoryAxis": {
"gridPosition": "start",
"position": "left"
},
"graphs": [{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2004",
"type": "column",
"balloonText": "[[subcategory0]]: [[value]]",
"valueField": "value0"
}, {
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"balloonText": "[[subcategory1]]: [[value]]",
"valueField": "value1"
},
{
"fillAlphas": 0.9,
"lineAlpha": 0.2,
"title": "2005",
"type": "column",
"balloonText": "[[subcategory2]]: [[value]]",
"valueField": "value2",
}],
"guides": [],
"allLabels": [],
"balloon": {},
"titles": [],
"dataProvider": processedChartData,
"export": {
"enabled":false
}
});
Original question:
Clustered bar charts Array inside key how to display multiple bar charts.
My json below:
[
{
"0":
{
"package_sold":"88",
"vSectorName":"Meat"
},
"country":"France"
},
{
"0":
{
"package_sold":"68",
"vSectorName":"Meat"
},
"1":
{
"package_sold":"151",
"vSectorName":"Poultry"
},
"country":"United Kingdom"
}
]
How to show in graph dataProvider
AmCharts doesn't support nested JSON. You'll need to flatten your JSON into a single object so that your valueFields are distinct in each element of your array.
For example, this:
{
"0":
{
"package_sold":"68",
"vSectorName":"Meat"
},
"1":
{
"package_sold":"151",
"vSectorName":"Poultry"
},
"country":"United Kingdom"
}
can be turned into this:
{
"Meat_package_sold": 68,
"Poultry_package_sold": 151,
"country": "United Kingdom"
}
From there you can set your graph valueField to "Meat_package_sold" and "Poultry_package_sold". I'm assuming your categoryField is "country".
You'll either need to change your backend or write some some JS to remap your data to a format that AmCharts can recognize.
Edit: Here's a basic example that remaps your JSON data using JS:
var rawData = [{
"0": {
"package_sold": "88",
"vSectorName": "Meat"
},
"country": "France"
},
{
"0": {
"package_sold": "68",
"vSectorName": "Meat"
},
"1": {
"package_sold": "151",
"vSectorName": "Poultry"
},
"country": "United Kingdom"
}
]
var newData = [];
rawData.forEach(function(dataItem) {
var newDataItem = {};
Object.keys(dataItem).forEach(function(key) {
if (typeof dataItem[key] === "object") {
newDataItem[dataItem[key]["vSectorName"] + "_package_sold"] = dataItem[key]["package_sold"];
} else {
newDataItem[key] = dataItem[key];
}
});
newData.push(newDataItem);
});
console.log(JSON.stringify(newData));
Demo of your chart using the correct JSON format:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"categoryField": "country",
"graphs": [{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Meat_package_sold"
},
{
"fillAlphas": 0.8,
"lineAlpha": 0.2,
"type": "column",
"valueField": "Poultry_package_sold"
}
],
"dataProvider": [{
"Meat_package_sold": 88,
"country": "France",
}, {
"Meat_package_sold": 68,
"Poultry_package_sold": 151,
"country": "United Kingdom"
}, {
"Meat_package_sold": 120,
"Poultry_package_sold": 110,
"country": "Germany"
}]
});
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/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
This is dynamic json data, but to show how to use and build I defined it so.
In actual, i use ajax to get json data and then building it dynamically.
Here I had Generate Graph,GLName against its opening for each month comparatively. hope it will helpful for all
var resp=[
{
"MONTH_": "01",
"MONTH_NAME": "JAN",
"YEAR_": "2018",
"GL_NAME": "CASH,FACTORY, SITE,OFFICE ",
"GL_ID": "79,81,522,89",
"OPENING": "606294,0,24851,170392",
"RECEIPT": "1641300,40000,210850,82300",
"PAYMENT": "2074921,103209,168893,40000",
"CLOSING": "172673,149483,66808,0"
},
{
"MONTH_": "02",
"MONTH_NAME": "FEB",
"YEAR_": "2018",
"GL_NAME": " SITE,CASH,OFFICE ,FACTORY",
"GL_ID": "81,79,522,89",
"OPENING": "66808,172673,0,149483",
"RECEIPT": "102650,40000,3479000,200000",
"PAYMENT": "239379,168339,40000,3388527",
"CLOSING": "-69921,0,181144,263146"
},
{
"MONTH_": "03",
"MONTH_NAME": "MAR",
"YEAR_": "2018",
"GL_NAME": "FACTORY,CASH,OFFICE , SITE",
"GL_ID": "89,81,79,522",
"OPENING": "181144,-69921,0,263146",
"RECEIPT": "30000,40000,1943500,200000",
"PAYMENT": "69242,1806551,18177",
"CLOSING": "141902,400095,40000,111902"
}
]
var newChartDataArr = [];
var colNameArr = [];
var GLID = [];
var amtArr = [];
var newBarGraph = [];
myJsonString1 = JSON.stringify(resp);
var obj = JSON.parse(myJsonString1);
var obj1 = resp[0];
//spliting of GLName
if (obj1.GL_NAME.toString().indexOf(',') != -1) {
colNameArr = obj1.GL_NAME.split(',');
GLID =obj1.GL_ID.split(',');
} else {
colNameArr.push(obj1.GL_NAME);
GLID =obj1.GL_ID.split(',');
}
//Getting Month and Opening of GL
$.each(resp, function (i, value) {
var newObj = {};
newObj['MONTH_NAME'] = value.MONTH_NAME+"-"+value.YEAR_;
$.each(value, function (k, v) {
if (k == 'OPENING') {
for (var i = 0; i < colNameArr.length; i++) {
if (v.toString().indexOf(',') != -1) {
newObj[colNameArr[i]] = parseFloat(v.split(',')[i]);
} else {
newObj[colNameArr[i]] = parseFloat(v);
}
}
}
});
newChartDataArr.push(newObj); //GL with Opening
});
for (var i = 0; i < colNameArr.length; i++) {
let graph = {};
graph["id"] = "v-"+GLID[i];
graph["balloonText"] = colNameArr[i] + " [[category]] Amount:[[value]]",
graph["title"] = colNameArr[i];
graph["valueField"] = colNameArr[i];
graph["fillAlphas"] = 0.8;
graph["lineAlpha"] = 0.2;
graph["type"] = "column";
newBarGraph.push(graph);
}
chart = AmCharts.makeChart("Monthdiv", {
"type": "serial",
"theme": "light",
"categoryField": "MONTH_NAME",
"startDuration": 1,
"trendLines": [],
"legend": {
"position": "bottom",
"maxColumns": 2,
"useGraphSettings": true
},
"depth3D": 10,
"angle": 60,
"graphs": newBarGraph,
"guides": [],
"valueAxes": [
{
"position": "left",
"title": "Opening"
}
],
"categoryAxis": {
"gridPosition": "start",
"labelRotation": 90,
"title": "Months"
},
"allLabels": [],
"balloon": {},
"titles": [{
"text":"Monthly Sale"
}],
"dataProvider": newChartDataArr,
"export": {
"enabled": true
},
"listeners": [{
"event": "clickGraphItem",
"method": function (event) {
var gl_ID=(event.item.graph.id).slice(2);
var month = (event.item.category).slice(0, 3);
var calender = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
var monthVal = calender.indexOf(month) + 1;
var year = (event.item.category).slice(4, 8);
$("#fromDate").val("01/" + monthVal + "/" + year);
$("#toDate").val("30/" + monthVal + "/" + year);
Daliy(gl_ID,event.item.category);
showSummary();
}
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Resources -->
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div class="col-sm-12" id="Monthdiv" style="height: 370px;">
First question ever on the stack. Trying to get zoomToDates to work in amCharts I'm developing. I've tried the other solutions I could find to others' questions and nothing worked. So without further ado ...
Resources:
//www.amcharts.com/lib/3/amcharts.js
//www.amcharts.com/lib/3/serial.js
//www.amcharts.com/lib/3/amstock.js
//www.amcharts.com/lib/3/themes/black.js
//www.amcharts.com/lib/3/plugins/export/export.min.js
//www.amcharts.com/lib/3/plugins/export/export.css
//www.amcharts.com/lib/3/plugins/dataloader/dataloader.min.js
HTML:
<div id="$CHART$" style="width: 100%; height: 450px;"></div>
JS:
AmCharts.makeChart( "$CHART$", {
"type": "stock",
"theme": "black",
"categoryAxesSettings.equalSpacing": true,
"dataDateFormat":"YYYY-MM-DD",
"valueAxes": [ {
"position": "left",
} ],
"dataSets": [ {
"title": "Bond",
"fieldMappings": [ {
"fromField": "open",
"toField": "open"
}, {
"fromField": "high",
"toField": "high"
}, {
"fromField": "low",
"toField": "low"
}, {
"fromField": "close",
"toField": "close"
} ],
"dataLoader": {
"url": "removed for stackoverflow post"
},
"categoryField": "date"
},
],
panels: [ {
title: "Security",
percentHeight: 100,
stockGraphs: [ {
"valueField": "security",
"type": "candlestick",
"showBalloon": true,
"proCandlesticks": true,
"balloonText": "Open:<b>[[open]]</b><br>Low:<b>[[low]]</b><br>High:<b>[[high]]</b><br>Close:<b>[[close]]</b><br>",
"closeField": "close",
"fillColors": "#7f8da9",
"highField": "high",
"lineColor": "#7f8da9",
"lineAlpha": 1,
"lowField": "low",
"fillAlphas": 0.9,
"negativeFillColors": "#db4c3c",
"negativeLineColor": "#db4c3c",
"openField": "open",
} ],
stockLegend: {
periodValueTextRegular: "[[security.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true
},
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
event.chart.zoomToDates(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
});
Any help would be really appreciated. I've been working on this for too long to admit. Thanks.
It looks like you're using the AmCharts Wordpress plugin going by the $CHART idenfitier. The main issue is the syntax of your AmCharts.makeChart call - your addListener code is inside the config when it should be outside of the call entirely. You're also not referring to the actual chart instance, nor are you using the event argument correctly, for example:
var $CHART$ = AmCharts.makeChart("$CHART$", {
// ...
});
$CHART$.addListener("rendered", zoomChart);
function zoomChart(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
};
You also have to use zoom for stock charts as zoomToDates won't work.
Ideally, you should use the listeners array instead of addListener as you can sometimes run into timing issues where events like rendered can fire before you can call addListener:
AmCharts.makeChart("$CHART$", {
// all of your other config and data omitted
"listeners": [{
"event": "rendered",
"method": function(event) {
event.chart.zoom(new Date(2017, 10, 22), new Date(2017, 10, 25));
}
}]
});
I'm using a bar chart yo show what is selected in a pie chart. The pie chart has "groupPercent": 5, and I can't change this. The problem is that, when I select te "Other" slice of the pie, it shows all the data in the bar chart.
Can I show only what is included in "Other" slice?
Can I get this data in JSon type or something like that?
I think the solution is near the pullOutSlice listener:
chart.addListener("pullOutSlice", function (event) {
if (event.dataItem.dataContext.data != undefined) {
var skus = event.dataItem.dataContext.data;
Thanks!
Some code:
var chart = AmCharts.makeChart("resellersalespiechart", {
"type": "pie",
"theme": "light",
"dataProvider": chartData,
"valueField": "qty",
"titleField": "reseller",
"labelText": "[[title]]: [[value]]",
"pullOutOnlyOne": true,
"groupPercent": 5,
"groupedTitle": "Otros",
"legend": {
"position": "bottom",
"marginRight": 20,
"autoMargins": false
}
});
// create column chart
var chart2 = AmCharts.makeChart("resellersalesbarchart", {
"type": "serial",
"theme": "light",
"pathToImages": "/lib/3/images/",
"autoMargins": false,
"marginLeft": 30,
"marginRight": 8,
"marginTop": 10,
"marginBottom": 26,
"titles": [{
"text": "Todos los resellers"
}],
"dataProvider": collectiveData,
"startDuration": 1,
"graphs": [{
"title": "projects",
"type": "column",
"fillAlphas": 0.8,
"valueField": "qty",
"balloonText": "[[category]]: <b>[[value]]</b>"
}],
"categoryField": "sku",
"categoryAxis": {
"gridPosition": "start",
"autoGridCount": false,
"gridCount": 12,
"labelFunction": function (valueText, serialDataItem, categoryAxis) {
return valueText;
},
"fontSize": 9
},
"valueAxes": [{
"integersOnly": true,
"fontSize": 9,
"labelFunction": function (value, valueText, valueAxis) {
if (value >= 1000) {
return (value / 1000) + "K";
} else {
return valueText;
}
}
}]
});
chart.addListener("pullInSlice", function (event) {
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
});
Chart example:
Image of the different views of charts
It appears that there isn't a direct way to do this. You'll need to loop through your dataProvider and aggregate the elements whose calculated percent value is under the groupPercent threshold then aggregate each element's sub array into a dataProvider array for your bar chart. For example:
if (event.dataItem.dataContext.skus != undefined) {
chart1BarData = collectiveData;
chart1BarTitle = "Todos los resellers"
chart2.dataProvider = collectiveData;
chart2.titles[0].text = "Todos los resellers";
chart2.validateData();
chart2.animateAgain();
}
else {
var sum = event.chart.chartData.reduce(function(accumulator, dataElement) {
return accumulator + dataElement.value;
}, 0);
var groupedElements = [];
event.chart.dataProvider.forEach(function(dataElement) {
if ((dataElement[event.chart.valueField] / sum) * 100 < event.chart.groupPercent) {
groupedElements.push(dataElement);
}
});
//aggregate/build chart dataProvider and assign to chart2 here
}