<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="chartdiv"></div>
#chartdiv {
width: 100%;
height: 500px;
}
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart
var chart = am4core.create("chartdiv", am4charts.XYChart);
chart.paddingRight = 20;
chart.data = generateChartData();
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.baseInterval = {
"timeUnit": "minute",
"count": 1
};
dateAxis.tooltipDateFormat = "HH:mm, d MMMM";
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
valueAxis.tooltip.disabled = true;
valueAxis.title.text = "Unique visitors";
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.dateX = "date";
series.dataFields.valueY = "visits";
series.tooltipText = "Visits: [bold]{valueY}[/]";
series.fillOpacity = 0.3;
chart.cursor = new am4charts.XYCursor();
chart.cursor.lineY.opacity = 0;
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
dateAxis.start = 0.8;
dateAxis.keepSelection = true;
function generateChartData() {
var chartData = [];
// current date
var firstDate = new Date();
// now set 500 minutes back
firstDate.setMinutes(firstDate.getDate() - 500);
// and generate 500 data items
var visits = 500;
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
// each time we add one minute
newDate.setMinutes(newDate.getMinutes() + i);
// some random number
visits += Math.round((Math.random()<0.5?1:-1)*Math.random()*10);
// add data item to the array
chartData.push({
date: newDate,
visits: visits
});
}
return chartData;
}
}); // end am4core.ready()
