Highcharts Trellis chart

by Pranav Desai

HTML

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

<h1>Q1. (Segmented by Q2: Which country do you belong to?) How Satisfied are you with our service?</h2>

<table id="trellis">
    <tr>
<td class="first"></td>
<td></td>
<td></td>
<td></td>
    </tr>
</table>
<p></p>

CSS

#trellis td {
    width: 200px;
    height: 300px;
}
#trellis td.first {
    width: 300px;
}

JavaScript

var charts = [],
    $containers = $('#trellis td'),
    datasets = [{
        name: 'USA',
        data: [6, 5, 1, 2, 2]},
    {
        name: 'Canada',
        data: [5, 6, 4, 2, 1]},
    {
        name: 'Mexico',
        data: [2, 6, 5, 2, 3]}];


$.each(datasets, function(i, dataset) {
    charts.push(new Highcharts.Chart({

        chart: {
            renderTo: $containers[i],
            type: 'bar',
            marginLeft: i === 0 ? 100 : 10
        },

        title: {
            text: dataset.name,
            align: 'left',
            x: i === 0 ? 90 : 0
        },

        credits: {
            enabled: false
        },

        xAxis: {
            categories: ['Highly Satisfied', 'Satisfied', 'Neutral', 'Unsatisfied', 'Highly Unsatisfied'],
            labels: {
                enabled: i === 0
            }
        },

        yAxis: {
            allowDecimals: false,
            title: {
                text: null
            },
            min: 0,
            max: 10
        },


        legend: {
            enabled: false
        },

        series: [dataset]

    }));
});