I'm experimenting with displaying a div that contains a Highchart in this code snippet:
http://jsfiddle.net/ot24zrkt/129/
This line should reveal the container:
$('#container' + $(this).val()).show();<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>
<select id="category_faq">
<option value="0">item1</option>
<option value="1">item2</option>
<!-- <option value="3">item3</option> -->
</select>
<div id="container1" style="width:500px;height:400px;margin:1.5em 1em;"></div>
<script>
var d = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
global: {
useUTC:false
},
colors: [
'rgba( 0, 154, 253, 0.9 )',
'rgba( 253, 99, 0, 0.9 )',
'rgba( 40, 40, 56, 0.9 )',
'rgba( 253, 0, 154, 0.9 )',
'rgba( 154, 253, 0, 0.9 )',
'rgba( 145, 44, 138, 0.9 )',
'rgba( 45, 47, 238, 0.9 )',
'rgba( 177, 69, 0, 0.9 )',
'rgba( 140, 140, 156, 0.9 )',
'rgba( 238, 46, 47, 0.9 )',
'rgba( 44, 145, 51, 0.9 )',
'rgba( 103, 16, 192, 0.9 )'
],
chart: {
alignTicks:false,
type:'',
margin:[60,25,100,90],
// other customizations...
},
title: {
text:'Test Chart Title',
align:'left',
margin:10,
x: 50,
// other customizations...
},
subtitle: {
text:'Test Chart Subtitle',
align:'left',
x: 52,
},
// more configurations...
});
// randomData function definition...
// Font import from Google Fonts and body styling...