CanvasJS HTML5 JavaScript Charts

CanvasJS HTML5 JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
<link rel="stylesheet" href="https://canvasjs.com/assets/css/jquery-ui.1.11.2.min.css">

<div id="tabs" style="height: 360px">
<ul>
<li><a href="#tabs-1" style="font-size: 12px">Spline</a></li>
<li><a href="#tabs-2" style="font-size: 12px">Spline Area</a></li>
</ul>
<div id="tabs-1" style="height: 300px">
<div id="chartContainer1" style="height: 300px; width: 100%;"></div>
</div>
<div id="tabs-2" style="height: 300px">
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
</div>
</div>
<script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery-ui.1.11.2.min.js"></script>
<script src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

CSS

.ui-tabs-anchor {
    outline: none;
  }

JavaScript

window.onload = function() {
var options1 = {
		title: {
		text: "HoF - Battlestats"
	},
	axisX: {
		labelFontSize: "14",
		valueFormatString: "DD MMM",
		interval: 1,
		crosshair: {
			enabled: true,
			snapToDataPoint: true,
			labelFormatter: function (e) {
				for(var i = 0;i<e.chart.data[0].dataPoints.length; i++ ){
					if(e.chart.data[0].dataPoints[i].x === e.value)
					return CanvasJS.formatDate(e.chart.data[0].dataPoints[i].x, "DD MMM") + ": " + e.chart.data[0].dataPoints[i].extraAttribute;				}
			}
		}
	},
	axisY: {
		labelFontSize: "14",
		title: "Rank",
		reversed:  true,
		includeZero: false,
		valueFormatString: "#,##0"
		
	},

	data: [{
		type: "spline", //change it to line, area, bar, pie, etc
		dataPoints: [
    						{ x: new Date(2019, 09, 05), y: 1575, extraAttribute: "3,555,246,051" },
                { x: new Date(2019, 09, 04), y: 1577, extraAttribute: "3,551,066,536" },
                { x: new Date(2019, 09, 03), y: 1578, extraAttribute: "3,548,462,501" },
                { x: new Date(2019, 09, 02), y: 1581, extraAttribute: "3,543,967,888" },
                { x: new Date(2019, 09, 01), y: 1582, extraAttribute: "3,539,736,296" },
                { x: new Date(2019, 08, 31), y: 1583, extraAttribute: "3,535,448,168" },
                { x: new Date(2019, 08, 30), y: 1584, extraAttribute: "3,530,941,237" },
                { x: new Date(2019, 08, 29), y: 1585, extraAttribute: "3,526,243,192" },
                { x: new Date(2019, 08, 28), y: 1586, extraAttribute: "3,522,076,266" },
                { x: new Date(2019, 08, 27), y: 1587, extraAttribute: "3,518,052,912" },
                { x: new Date(2019, 08, 26), y: 1587, extraAttribute: "3,514,570,539" },
                { x: new Date(2019, 08, 25), y: 1587, extraAttribute: "3,510,630,065" },
                { x: new Date(2019, 08, 24), y: 1587, extraAttribute: "3,507,663,891" },
                { x: new Date(2019, 08, 23), y: 1589, extraAttribute: "3,502,465,985" }
             ...