ankitkanojia/Sample.html

## Sample.html
<html>
   <body>
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/highcharts-more.js"></script>
      <script src="https://code.highcharts.com/modules/exporting.js"></script>
      <script src="https://code.highcharts.com/highcharts.js"></script>
      <script src="https://code.highcharts.com/highcharts-3d.js"></script>
      <script src="https://code.highcharts.com/modules/export-data.js"></script>
      <div id="container" style="height: 400px;width:500px"></></div>
      <br />
      <div>
         <select id="charttype">
            <option value="line">Show Line Chart</option>
            <option value="column">Show Column Chart</option>
         </select>
      </div>
      <br /><br />
      <button id="plain">Plain</button>
      <button id="inverted">Inverted</button>
      <button id="polar">Polar</button>
      <div id="containerp" style="height: 400px"></div>
      <script>
         var chart;
         var chartType;
         $(document).ready(function(){

         	 drawChart("line","plain");

         	$("#charttype").change(function(){
         		if($(this).val() === "line")
         		{
         			drawChart("line");
         		}else{
         			drawChart("column");
         		}
         	});

         	$("#plain").click(function() {
         		drawChart(chartType,"plain");
         	});

         	$("#inverted").click(function() {
         		drawChart(chartType,"inverted");
         	});

         	$("#polar").click(function() {
         		drawChart(chartType,"polar");
         	});
         });

         var drawChart = function(chartType, displayType){
         	chartType = chartType;
         	var plain = (displayType === "plain");
         	var inverted = (displayType === "inverted");
         	var polar = (displayType === "polar");

         	 Highcharts.chart('container', {
         		chart: {
         			type: chartType,
         			plotBorderColor: '#ccc',
         			plotBorderWidth: 2,
         			plain : plain,
         			inverted : inverted,
         			polar : polar
         		},
         		title: {
         			text: 'Monthly Average Rainfall'
         		},
         		subtitle: {
         			text: 'Source: WorldClimate.com'
         		},
         		series: [
         		{
         			name: 'Installation',
         			data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

         		}]
         	});
         }

      </script>
   </body>
</html>
	<html>
	<body>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/highcharts-more.js"></script>
	<script src="https://code.highcharts.com/modules/exporting.js"></script>
	<script src="https://code.highcharts.com/highcharts.js"></script>
	<script src="https://code.highcharts.com/highcharts-3d.js"></script>
	<script src="https://code.highcharts.com/modules/export-data.js"></script>
	<div id="container" style="height: 400px;width:500px"></></div>
	<br />
	<div>
	<select id="charttype">
	<option value="line">Show Line Chart</option>
	<option value="column">Show Column Chart</option>
	</select>
	</div>
	<br /><br />
	<button id="plain">Plain</button>
	<button id="inverted">Inverted</button>
	<button id="polar">Polar</button>
	<div id="containerp" style="height: 400px"></div>
	<script>
	var chart;
	var chartType;
	$(document).ready(function(){

	drawChart("line","plain");

	$("#charttype").change(function(){
	if($(this).val() === "line")
	{
	drawChart("line");
	}else{
	drawChart("column");
	}
	});

	$("#plain").click(function() {
	drawChart(chartType,"plain");
	});

	$("#inverted").click(function() {
	drawChart(chartType,"inverted");
	});

	$("#polar").click(function() {
	drawChart(chartType,"polar");
	});
	});

	var drawChart = function(chartType, displayType){
	chartType = chartType;
	var plain = (displayType === "plain");
	var inverted = (displayType === "inverted");
	var polar = (displayType === "polar");

	Highcharts.chart('container', {
	chart: {
	type: chartType,
	plotBorderColor: '#ccc',
	plotBorderWidth: 2,
	plain : plain,
	inverted : inverted,
	polar : polar
	},
	title: {
	text: 'Monthly Average Rainfall'
	},
	subtitle: {
	text: 'Source: WorldClimate.com'
	},
	series: [
	{
	name: 'Installation',
	data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]

	}]
	});
	}

	</script>
	</body>
	</html>