Develop Reference

How I can build multilevelpie graph without padding in FusionCharts JS?

I build FusionCharts multilevelpie graph. But huge indents appear.
500 x 500
With a decrease in space, the graph is greatly reduced.
padding 1
100% x 100%
When doing a full size chart, the indents become too large.
padding 2
When I reduce the space of the graph, the graph becomes too small.
My code:
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
width: '500',
height: '500',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "",
"subcaption": "",
"showPlotBorder": "1",
"piefillalpha": "60",
"pieborderthickness": "2",
"hoverfillcolor": "#CCCCCC",
"piebordercolor": "#FFFFFF",
"hoverfillcolor": "#CCCCCC",
"numberprefix": "#",
"plottooltext": "$label",
"theme": "fusion",
},
"category": {{ pie }},
}
}
);
fusioncharts.render();
});

You can adjust the size of the outer part of the pie using pieRadius attribute at the chart object level, take a look at this sample -
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"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",
"pieRadius": "170"
},
"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": "9.99"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.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": "6.3"
},
{
"label": "Diapers",
"color": "#008ee4",
"value": "6.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();
});
Here is a live demo - http://jsfiddle.net/cebu68vt/

Overlaying two AmCharts

I have one chart I want to build that has a scatter plot and then four lines. The four lines will be from a completely different dataset, with the same x min max and y min max but different structure. How can I create one chart with the fixed xmin xmax ymin ymax and then another and have one overlay the other.
Basically I want one chart with two completely different datasets that have the same domain and ranges AND keep the interactivity of both. I am trying the datasets an field mappings but haven't had much luck. I am not entirely sure I understand what the field mappings are doing. An example I found:
"dataSets": [ {
"title": "first data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData1,
"categoryField": "date"
}, {
"title": "second data set",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
}, {
"fromField": "volume",
"toField": "volume"
} ],
"dataProvider": chartData2,
"categoryField": "date"
}],
I am using dataloader for now, I am able to read in both datasets at one time with ajax as another option if I can do it all in one chart. So I am not sure how to use dataloader with this example either. So if someone knows how that may work that would be helpful as well.
Thanks!

You can use simple CSS to get that.
position: absolute, some positioning coordinates top & left, and dimentions width & height.
z-index to decide what would be on top of what.
And transparent background for both of them.
The rest is just configurations in the config JSON of the chart.
AmCharts.makeChart("chartdiv", {
"type": "serial",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"fillAlphas": 1,
"fillColors": "#4DCD11",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "graph 1",
"type": "column",
"valueField": "column-1"
},
{
"fillAlphas": 1,
"fillColors": "#070AB5",
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "graph 2",
"type": "column",
"valueField": "column-2"
}
],
"guides": [],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": 7
},
{
"category": "3",
"column-1": 2,
"column-2": 3
}
]
});
AmCharts.makeChart("chartdiv2", {
"type": "serial",
"theme": "light",
"autoMargins": false,
"marginBottom": 0,
"marginLeft": 0,
"marginRight": 0,
"marginTop": 0,
"categoryField": "category",
"startDuration": 1,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-1",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 1",
"type": "step",
"valueField": "column-1"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"id": "AmGraph-2",
"lineThickness": 6,
"noStepRisers": true,
"title": "graph 2",
"type": "step",
"valueField": "column-2"
}
],
"guides": [],
"valueAxes": [{
"id": "ValueAxis-1",
"title": " "
}],
"allLabels": [],
"balloon": {},
"titles": [{
"id": "Title-1",
"size": 15,
"text": " "
}],
"dataProvider": [{
"category": "1",
"column-1": 8,
"column-2": 5
},
{
"category": "2",
"column-1": 6,
"column-2": "2"
},
{
"category": "3",
"column-1": "7",
"column-2": 3
},
{
"category": "4",
"column-1": "9",
"column-2": 3
},
{
"category": "5",
"column-1": "7",
"column-2": 1
},
{
"category": "6",
"column-1": "8",
"column-2": 2
},
{
"category": "7",
"column-1": "7",
"column-2": "6"
}
]
});
#chartdiv,
#chartdiv2 {
position: absolute;
background-color: transparent;
}
#chartdiv {
z-index: 100;
top: 0;
left: 0;
width: 600px;
height: 400px
}
#chartdiv2 {
z-index: 120;
top: 120px;
left: 100px;
width: 400px;
height: 180px
}
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="chartdiv2"></div>

