Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Hight chart jquery plugin integration
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment