Related
In am Charts, i have users list as category and duration (hh:mm:ss) in value axis graph. I had set grid count to 24 but, its not working as expected (1 hr * 24 steps). Its being set as 2000 secs steps. I tried changing a lot of parameter.
My sample data : https://live.amcharts.com/iMWNh/
Here, the duration split up is not working as expected in 1 hr split ups of 24 grids. My input data is in seconds.
Any advice ?
This helped me ! Hope someone finds it useful.
Hi,
Unfortunately, what you require would be impossible to implement using
Live Editor, due to some of its limitation.
However, it's possible using amCharts.
I have made necessary changes here:
https://codepen.io/team/amcharts/pen/55fe695a57e33657e9d5feb33423d481?editors=0010
AmCharts.useUTC = true;
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"categoryField": "category",
"rotate": true,
"startDuration": 1,
"backgroundAlpha": 0.8,
"categoryAxis": {
"gridPosition": "start"
},
"trendLines": [],
"graphs": [
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-1",
"title": "Online(secs)",
"type": "column",
"valueField": "Online(sec)"
},
{
"balloonText": "[[title]] of [[category]]:[[value]]",
"fillAlphas": 1,
"id": "AmGraph-2",
"title": "Offline(secs)",
"type": "column",
"valueField": "Offline(sec)"
}
],
"guides": [],
"valueAxes": [
{
"id": "ValueAxis-1",
"maximum": 86400000,
"stackType": "regular",
"strictMinMax": true,
"autoGridCount": false,
"autoRotateCount": 0,
"gridCount": 24,
"labelRotation": 50.4,
"title": "",
"titleRotation": 0,
"type": "date",
"minPeriod": "hh",
"boldPeriodBeginning": false,
"markPeriodChange": false
}
],
"allLabels": [],
"balloon": {},
"legend": {
"enabled": true,
"useGraphSettings": true
},
"titles": [
{
"id": "Title-1",
"size": 15,
"text": "Chart Title"
}
],
"dataProvider": [
{
"category": "Diana",
"Online(sec)": 7200000,
"Offline(sec)": 79200000
},
{
"category": "Clarke",
"Online(sec)": 18000000,
"Offline(sec)": 68400000
},
{
"category": "Bruce",
"Online(sec)": 3600000,
"Offline(sec)": 7200000
}
]
});
There were quite a few changes:
1) Remove the duration from value axis, and set its type: "date;
2) Make values in data non-string (remove quotes around them) and convert
to milliseconds, since JavaScript deals in milliseconds;
3) Similarly convert maximum in valueAxis to milliseconds as well;
4) Set the following two settings for valueAxis: (so that it does not try to
format the first hour differently)
"boldPeriodBeginning": false, "markPeriodChange": false
5) Finally, set AmCharts.useUTC = false before chart code. (this ensures that
timestamps are not being recalculated to local time zone)
I hope you find this useful.
Yours sincerely,
Martynas Majeris
amCharts
I have a gantt chart with a few minor tweaks but basically a clone of This gantt example with dates.
What I am trying to do is have a number of icons next to the segment based off some info included in the segment data. My case involves having 3 different binary variables and including different icons depending the values.
var chartData = [{
category: task.name,
segments: [
{
start: task.parallel ? lastStart : moment(latestEnd).format(string),
end: task.parallel ? moment(lastStart).add(time,'m').format(string) : moment(latestEnd).add(time,'m').format(string),
color: '#1C7DDB',
time: task.time,
indicator1: task.checkOne== 1 ? '../img/path_to_icon.svg' : '',
indicator2: task.checkTwo== 1 ? '../img/path_to_icon2.svg' : '',
indicator3: task.checkThree== 1 ? '../img/path_to_icon3.svg': ''
}
]
},
...
}]
So far this works OK when I set the customeBullet to one of the variables:
However I want to be able to have the ability to have all 3 (or none) of the icons shown.
I think what I need to do is add the segment data first then add the icons as three graphs to the gantt with no visible line.
My current chart init code is here, I tried changing graph: {} to graphs: [] but that causes an error.
var chart = AmCharts.makeChart( "plannerChart", {
"type": "gantt",
"marginRight": 70,
"period": "DD",
"dataDateFormat": "YYYY-MM-DD HH:mm",
"columnWidth": 0.75,
"addClassNames": true,
"valueAxis": {
"type": "date",
"guides": [
{
"value": AmCharts.stringToDate( start, "YYYY-MM-DD HH:NN"),
"toValue": AmCharts.stringToDate( moment(start).add(timeWindow,'h').format('YYYY-MM-DD HH:mm'), "YYYY-MM-DD HH:NN"),
"lineAlpha": 0.2,
"lineColor": guideColor,
"lineThickness": 3,
"fillAlpha": 0.1,
"fillColor": guideColor,
"label": "Available time",
"inside": false
}
]
},
"brightnessStep": 7,
"graph": {
"fillAlphas": 1,
"lineAlpha": 1,
"bulletOffset": 25,
"bulletSize": 20,
"customBulletField": "indicator1",
"lineColor": "#0F238C",
"fillAlphas": 0.85,
"balloonText": "<b>Start</b>: [[start]]<br /><b>Finish</b>: [[end]]"
},
"rotate": true,
"categoryField": "category",
"segmentsField": "segments",
"colorField": "color",
"startDateField": "start",
"endDateField": "end",
"dataProvider": chartData,
"chartCursor": {
"cursorColor": "#0F238C",
"valueBalloonsEnabled": false,
"cursorAlpha": 0,
"valueLineAlpha": 0.5,
"valueLineBalloonEnabled": true,
"valueLineEnabled": true,
"zoomable": false,
"valueZoomable": false
},
} );
}
Any help appreciated!
M
This isn't possible in a Gantt chart as it only takes a single graph object, as you noticed when trying to use an array.
You can emulate a Gantt chart by making a multi-segmented floating bar chart, using the graph's openField property to simulate where the column starts. You can extend this to add your additional graph objects for your indicators and use a date-based valueAxis for your values (note that valueAxes require date objects or millisecond timestamps, so strings won't work) or use relative values like in the demo. Note that this is a little clunker than the Gantt chart in that you have to define multiple graph objects to simulate the segments on the same category.
I'm trying to trying to remove a small gap when I have a pie chart with a 100% slice.
I've tried to give it a outlineThickness of 0 but there is still a very small gap.
Here is an example.
var chart = AmCharts.makeChart( "chartdiv", {
"type": "pie",
"theme": "light",
"dataProvider": [ {
"country": "Lithuania",
"litres": 10
}],
"outlineThickness": 0,
"outlineAlpha": 1,
"valueField": "litres",
"titleField": "country",
"balloon":{
"fixedPosition":true
},
"export": {
"enabled": true
}
} );
The only way to work around this in current version is to apply the same color to outline as the slice itself. You can use outlineColor for that:
https://jsfiddle.net/s083cdpk/1/
Please note that this should be applies only if there's only one slice, as the same color will be applied to all slices if there are more.
This options should be used:
"outlineThickness": 1,
"outlineAlpha": 1,
"outlineColor": undefined
Example
I am using AmCharts to render a 3D pie chart inside a div and the width is set to 500px and the height is set to 246px. I have attached an image of what I am getting and the code to render the pie chart is below. I have tried every setting known to man and even reviewed the other answer here: Labels are cropped in drill-down pie chart (amCharts) however that answer does not work with mine. I have tried everything in that answer and the labels are still cropped within the DIV. I have bordered the DIV so you can see where it is. You can see the labels are on top of themselves and render outside the DIV as well. Any help would be appreciated as to how to create these pie charts to adhere to DIV sizing so they can be properly exported to images. Thanks.
IMAGE SHOWING CHART POOR LABEL RENDERING
var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
"type": "pie",
"theme": "light",
"colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
//autoMargins: false,
//marginTop: 60,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//pullOutRadius: 0,
fontSize: "12pt",
fontFamily: "Tahoma",
"dataProvider": [
{
"desc": "Consum Discr",
"FullBalloonDescription": "Consum Discr",
"value": 10.0
}, {
"desc": "Consum Stpls",
"FullBalloonDescription": "Consum Stpls",
"value": 0.0
}, {
"desc": "Energy",
"FullBalloonDescription": "Energy",
"value": 0.0
}, {
"desc": "Fincls",
"FullBalloonDescription": "Fincls",
"value": 0.0
}, {
"desc": "Hlth Care",
"FullBalloonDescription": "Hlth Care",
"value": 0.0
}, {
"desc": "Industrials",
"FullBalloonDescription": "Industrials",
"value": 0.0
}, {
"desc": "Info Tech",
"FullBalloonDescription": "Info Tech",
"value": 63.0
}, {
"desc": "Materials",
"FullBalloonDescription": "Materials",
"value": 0.0
}, {
"desc": "Telecom Srv",
"FullBalloonDescription": "Telecom Srv",
"value": 27
}, {
"desc": "Other",
"FullBalloonDescription": "Other",
"value": 0.0
}
],
showZeroSlices: true,
percentPrecision: 0,
labelRadius: 5,
"radius": "40%",
"startAngle": 55,
"maxLabelWidth": 100,
"innerRadius": "0%",
"valueField": "value",
"titleField": "desc",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 55,
"export": {
"enabled": true,
"libs": {
"path": "/Scripts/amcharts/plugins/export/libs/"
},
"menu": []
}
});
The issue is that you seemingly have a lot of zero-value labels in the middle of the pie chart. I'm not sure what fuzzy logic would need to be implemented in the chart to accommodate for such large number of labels crammed together to be displayed nicely.
The common sense dictates that such no-value slices, if you insist of displaying labels for no-value slices, is to put them at the very end.
amCharts has a logic to handle large amount of labels that come at the end, by dividing alignment equally to left and right.
Also, the auto-wrapping of labels is thrown off if you use string-based "12pt" in fontSize. The parameter expects an integer in pixels. I.e.: fontSize: 15.
You could also increase maxLabelWidth so the wrapping of labels does not occur unless absolutely necessary. It seems to me that your vertical space is much more scarce than the horizontal.
And finally, to drive this one home, I suggest you shift your whole pie chart lower off the center, to accommodate for a large number of labels piling on top.
To do that use pieY property.
The default is "50%" or dead-on center of your plot area. Set it to larger number to place it lower. I.e. "65%".
Here's how your chart looks like with all of the above applied:
And here's a live example with all of the changes:
var summaryStockHoldingsPieChart = AmCharts.makeChart("reportingSummaryStockHoldingsPieDiv", {
"type": "pie",
"theme": "light",
"colors": ["#FFFF00", "#808000", "#ADFF2F", "#9ACD32", "#BDB76B", "#F0E68C", "#FFDAB9", "#FAFAD2", "#FFEFD5", "#666600"],
//autoMargins: false,
//marginTop: 60,
//marginBottom: 0,
//marginLeft: 0,
//marginRight: 0,
//pullOutRadius: 0,
fontSize: "12pt",
fontFamily: "Tahoma",
"pieY": "65%",
"dataProvider": [{
"desc": "Consum Discr",
"FullBalloonDescription": "Consum Discr",
"value": 10.0
}, {
"desc": "Info Tech",
"FullBalloonDescription": "Info Tech",
"value": 63.0
}, {
"desc": "Telecom Srv",
"FullBalloonDescription": "Telecom Srv",
"value": 27
}, {
"desc": "Consum Stpls",
"FullBalloonDescription": "Consum Stpls",
"value": 0.0
}, {
"desc": "Energy",
"FullBalloonDescription": "Energy",
"value": 0.0
}, {
"desc": "Fincls",
"FullBalloonDescription": "Fincls",
"value": 0.0
}, {
"desc": "Hlth Care",
"FullBalloonDescription": "Hlth Care",
"value": 0.0
}, {
"desc": "Industrials",
"FullBalloonDescription": "Industrials",
"value": 0.0
}, {
"desc": "Materials",
"FullBalloonDescription": "Materials",
"value": 0.0
}, {
"desc": "Other",
"FullBalloonDescription": "Other",
"value": 0.0
}],
showZeroSlices: true,
percentPrecision: 0,
labelRadius: 5,
"radius": "40%",
//"startAngle": 55,
"maxLabelWidth": 150,
"innerRadius": "0%",
"valueField": "value",
"titleField": "desc",
"outlineAlpha": 0.4,
"depth3D": 15,
"balloonText": "[[FullBalloonDescription]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>",
"angle": 55,
"export": {
"enabled": true,
"libs": {
"path": "/Scripts/amcharts/plugins/export/libs/"
},
"menu": []
}
});
#reportingSummaryStockHoldingsPieDiv {
width: 500px;
height: 246px;
border: 1px solid #ccc;
margin: auto;
}
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="reportingSummaryStockHoldingsPieDiv"></div>
I am drawing a intractive graph using amcharts. I want to draw several line graphs in one single graph. But my code draw only one graph. When I add code for second line graph , it did not show anything due to error. How I can add second line graph in it. Here is .js file.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "100",
"value": 10
}, {
"D": "200",
"value": 20
}, {
"D": "200",
"value": 30
}, {
"D": "400",
"value": 40
}, {
"D": "500",
"value": 50
}],
"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"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}
I found a solution. If you want to plot more linegraphs in one single graph. Just add extra id' in "graph": and add extra valueField inside that id. And add needed points in "dataProvider":. Similarly you can do this for more than 2 graphs by adding ids inside "graph":. And save it with .js extension.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"D": "5",
"value":0.30,
"value1":0.5,
}, {
"D": "10",
"value": 0.29,
"value1":0.27,
}, {
"D": "15",
"value": 0.28,
"value1":0.20,
}, {
"D": "20",
"value": 0.27,
"value1":0.32,
}, {
"D": "25",
"value": 0.26,
"value1":0.25,
}],
"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",
"title": "redpoint",
"valueField": "value"
}, {
"id":"g2",
"balloonText": "[[category]]<br><b><span style='font-size:14px;> [value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#20acd4",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"title": "bluepoint",
"valueField": "value1"
}],
"chartCursor": { /* required for zoom effect */
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
/*legend show points value on top*/
"legend": {
"useGraphSettings": true,
"position": "top"
},
/*show x axis values on graph*/
"categoryField": "D",
});
chart.addListener("rendered", zoomChart);/*zoom effect*/
if(chart.zoomChart){
chart.zoomChart();
}
function zoomChart(){
chart.zoomToIndexes(Math.round(chart.dataProvider.length * 0.4), Math.round(chart.dataProvider.length * 0.55));
}