"Line chart"
Bootstrap 4.1.1 Snippet by Ashikpolin

<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()

Related: See More


Questions / Comments: