I am plotting a graph which contains a lot of data.
96 plots a day and the user can fetch data for a maximum range of 62 days.
I am using Amcharts to implement the same.
I need to show the user a line against the highest value of the graph.
Can someone please help me if Amcharts provides a functionality to display the max value on the graph.
Because if it doesn't i would have to reiterate the entire object just to insert the max value in every json array which doesnt seem like a good idea.
Thanks
There's no need to iterate through all of the data. When the chart builds itself, it calculates min and max values for each value axis anyway. We can tap into those auto-calculated values and add a Guide for each of them.
We can use chart's "rendered" event to do it. When this event happens, we know that the chart is build and thus minimum and maximum values are calculated.
The value axis object will contain maxReal and minReal properties, which we will use. We will add a Guide for those values to indicate highest and lowest points.
Here's how the code looks for it:
chart.addListener( "rendered", function( event ) {
// get chart and value axis
var chart = event.chart;
var axis = chart.valueAxes[0];
// create max guide
var guide = new AmCharts.Guide();
guide.value = guide.label = axis.maxReal;
guide.lineAlpha = 0.2;
guide.lineThickness = 2;
guide.lineColor = guide.color = "#00cc00";
axis.addGuide( guide );
// create min guide
var guide = new AmCharts.Guide();
guide.value = guide.label = axis.minReal;
guide.lineAlpha = 0.2;
guide.lineThickness = 2;
guide.lineColor = guide.color = "#cc0000";
axis.addGuide( guide );
} );
And here's a a complete working code of the chart:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"path": "http://www.amcharts.com/lib/3/",
"dataProvider": [ {
"year": "1969",
"value": -0.011
}, {
"year": "1970",
"value": -0.068
}, {
"year": "1971",
"value": -0.19
}, {
"year": "1972",
"value": -0.056
}, {
"year": "1973",
"value": 0.077
}, {
"year": "1974",
"value": -0.213
}, {
"year": "1975",
"value": -0.17
}, {
"year": "1976",
"value": -0.254
}, {
"year": "1977",
"value": 0.019
}, {
"year": "1978",
"value": -0.063
}, {
"year": "1979",
"value": 0.05
}, {
"year": "1980",
"value": 0.077
}, {
"year": "1981",
"value": 0.12
}, {
"year": "1982",
"value": 0.011
}, {
"year": "1983",
"value": 0.177
}, {
"year": "1984",
"value": -0.021
}, {
"year": "1985",
"value": -0.037
}, {
"year": "1986",
"value": 0.03
}, {
"year": "1987",
"value": 0.179
}, {
"year": "1988",
"value": 0.18
}, {
"year": "1989",
"value": 0.104
}, {
"year": "1990",
"value": 0.255
}, {
"year": "1991",
"value": 0.21
}, {
"year": "1992",
"value": 0.065
}, {
"year": "1993",
"value": 0.11
}, {
"year": "1994",
"value": 0.172
}, {
"year": "1995",
"value": 0.269
}, {
"year": "1996",
"value": 0.141
}, {
"year": "1997",
"value": 0.353
}, {
"year": "1998",
"value": 0.548
}, {
"year": "1999",
"value": 0.298
}, {
"year": "2000",
"value": 0.267
}, {
"year": "2001",
"value": 0.411
}, {
"year": "2002",
"value": 0.462
}, {
"year": "2003",
"value": 0.47
}, {
"year": "2004",
"value": 0.445
}, {
"year": "2005",
"value": 0.47
} ],
"valueAxes": [ {
} ],
"graphs": [ {
"id": "g1",
"bullet": "round",
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"valueField": "value",
"bulletField": "bullet-g1",
"labelText": "[[label-g1]]"
} ],
"chartCursor": {
"categoryBalloonDateFormat": "YYYY",
"zoomable": false
},
"dataDateFormat": "YYYY",
"categoryField": "year",
"categoryAxis": {
"minPeriod": "YYYY",
"parseDates": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
} );
chart.addListener( "rendered", function( event ) {
// get chart and value axis
var chart = event.chart;
var axis = chart.valueAxes[0];
// create max guide
var guide = new AmCharts.Guide();
guide.value = guide.label = axis.maxReal;
guide.lineAlpha = 0.2;
guide.lineThickness = 2;
guide.lineColor = guide.color = "#00cc00";
axis.addGuide( guide );
// create min guide
var guide = new AmCharts.Guide();
guide.value = guide.label = axis.minReal;
guide.lineAlpha = 0.2;
guide.lineThickness = 2;
guide.lineColor = guide.color = "#cc0000";
axis.addGuide( guide );
} );
#chartdiv {
width: 100%;
height: 500px;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/serial.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
Related
I need to group (and show) labels of X axis of a grahp, but still showing all single labels.
This is the code I actually use, and its a normal column2d graph:
FusionCharts.ready(function() {
var myChart = new FusionCharts({
type: "column2d",
renderAt: "chart",
width: "100%",
height: "100%",
dataFormat: "json",
dataSource: {
"chart": {
"animation": 0,
"caption": "Graph title",
"xAxisName": "Performance",
"baseFontColor": "#000000",
},
"data": [
{
"label": "351-08",
"value": "91"
},
{
"label": "351-09",
"value": "90"
},
{
"label": "351-10",
"value": "94"
},
{
"label": "351-01",
"value": "99"
},
{
"label": "351-07",
"value": "92"
},
{
"label": "351-06",
"value": "81"
},
],
"trendlines": [
{
"line": [
{
"startvalue": "82",
"color": "#ff3333",
"thickness": "5",
"valueOnRight": "1",
"displayvalue": "Average"
}
]
}
]
}
}).render();
});
What I need is showing another label on X axis that groups labels.
For example:
Group 1: [label1, label2];
Group 2: [label3, label4, label5];
Group 3: [label6];
UPDATED
I attached an image of what I need.
As you can see I need another labels line ("Fattore1", "Fattore2" and "Fattore3") that group other labels.
I have a json similar to this one
{
"id": "1",
"month": "January",
"type": "inc",
"Value": "780.00",
"year": "2018",
},
{
"id": "2",
"month": "January",
"type": "inc",
"Value": "80.00",
"year": "2018",
},
{
"id": "3",
"month": "February",
"type": "inc",
"Value": "100.00",
"year": "2018",
},...
Now I need to get all the Value from the object for all the months, as you can see I may have more objects with the same month name. The closer I got to was creating 2 arrays 1 with the list of Months and 1 with the value but I got stuck, can someone lead me to the correct path?
The desired output would be to get an array like that ["January"=>1500, "February"=>2000...] or have 2 arrays, 1 with the list of months where there is income (I already have it) and the second the total income for these months, so it's like this: ["January", "February", "March"..] and the second one [1500, 2000, 300...]
You can use the function Array.prototype.reduce to sum each Value by month.
let arr = [{ "id": "1", "month": "January", "type": "inc", "Value": "780.00", "year": "2018", }, { "id": "2", "month": "January", "type": "inc", "Value": "80.00", "year": "2018", }, { "id": "3", "month": "February", "type": "inc", "Value": "100.00", "year": "2018", }],
result = arr.reduce((a, {month, Value}) => {
a[month] = (a[month] || 0) + +Value;
return a;
}, Object.create(null));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
I actually can barely understand what you would like to achieve. Please provide some example.
If I understood you correctly, you can use map function of js array to map each object to its Value.
let arr = [...];
console.log(arr.map(item => item.Value));
You can do
var fabuaryDate = yourdata
.filter(function(data) { return data.month == "February" })
.map(function(x){return {value: x.Value} })
To get result in following format :
{
jan : [1,2,3],
feb : [3,4,5,6],
april : [3,4,5]
}
do this :
var output = {}
arr.forEach(element => {
if(!output[element.month]){
output[month] = new Array();
}
output[month].push(element.value);
});
You can iterate the object and fill an array with the values of the field you want to extract, like so:
const data = [ {
"id": "1",
"month": "January",
"type": "inc",
"Value": 780.00,
"year": "2018",
},
{
"id": "2",
"month": "January",
"type": "inc",
"Value": 80.00,
"year": "2018",
},
{
"id": "3",
"month": "February",
"type": "inc",
"Value": 100.00,
"year": "2018",
}];
let dataArray = data.reduce((accum, d) => {
if(!accum[d.month]) accum[d.month] = 0;
accum[d.month] += d.Value;
return accum;
},{});
console.log(dataArray);
Although you don't seem to be clear enough with what have you tried here is an example of what you could do in order to read all the values inside the json.
function myFunction(item) {
console.log(item.month + " with the value " + item.Value)
}
var jsonArray = [{"id": "1","month": "January", "type": "inc", "Value": "780.00", "year": "2018" }, { "id": "2", "month": "January", "type": "inc", "Value": "80.00", "year": "2018" }, { "id": "3", "month": "February", "type": "inc", "Value": "100.00", "year": "2018" }];
jsonArray.forEach(myFunction);
Since you're working with an array of objects you must access to each of the objects in the array and then get the attribute that you require.
Hope this help, have a great day.
Is it possible to create an animation with D3.js (version 4)? In particular I want to create multiple line charts that "runs" from left to right like in this example with react-fusionchart:
http://jsfiddle.net/thadeuszlay/m18qaekm/12/
(just look at the example above.)
FusionCharts.ready(function () {
var myDataSource = {
"chart": {
"caption": "Actual Revenues, Targeted Revenues & Profits",
"subcaption": "Last year",
"xaxisname": "Month",
"yaxisname": "Amount (In USD)",
"numberprefix": "$",
"theme": "ocean"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "Projected Revenue",
"renderas": "line",
"showvalues": "0",
"data": [{
"value": "15000"
}, {
"value": "16000"
}, {
"value": "17000"
}, {
"value": "18000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "19000"
}, {
"value": "20000"
}, {
"value": "21000"
}, {
"value": "22000"
}, {
"value": "23000"
}]
}]
};
var chartConfigs = {
id: "revenue-profits-chart",
renderAt: "revenue-profits-chart-container",
type: "mscombi2d",
width: 600,
height: 400,
dataFormat: "json",
dataSource: myDataSource
};
React.render( < react_fc.FusionCharts {...chartConfigs
}
/>,
document.getElementById("chart-container")
);
});
Yes you can do that: you just need to replace the methods that have changed from d3 v3 to v4, such as:
var parse = d3.timeParse("%b %Y");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
xAxis = d3.axisBottom(x).tickSize(-height),
yAxis = d3.axisLeft(y).tickArguments(4);
Etc. Etc.
You can find the working example on my bl.ocks.
My example is the v4 update of another bl.ocks.
Hope that helps.
I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.
The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "2006",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "2005",
"renderas": "Area",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.
I have used "multilevelpie" chart .
As the data in the chart is less (say 10 or 1) ,the label names are merging with another.
I have attached the screenshot with the message ,please consider it and send me a solution
Kindly check the JsFiddle re-generated the issue.. & i have attached images also, Strange error
Js Fiddle example
FusionCharts.ready(function () {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id : "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor" : "#333333",
"baseFont" : "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor" : "#ffffff",
"canvasBgColor" : "#ffffff",
"showBorder" : "0",
"showShadow" : "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue"
},
"category": [
{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [
{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [
{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
},
{
"label": "Noodles",
"color": "#f8bd19",
"value": "19.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "0"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [
{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "62.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
{
"label": "Handbags",
"color": "#e44a00",
"value": "6.3"
},
{
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}
]
},
{
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [
{
"label": "Bath &{br}Grooming",
"color": "#008ee4",
"value": "9.45"
},
{
"label": "Feeding",
"color": "#008ee4",
"value": "16.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "76.75"
}
]
},
{
"label": "Electronics",
"color": "#33bdda",
"value": "30",
"category": [
{
"label": "Laptops",
"color": "#33bdda",
"value": "8.1"
},
{
"label": "Televisions",
"color": "#33bdda",
"value": "10.5"
},
{
"label": "SmartPhones",
"color": "#33bdda",
"value": "11.4"
}
]
}
]
}
]
}
});
topProductsChart.render();
});
Lets pin-point the concerns we have here:
Problem 1: If the dataValue is 0, there should be no label for it in the chart.
Solution: There might be a philosophy that how to get the context of a zero data and an absent data. Say if I have a category with 0 value, and I remove it from chart, how to set the context that there was at all a data. No matter what for the sake of this requirement, we might think of a dataRefiner() thats just refines out the zero and null data in the dataSource. :)
Problem2: Texts are overlapping.
Solution: Currently FusionCharts seems not to support overlapping management of texts in a ML pie chart. :'( But definitely I can walk through work-arounds that comes in my mind. Lets get our hands dirty!!!
Soultion 1: Attach a {br} tag to the label so that it breaks the line and accommodate in the arc. Not much useful in very thin slices.
Solution 2: Reduce the data labels font-size to an extent it just accommodates. Docs might be useful.
Solution 3: Access the internal graphic labels and rotate it.Word of caution: Accessing internal graphic elements has no official support from FusionCharts.
Creating a workaround accommodating some of the fixes mentioned avobe. This code is compatible with FC 3.11.0. Extending the support for:
enableSmartLabels
manageLabelOverflow
useEllipsesWhenOverflow
now even in MultiLevel Pie charts. This is a temporary and an approximate workaround until FusionCharts natively supports it.
Run the following snippet or play with the fiddle:
/*
Recursively removes the data containing falsy values.
#param data {Object} - The original data.
#return {Object} - The refined data.
*/
function dataRefiner(data) {
var i,
category = data.category,
len = category && category.length;
for (i = 0; i < len; i += 1) {
elem = category[i];
if (elem.category) {
dataRefiner(elem);
} else if (!Number(elem.value)) {
category.splice(i, 1);
i -= 1;
len -= 1;
}
}
return data;
}
var overlapManager = (function() {
return function(chartRef, dataSet) {
var jsonData = chartRef.getJSONData(),
chartAttrs = jsonData.chart;
if (Number(chartAttrs.enablesmartlabels) === 0 || Number(chartAttrs.managelabeloverflow) === 0) {
return;
}
/*
* Returns the point to point distance for two points.
* #return {Number}
*/
function dist_point(point1, point2) {
var math = Math;
return math.sqrt((math.pow((point1.x - point2.x), 2)) + (math.pow((point1.y - point2.y), 2)))
}
/*
* given a radius, center, and two ends of a chord.
* return: {
inner: Coordinate of the dipped point on the inner circle.
outer: coordinate of the dipped point on the outer circle.
}
*/
function give_dips(center_circle, angle, innerRadius, outerRadius) {
var math = Math,
res = {
inner: {},
outer: {}
},
getExtreme = function(radius) {
return {
x: center_circle.x + (radius * math.cos(angle)),
y: center_circle.y - (radius * math.sin(angle))
}
};
if (center_circle) {
res.inner = getExtreme(innerRadius);
res.outer = getExtreme(outerRadius);
}
return res;
}
/*
* Manages the overlapping of the texts in ML pie chart.
* #params: elem - {Object} - Internal store for the graphic and configurations.
* #params: chartRef - {Object} - The reference for the chart.
*/
function wrapText(elem, chartRef) {
var conf = elem && elem.config || {},
smartLabel = chartRef.jsVars.instanceAPI.linkedItems.smartLabel,
jsonData = chartRef.getJSONData(),
chart = jsonData.chart,
useEllipsesWhenOverflow = chart && !!Number(chart.useellipseswhenoverflow),
math = Math,
graphics = elem && elem.graphics,
ringpath = graphics.element && graphics.element.attr('ringpath') || [],
center_circle = {
x: ringpath[0],
y: ringpath[1]
},
innerRadius = ringpath[3],
outerRadius = ringpath[2],
strechAngle = conf.angleStrech,
angle = (2 * math.PI) - conf.startAngle - (strechAngle / 2),
dipPoints = give_dips(center_circle, angle, innerRadius, outerRadius),
center = {
x: (dipPoints.inner.x + dipPoints.outer.x) / 2,
y: (dipPoints.inner.y + dipPoints.outer.y) / 2
},
textObj,
radius = math.min(dist_point(center, center_circle) * math.sin(strechAngle / 2) - (conf.borderWidth || 0),
dist_point(center, dipPoints.inner)),
offset = radius * math.cos(math.PI / 4),
side = math.sqrt(2) * radius;
smartLabel.useEllipsesOnOverflow(useEllipsesWhenOverflow);
textObj = smartLabel.getSmartText(conf.displayValue, side, side);
if (graphics.label && graphics.label.getBBox().width > side) {
(innerRadius !== 0) && graphics.label
.attr({
text: textObj.text,
});
}
}
if (!dataSet) {
dataSet = chartRef.jsVars.instanceAPI.components.dataset[0];
}
var data = dataSet.components.data || [],
len = data.length,
i;
for (i = 0; i < len; i += 1) {
// recursively traverse the graphical objects.
overlapManager(chartRef, data[i]);
}
wrapText(dataSet, chartRef);
}
})();
FusionCharts.ready(function() {
topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '500',
height: '500',
dataFormat: 'json',
dataSource: dataRefiner(data),
events: {
"rendered": function(e, a) {
if (FusionCharts.version.join('.') !== '3.11.0') {
// It access the internal architechural properties of fusioncharts which might change in future release.
console.log('overlapManager() is a work around supported for FusionCharts 3.11.0 and might not work in this version.');
}
overlapManager(e.sender);
}
}
});
topProductsChart.render();
});
var topProductsChart,
data = {
"chart": {
"useEllipsesWhenOverflow": "1",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
}, {
"label": "Juice",
"color": "#f8bd19",
"value": "27.75"
}, {
"label": "Noodles",
"color": "#f8bd19",
"value": "19.99"
}, {
"label": "Seafood",
"color": "#f8bd19",
"value": "0"
}]
}, {
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "62.08"
}, {
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
}, {
"label": "Han",
"color": "#e44a00",
"value": "6.3"
}, {
"label": "Shoes",
"color": "#e44a00",
"value": "6.72"
}]
}, {
"label": "Baby {br}Products",
"color": "#008ee4",
"value": "22.5",
"category": [{
"label": "Bath & Grooming",
"color": "#008ee4",
"value": "9.45"
}, {
"label": "Feeding",
"color": "#008ee4",
"value": "16.3"
}, {
"label": "Diapers",
"color": "#008ee4",
"value": "76.75"
}]
}, {
"label": "Electronics",
"color": "#33bdda",
"value": "30",
"category": [{
"label": "Laptops",
"color": "#33bdda",
"value": "8.1"
}, {
"label": "Televisions",
"color": "#33bdda",
"value": "10.5"
}, {
"label": "SmartPhones",
"color": "#33bdda",
"value": "11.4"
}]
}]
}]
};
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!--
Sales by category shown using Multi-level Pie Chart.
-->
<div id="chart-container">FusionCharts will render here</div>
You might also refer to the fusion treeMap chart to represent the tree and hierarchal data.