how do I get two highcharts on one page?

Question

I have two charts that I am trying to load on separate div's on the same page, they are similar but one is a drill down and the other isn't. I have tried wrapping the entire function with var chart = $('#review').highcharts({ but it doesn't work.

The two charts are below:

$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['Metric 1', 'Metric 2', 'Metric 3','metric 4'],
            name = 'Votes',
            data = [{
                    y: 1,
                    color: colors[0],
               }, {
                    y: 2,
                    color: colors[1],

                },  {
                    y: 3,
                    color: colors[2],

                },{
                    y: 5,
                    color: colors[3],

                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#review').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Review breakdown'
            },
           xAxis: {
                categories: categories
            },


            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +'<br><b>'+ this.y +' stars</b><br/>';
                             return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },  yAxis: {min: 0, max: 5, 
                    title: {text: 'Star Rating'}
                   }
        })
        .highcharts(); // return chart
    });


$(function () {
          var colors = Highcharts.getOptions().colors,
            categories = ['positive', 'negative', 'sum'],
            name = 'Votes',
            data = [{
                    y: 55.11,
                    color: colors[0],
                    drilldown: {
                        name: 'Positive votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [10.85, 7.35, 33.06],
                        color: colors[0]
                    }
                }, {
                    y: -7.15,
                    color: colors[3],
                    drilldown: {
                        name: 'Negative votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [-4.55, -1.42, -0.23],
                        color: colors[3]
                    }
                }, {
                    y: 2.14,
                    color: colors[4],
                    drilldown: {
                        name: 'Total votes',
                        categories: ['Users', 'Admin', 'Anonymous'],
                        data: [ 0.12, 0.37, 1.65],
                        color: colors[4]
                    }
                }];

        function setChart(name, categories, data, color) {
            chart.xAxis[0].setCategories(categories, false);
            chart.series[0].remove(false);
            chart.addSeries({
                name: name,
                data: data,
                color: color || 'white'
            }, false);
            chart.redraw();
        }

        var chart = $('#votes').highcharts({
            chart: {
                type: 'column'
            },
            title: {
                text: 'Vote breakdown'
            },
            subtitle: {
                text: 'Click the columns to view breakdown.'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                title: {
                    text: 'Total votes'
                }
            },
            plotOptions: {
                column: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                var drilldown = this.drilldown;
                                if (drilldown) { // drill down
                                    setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                                } else { // restore
                                    setChart(name, categories, data);
                                }
                            }
                        }
                    },
                    dataLabels: {
                        enabled: true,
                        color: colors[0],
                        style: {
                            fontWeight: 'bold'
                        }
                    }
                }
            },
            tooltip: {
                formatter: function() {
                    var point = this.point,
                        s = this.x +':<b>'+ this.y +' votes</b><br/>';
                    if (point.drilldown) {
                        s += 'Click to view '+ point.category +' breakdown';
                    } else {
                        s += 'Click to return';
                    }
                    return s;
                }
            },
            series: [{
                name: name,
                data: data,
                color: 'white'
            }],
            exporting: {
                enabled: false
            },
                     legend: {
            enabled: false
        },

        credits: {
            enabled: false
        },
        })
        .highcharts(); // return chart
    });

Answer 1

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

Answer 2

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

HTML

<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/