cach tinh height

by tin nguyen

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>

JavaScript

//define the data and the categories
var categories = ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas', 'Orangesa', 'Pearsa', 'Grapesa', 'Bananasa', 'Orangess', 'Pearss', 'Grapess', 'Bananass', 'Orangesd', 'Pearsd', 'Grapesd', 'Bananasd', 'Orangesf', 'Pearsf', 'Grapesf', 'Bananasf', 'Orangesg', 'Pearsg', 'Grapesg', 'Bananasg', 'Orangesr', 'Pearsr', 'Grapesr', 'Bananasr', 'Orangese', 'Pearse', 'Grapese', 'Bananase', 'Orangesw', 'Pearsw', 'Grapesw', 'Bananasw', 'Orangesq', 'Pearsq', 'Grapesq', 'Bananasq', 'Orangesy', 'Pearsy', 'Grapesy', 'Bananasy', 'Orangesu', 'Pearsu', 'Grapesu', 'Bananasu', 'Orangesi', 'Pearsi', 'Grapesi', 'Bananasi'];

var dataJohn = [5, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2, 3, 4, 7, 2];

var dataJane = [2, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1, 2, 3, 2, 1];

var dataJoe = [3, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5, 4, 4, 2, 5];

//calculate the height
var base   = 150; //sum of top and bottom margin
var mult   = 20;  //desired height per category
var len    = categories.length;
var height = ((len * mult) + base);

$(function () {
    
    //change the height 
    $('#container').height(height);

    //call the chart
    $('#container').highcharts({
            chart: {
                type: 'bar',
                margin:[50,25,100,75]
            },
            title: {
                text: 'Stacked bar chart'
            },
            xAxis: {
                categories: categories
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Total fruit consumption'
                }
            },
            legend: {
                reversed: true
            },
           ...