highcharts

highcharts.js

  <script type="text/javascript">
	var chart = []; // globally available
	$(document).ready(function() {
      chart[0] = new Highcharts.Chart({
         chart: {
            renderTo: 'graphMonths',
            defaultSeriesType: 'column'
         },
         title: {
            text: ''
         },
         xAxis: {
			categories: ['Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec','Jan','Feb','Mar'
]

         },
         yAxis: {
			min: 0,
            title: {
               text: 'MegaWatt Hours Generated'
            }
         },
		legend: {
			enabled: false
		},
         series: [{
            name: 'MWh Generated',
            data: [310, 284, 391, 434, 459, 360, 123, 163, 154, 131, 154, 207, 284]
         }]
      });
	chart[1] = new Highcharts.Chart({
         chart: {
            renderTo: 'graphMTD',
            defaultSeriesType: 'column'
         },
         title: {
            text: ''
         },
         xAxis: {
			categories: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
			title: {
				text: 'March'
			}
         },
         yAxis: {
			min: 0,
            title: {
               text: 'KiloWatt Hours Generated'
            }
         },
		legend: {
			enabled: false
		},
         series: [{
            name: 'kWh Generated',
            data: [3084, 9581, 9058, 9422, 8551, 14230, 14068, 10925, 12814, 15783, 15026, 12172, 12326, 13463, 13140, 7256, 13776, 10418, 8059, 6931, 4379, 5249, 13548, 1682, 7952, 17018, 13610, 0, 0, 0, 0]
         }]
      });
	chart[2] = new Highcharts.Chart({
         chart: {
            renderTo: 'graphWeek',
            defaultSeriesType: 'column'
         },
         title: {
            text: ''
         },
         xAxis: {
			categories: ['03/20', '03/21', '03/22', '03/23', '03/24', '03/25', '03/26', '03/27']
         },
         yAxis: {
			min: 0,
            title: {
               text: 'KiloWatt Hours Generated'
            }
         },
		legend: {
			enabled: false
		},
         series: [{
            name: 'kWh Generated',
            data: [6931, 4379, 5249, 13548, 1682, 7952, 17018, 13610]
         }]
      });
	chart[3] = new Highcharts.Chart({
         chart: {
            renderTo: 'graphDay',
            defaultSeriesType: 'column'
         },
         title: {
            text: ''
         },
         xAxis: {
			categories: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23']
         },
         yAxis: {
			min: 0,
            title: {
               text: 'KiloWatt Hours Generated'
            }
         },
		legend: {
			enabled: false
		},
         series: [{
            name: 'kWh Generated',
            data: [-1, -1, -1, -1, -2, -1, -1, 155, 815, 1486, 1969, 2251, 2387, 2346, 2176, 34, 0, 0, 0, 0, 0, 0, 0, 0]
         }]
      });
   });
  </script>