Displaying rollover information in a fixed position div
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
<div id="balloon">--</div>
CSS
body {
font-family: Verdana;
font-size: 12px;
padding: 10px;
}
#chartdiv {
width : 100%;
height : 300px;
}
#balloon {
position: absolute;
top: 241px;
right: 39px;
background: #fff;
border: 1px solid #ccc;
opacity: 0.8;
padding: 5px;
font-size: 15px;
}
JavaScript
var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.2,
"dashLength": 1,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor":"#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "visits",
"useLineColorForBulletBorder":true
}],
"chartScrollbar": {
"autoGridCount": true,
"graph": "g1",
"scrollbarHeight": 40
},
"chartCursor": {
"cursorPosition": "mouse"
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
}
});
// generate some random data, quite different range
function generateChartData() {
var chartData = [];
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 5);
for (var i = 0; i < 1000; i++) {
// we create date objects here. In your data, you can have date strings
// and then set format of your dates using chart.dataDateFormat property,
// however when possible, use date objects, as this will speed up chart rendering.
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var visits = Math.round(Math.random() * (40 + i / 5)) + 20 + i;
chartData.push({
date: newDate,
visits: visits
});
}
return chartData;
}