Highchart not displaying when used with drop down

Question

In this fiddle I'm attempting to show a div which contains a highchart :

http://jsfiddle.net/ot24zrkt/129/

This line should show the container : $('#container' + $(this).val()).show(); ? fiddle code :

<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 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[60,25,100,90],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        }
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 50,
        style: {
            fontWeight:'bold',
            color:'rgba(0,0,0,.9)'
        }
    },
    subtitle: {
        text:'Test Chart Subtitle',   
        align:'left',
        x: 52,
    },
    legend: { enabled: true },
    plotOptions: {
        area: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        arearange: {
            lineWidth:1
        },
        areaspline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        areasplinerange: {
            lineWidth:1
        },
        boxplot: {
            groupPadding:0.05,
            pointPadding:0.05,
            fillColor:'rgba(255,255,255,.75)'
        },
        bubble: {
            minSize:'0.25%',
            maxSize:'17%'
        },
        column: {
            //stacking:'normal',
            groupPadding:0.05,
            pointPadding:0.05
        },
        columnrange: {
            groupPadding:0.05,
            pointPadding:0.05
        },
        errorbar: {
            groupPadding:0.05,
            pointPadding:0.05,
            showInLegend:true        
        },
        line: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        scatter: {
            marker: {
                symbol: 'circle',
                radius:5
            }
        },
        spline: {
            lineWidth:1,
            marker: {
                enabled:false,
                symbol:'circle',
                radius:4
            }
        },
        series: {
            shadow: false,
            borderWidth:0,
            states: {
                hover: {
                    lineWidthPlus:0,
                }
            }
        }
    },
    xAxis: {
        title: {
            text: 'X Axis Title',
            rotation:0,
            textAlign:'center',
            style:{ 
                color:'rgba(0,0,0,.9)'
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    },
    yAxis: {
        minPadding:0,
        maxPadding:0,
        gridLineColor:'rgba(204,204,204,.25)',
        gridLineWidth:0.5,
        title: { 
            text: 'Y Axis<br/>Title',
            rotation:0,
            textAlign:'right',
            style:{ 
                color:'rgba(0,0,0,.9)',
            }
        },
        labels: { 
            style: {
                color: 'rgba(0,0,0,.9)',
                fontSize:'9px'
            }
        },
        lineWidth:.5,
        lineColor:'rgba(0,0,0,.5)',
        tickWidth:.5,
        tickLength:3,
        tickColor:'rgba(0,0,0,.75)'
    }
}); 

function randomData(points, positive, multiplier) {
    points     = !points            ? 1     : points;
    positive   = positive !== true  ? false : true;
    multiplier = !multiplier        ? 1     : multiplier;

    function rnd() {
        return ((
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random() + 
            Math.random()
        ) - 3) / 3;
    }
    var rData = [];
    for (var i = 0; i < points; i++) {
        val = rnd();
        val = positive   === true ? Math.abs(val)      : val;
        val = multiplier >   1    ? (val * multiplier) : val;
        rData.push(val);    
    }
    return rData;
}
</script>

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

var chart;
var pointStart = Date.UTC(2014,0,1);
$(function() {

            $('#category_faq').on('change', function () {
                      $('div').hide();         
                      $('#container' + $(this).val()).show();
                  });

    $('#container1').highcharts({
        chart       : { type    : 'line' },
        title       : { },
        subtitle    : { },
        legend      : { enabled : true },
        tooltip     : { },
        plotOptions : {
            series  : {
                pointStart      : pointStart,
                pointInterval   : 86400 * 30 * 1000
            }
        },
        xAxis      : { 
            type           : 'datetime',
            tickInterval   : 86400 * 30 * 1000
        },
        yAxis      : {  }
    }); 
    chart = $('#container1').highcharts();

    chart.addSeries({ data: randomData(12, true) });

})

Answer 1

Have a look: http://jsfiddle.net/ot24zrkt/133/

HTML:

<select id="category_faq">
    <option value="1">item1</option>
    <option value="2">item2</option>
   <!--  <option value="3">item3</option> -->
</select>

JS:

$('#category_faq').on('change', function () {
     $('div[id^="container"]').hide();        
     $('#container' + $(this).val()).show();
});

First of all you need at least JQuery 1.7.2 to make highcharts work fine.

Moreover, if you want your change event work properly you should hide divs but not all, in that case you'll also hide your #highcharts-0 div generated by highcharts. You can use $('div[id^="container"]') instead.

At last, you should have option value in #category_faq the same as the number of corresponding #container div is. In your JSFiddle you have option values set to 0 and 1 (should be 1 and 2), whereas your first container has #container1 id.

Answer 2

When you change the select, you're hiding anything inside any div

$('#category_faq').on('change', function () {
                      $('div').hide(); //this hides every div         
                      $('#container' + $(this).val()).show(); //with no divs, there's no place for this to render
                  });

Delete this line: $('div').hide();

Fiddle: http://jsfiddle.net/ot24zrkt/130/

Also, you had jQuery 1.6 selected in jsFiddle. If you are using 1.6, it won't work with highcharts. You'll need (I think) at least 1.10.