Performance

author(s): Koos Zoon

by kzoon

HTML

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

<button id="update">Update chart</button>


<div id="container1" style="height: 80px;width:1300px"></div>
<div id="container2" style="height: 80px;width:1300px"></div>
<div id="container3" style="height: 80px;width:1300px"></div>
<div id="container4" style="height: 80px;width:1300px"></div>
<div id="container5" style="height: 80px;width:1300px"></div>
<div id="container6" style="height: 80px;width:1300px"></div>
<div id="container7" style="height: 80px;width:1300px"></div>
<div id="container8" style="height: 80px;width:1300px"></div>
<div id="container9" style="height: 80px;width:1300px"></div>
<div id="container10" style="height: 80px;width:1300px"></div>
<div id="container11" style="height: 80px;width:1300px"></div>
<div id="container12" style="height: 80px;width:1300px"></div>

JavaScript

$(function () {
    $('#update').click(function () {

        initCharts();
    });
 });

function initCharts()
{        
    var options ={
       title: {
            text: ''  
        },
              legend: {
            align: 'right'
                  
        },
                yAxis: {
 
            title: {
                text: null,
                
            }
        },
              xAxis: {
            categories: ['January 2011', 'February 2011', 'March 2011']
        },
        plotOptions: {
            series: { pointPadding: 0.05,
                     groupPadding:0,
                animation: false
            }
        },
        series: [{
            data: [99.9, 71.5, 106.4]
        }]
    };
    for (i=1;i<13;i++){
       options.chart={
           type:'bar',
                       spacingTop: 0 ,     
                     spacingBottom: 0   ,  
                      
            renderTo: 'container'+i
        };
     var chart = new Highcharts.Chart(options);
    }
    
}