Struggling to make these charts work properly and not finding a solution. Attempting to integrate amcharts into a web application, I managed to display the charts but encountered errors. When setting the div width to a percentage, the chart only appears after resizing the browser window or pressing F12. If set to a fixed pixel width, the chart renders initially but with cut off axis labels. A Google search mentioned issues with rendering within a hidden div, although mine is not concealed. Uncertain how to ensure the page has loaded before rendering the chart via JavaScript.
getSecondChart: function (demoChart3) {
var chart;
var chartData = [{
"year": 2009,
"income": 23.5
}, {
"year": 2010,
"income": 26.2
}, {
"year": 2011,
"income": 30.1
}, {
"year": 2012,
"income": 29.5
}, {
"year": 2013,
"income": 30.6
}, {
"year": 2014,
"income": 34.1
}
];
AmCharts.ready(function () {
// SERIAL CHART
var chart = new AmCharts.AmSerialChart();
chart.dataProvider = chartData;
chart.categoryField = "year";
chart.startDuration = 2;
// change balloon text color
chart.balloon.color = "#000000";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.gridPosition = "start";
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
chart.addValueAxis(valueAxis);
// GRAPHS
// column graph
var graph1 = new AmCharts.AmGraph();
graph1.type = "column";
graph1.title = "Income";
graph1.lineColor = "#FF6600";
graph1.valueField = "income";
graph1.lineAlpha = 1;
graph1.fillAlphas = 1;
graph1.dashLengthField = "dashLengthColumn";
graph1.alphaField = "alpha";
graph1.balloonText = "<span style='font-size:13px;'>[[title]] in [[category]]:<b>[[value]]</b> [[additional]]</span>";
chart.addGraph(graph1);
// WRITE
chart.write("demoChart3");
})
}
html
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:false">
<div id="demoChart3" style="width: 80%; height:342px;"></div>
</div>
Also utilizing dojo which didn't meet my chart appearance preferences, hence the switch to amcharts. The chart function is called within the initial loading function:
renderChart = function () {
myhomeModule.getSecondChart("demoChart3");
}