Getting selection on chart without zooming
HTML
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<div id="chartdiv"></div>
<input type="text" id="from" value="" placeholder="From" />
-
<input type="text" id="to" value="" placeholder="To" />
CSS
#chartdiv {
width : 100%;
height : 500px;
}
JavaScript
var chartData = generateChartData();
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataProvider": chartData,
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br /><b><span style='font-size:14px;'>value: [[value]]</span></b>",
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor":"#FFFFFF",
"hideBulletsCount": 50,
"title": "red line",
"valueField": "visits",
"useLineColorForBulletBorder":true
}],
"chartCursor": {
"cursorPosition": "mouse",
"selectWithoutZooming": true
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisColor": "#DADADA",
"dashLength": 1,
"minorGridEnabled": true
}
});
chart.addListener("rendered", function () {
chart.chartCursor.addListener("selected", function (event) {
console.log(event.start);
document.getElementById('from').value = new Date(event.start);
document.getElementById('to').value = new Date(event.end);
});
});
// 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;
}