Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div  style="height: 360px; width: 50%; float: left;">
  DIV LIKE MY LAYOUT
</div>
<div id="chartContainer" style="height: 360px; width: 50%;"></div>
<div id="chartContainer1" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
 axisX: {
  	title: "Latitude"
  },
   axisY: {
  	title: "Longitude"
  },
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 10, y: 10 },
        { x: 20, y: 30 },
        { x: 30, y: 30 },
        { x: 30, y: 25 },
        { x: 45, y: 20 },
        { x: 40, y: 60 },
        { x: 45, y: 60 },
        { x: 55, y: 15 },
        { x: 10, y: 10 }
      ]
    }					
  ]
});
var chart1 = new CanvasJS.Chart("chartContainer1", {
  data: [
    {
      type: "line",
      dataPoints: [
        { x: 1100, y: 12, z: {latitude: 30, logitude: 30}},
        { x: 1200, y: 150, z: {latitude: 30, logitude: 25}},
        { x: 1300, y: 77, z: {latitude: 40, logitude: 60}},
        { x: 1400, y: 33, z: {latitude: 55, logitude: 15}},
        { x: 1500, y: 55, z: {latitude: 10, logitude: 10}},
        { x: 1600, y: 88, z: {latitude: 45, logitude: 20}},
        { x: 1700, y: 99, z: {latitude: 20, logitude: 30}},
        { x: 1800, y: 14, z: {latitude: 45, logitude: 60}},
        { x: 1900, y: 13, z: {latitude: 10, logitude: 10}}
      ]
    }					
  ]
});

chart.render();
chart1.render();