score:24

Accepted answer

if you're trying to get two charts on one page then it is very simple.

    <div id="chart-a" class="chart"></div>
    <div class="spacer"></div>
    <div id="chart-b" class="chart"></div>

css - just to make the example a little easier on the eyes

    .chart {
        height: 200px;
    }

    .spacer {
        height: 20px;
    }

javascript

    $(function() {

        // if you need to specify any global settings such as colors or other settings you can do that here

        // build chart a
        $('#chart-a').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'chart a'
            },
            xaxis: {
                categories: ['jane', 'john', 'joe', 'jack', 'jim']
            },
            yaxis: {
                min: 0,
                title: {
                    text: 'apple consumption'
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                shared: true
            },
            series: [{
                name: 'apples',
                data: [5, 3, 8, 2, 4]            
            }]
        });

        // build chart b
        $('#chart-b').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'chart b'
            },
            xaxis: {
                categories: ['jane', 'john', 'joe', 'jack', 'jim']
            },
            yaxis: {
                min: 0,
                title: {
                    text: 'miles during run'
                }
            },
            legend: {
                enabled: false
            },
            credits: {
                enabled: false
            },
            tooltip: {
                shared: true
            },
            series: [{
                name: 'miles',
                data: [2.4, 3.8, 6.1, 5.3, 4.1]
            }]
        });
    });

here's a jsfiddle: http://jsfiddle.net/engemasa/7cvcx/

score:4

i am not really sure what some of your code is trying to do - seems a little needlessly complicated, fwiw

as to how to make multiple charts on the same page - you do it just like you would make one chart on a page, just do it more than once :)

and make sure you have different container element ids - otherwise you are just overwriting one chart with the next.

one example of multiple charts on a page:

http://jsfiddle.net/kwtzr/1/

there's no relevant code to put here, just click the link

Related Query

More Query from same tag