Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

JavaScript

<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script type="text/javascript">
    window.onload = function() {
	var f1dataPoints1 = [],f1dataPoints2 = [],f1dataPoints3 = [],f1dataPoints4 = [],f1dataPoints5 = [],f1dataPoints6 = [],f1dataPoints7 = [];
	var f1_chart = new CanvasJS.Chart("chartContainer_f1", {
	  animationEnabled: true,
	  toolTip: {
		shared: true
	  },
	  zoomEnabled: true,
	  zoomType: "xy",
	  //theme: "light2", // "light1", "light2", "dark1", "dark2"
//	  exportEnabled: true,
	  interactivityEnabled: true,
	  title: {
	    text: "Charts",
	    fontWeight: "normal",
	    fontSize: 30,
	    fontFamily: "calibri",
	  },
	  subtitles: [{
	    text: "Chart subtitle",
//	    fontWeight: "bold",
	    fontColor: "red",
	    fontSize: 15,
	    fontFamily: "calibri",
	  }],
	  axisX: [
		{
	    		interval: 3,
	    		labelAngle: -90,
			labelFontSize: 15,
			crosshair: {
                                enabled: true,
                                snapToDataPoint: true
                        }
		}],
	  axisY: [
		{
			titleFontSize: 24,
			labelFontSize: 15
		}],
	  legend: {
            cursor: "pointer",
            itemclick: function (e) {
                //console.log("legend click: " + e.dataPointIndex);
                //console.log(e);
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }

                e.chart.render();
            },
            fontSize : 20
          },
	  data: [
	    {
	      type: "spline",
	      showInLegend: true,
	      dataPoints: f1dataPoints1
	    },
	    {
	      type: "spline",
	      showInLegend: true,
	     ...