D3 should be able to handle that pretty easily. You can use d3.request (e.g. d3.json) to call the data (in separate requests if necessary). Then d3.scale to set your min/max values to defined points on an svg chart, then plot your scatter points/lines etc. to those points using the data requested.
Mess about with axes and tooltips for a bit and you should have a functional chart.

Timestamp in Amchart category axis showing as Undefined

I'm trying to show timestamp on the amchart category axis, but its showing as undefined in the chart. Here is the chart code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"date": 1492664639000,
"value": 10
}, {
"date": 1492664646000,
"value": 20
}, {
"date": 1492664653000,
"value": 20
}, {
"date": 1492664660000,
"value": 23
}, {
"date": 1492664667000,
"value": 35
}, {
"date": 1492664674000,
"value": 26
}, {
"date": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});
Here is a DEMO.

You use wrong key for reference. Try this. (Demo here: https://codepen.io/anon/pen/ZKQPJL)
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"timestamp": 1492664639000,
"value": 10
}, {
"timestamp": 1492664646000,
"value": 20
}, {
"timestamp": 1492664653000,
"value": 20
}, {
"timestamp": 1492664660000,
"value": 23
}, {
"timestamp": 1492664667000,
"value": 35
}, {
"timestamp": 1492664674000,
"value": 26
}, {
"timestamp": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[timestamp]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});

amCharts Serial Chart unable to display data after enabling data parsing "parseDates": true

I am using spring as webservice and JSON response after hitting is following:
[ {
"date": "2016-04-17",
"open": 1085.0,
"high": 1092.2,
"low": 1072.0,
"close": 1088.3,
"volume": 54100,
"value": 1088.3
}, {
"date": "2016-04-14",
"open": 1081.25,
"high": 1081.25,
"low": 1081.25,
"close": 1081.25,
"volume": 0,
"value": 1081.25
} ]
I am trying to create chart for stock analysis. When I set "parseDates": false graph showing data. But of course, date is not parsed. When I set parseDates to true it stops showing data.
Here's my JavaScript Code:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"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",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": false
},
"dataProvider": resp,
"export": {
"enabled": true,
"position": "top-right"
}
} );
chart.addListener( "rendered", zoomChart );
zoomChart();
function zoomChart() {
chart.zoomToIndexes( chart.dataProvider.length - 50, chart.dataProvider.length - 1 );
}

The data points on date-based chart must be ordered in ascending order. Oldest first, newest last. Looking at your data sample, it seems to be that they are in descending order.
To fix that simply call reverse() on your resp array:
resp.reverse();
Working demo:
/**
* Source data
*/
var resp = [ {
"date": "2016-04-17",
"open": 1085.0,
"high": 1092.2,
"low": 1072.0,
"close": 1088.3,
"volume": 54100,
"value": 1088.3
}, {
"date": "2016-04-14",
"open": 1081.25,
"high": 1081.25,
"low": 1081.25,
"close": 1081.25,
"volume": 0,
"value": 1081.25
} ];
/**
* Reverse array
*/
resp.reverse();
/**
* Create chart
*/
var chart = AmCharts.makeChart( "chartdiv", {
"type": "serial",
"theme": "light",
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [ {
"position": "left"
} ],
"graphs": [ {
"id": "g1",
"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",
"title": "Price:",
"type": "candlestick",
"valueField": "close"
} ],
"chartScrollbar": {
"graph": "g1",
"graphType": "line",
"scrollbarHeight": 30
},
"chartCursor": {
"valueLineEnabled": true,
"valueLineBalloonEnabled": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true
},
"dataProvider": resp,
"export": {
"enabled": true,
"position": "top-right"
}
} );
<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" style="height: 200px"></div>

Stacking data by hours AmCharts

Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});