Showing indicator while chart is loading
HTML
<script src="http://www.amcharts.com/lib/3/amcharts.js" type="text/javascript"></script>
<script src="http://www.amcharts.com/lib/3/serial.js" type="text/javascript"></script>
<div id="chartwrapper"
style="width: 400px;
height: 300px;
position: relative;
border: 1px solid #ccc;" >
<div id="chartcurtain"
style="width: 400px;
height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 100;
text-align: center;
line-height: 300px;
font-size: 20px;">
Loading chart...
</div>
<div id="chartdiv"
style="width: 400px;
height: 300px;
z-index: 50;"></div>
</div>
CSS
body
{
font-size:12px;
color:#000000;
background-color:#ffffff;
font-family:verdana,helvetica,arial,sans-serif;
}
JavaScript
var chart;
var chartData = [];
// generate some random data, quite different range
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var dataPoint = {
date: newDate
};
// generate values for 50 graphs
for (var c = 0; c < 100; c++) {
dataPoint['value'+c] = Math.round(Math.random() * 40) - 20;
}
chartData.push(dataPoint);
}
}
// creat chart
AmCharts.ready(function() {
// generate some data
generateChartData();
// SERIAL CHART
chart = new AmCharts.AmSerialChart();
chart.pathToImages = "http://www.amcharts.com/lib/3/images/";
chart.dataProvider = chartData;
chart.categoryField = "date";
// AXES
// category
var categoryAxis = chart.categoryAxis;
categoryAxis.labelsEnabled = false;
categoryAxis.ignoreAxisWidth = true;
categoryAxis.axisAlpha = 0;
// value
var valueAxis = new AmCharts.ValueAxis();
valueAxis.axisAlpha = 0;
valueAxis.dashLength = 1;
chart.addValueAxis(valueAxis);
// GRAPH
for (var c = 0; c < 100; c++) {
var graph = new AmCharts.AmGraph();
graph.valueField = "value"+c;
graph.bullet = "round";
graph.bulletBorderColor = "#FFFFFF";
graph.bulletBorderThickness = 2;
graph.lineThickness = 2;
graph.lineAlpha = 0.5;
graph.fillAlphas = 0.5;
graph.hideBulletsCount = 50; // this makes the chart to hide bullets when there are more than 50 series in selection
chart.addGraph(graph);
}
// let's add a listener to remove the loading indicator when the chart is
// done loading
chart.addListener("rendered", function (event) {
document.getElementById("chartcurtain").style.display =...