Highcharts - Multiple Charts

A simple example for multiple charts on one page.

by Raul Corona Xolaltenco

HTML

<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jspdf/0.9.0rc1/jspdf.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<button id="exporta">exportar graficas</button>
<div id="chart-A" class="chart"></div> <!-- Container for Chart A -->
<div class="spacer"></div>
<div id="chart-B" class="chart"></div> <!-- Container for Chart B -->

CSS

.chart {
    height: 200px;
}

.spacer {
    height: 20px;
}

JavaScript

// create canvas function from highcharts example http://jsfiddle.net/highcharts/PDnmQ/
(function (H) {
    H.Chart.prototype.createCanvas = function (divId) {
        var svg = this.getSVG(),
            width = parseInt(svg.match(/width="([0-9]+)"/)[1]),
            height = parseInt(svg.match(/height="([0-9]+)"/)[1]),
            canvas = document.createElement('canvas');

        canvas.setAttribute('width', width);
        canvas.setAttribute('height', height);

        if (canvas.getContext && canvas.getContext('2d')) {

            canvg(canvas, svg);

            return canvas.toDataURL("image/jpeg");

        } 
        else {
            alert("Your browser doesn't support this feature, please use a modern browser");
            return false;
        }

    }
}(Highcharts));
    

$('#exporta').click(function () {
    var doc = new jsPDF();
    var chartHeight = 80;
    
    doc.setFontSize(40);
    doc.text(35, 25, "Exportando graficas");
        
    $('.chart').each(function (index) {
    var imageData = $(this).highcharts().createCanvas();
    doc.addImage(imageData, 'JPEG', 45, (index * chartHeight) + 40, 120, chartHeight);
    });
    
    
    
    doc.save('demostracion.pdf');
});



// Create the first chart
    $('#chart-A').highcharts({
        chart: {
            type: 'column' // Chart type (i.e. 'bar', 'column', 'spline' etc)
        },
        title: {
            text: 'Chart A' // Title for the chart
        },
        xAxis: {
            categories: ['Jane', 'John', 'Joe', 'Jack', 'jim']
            // Categories for the charts
        },
        yAxis: {
            min: 0, // Lowest value to show on the yAxis
            title: {
                text: 'Apple Consumption' // Title for the yAxis
            }
        },
        legend: {
            enabled: false // Enable/Disable the legend
        },
        credits: {
            enabled: true, // Enable/Disable the credits
            text: 'This is a credit'
        },
       ...