<template>
    <JqxChart style="width: 850px; height: 500px"
              :title="'CPI inflation comparison by country'"
              :description="'Years: 2011 vs 2012'"
              :showLegend="true" :enableAnimations="true" :padding="padding"
              :titlePadding="titlePadding" :source="sampleData" :xAxis="xAxis"
              :valueAxis="valueAxis" :seriesGroups="seriesGroups" :colorScheme="'scheme02'">
    </JqxChart>
</template>

<script>
    import JqxChart from "jqwidgets-scripts/jqwidgets-vue/vue_jqxchart.vue";

    export default {
        components: {
            JqxChart
        },
        data: function () {
            return {
                sampleData: [
                    { Country: 'Switzerland', Inflation2012: -0.95, Inflation2011: -0.72 },
                    { Country: 'USA', Inflation2012: 2.35, Inflation2011: 2.96 },
                    { Country: 'Germany', Inflation2012: 2.03, Inflation2011: 2.10 },
                    { Country: 'India', Inflation2012: 8.38, Inflation2011: 6.49 },
                    { Country: 'China', Inflation2012: 3.34, Inflation2011: 4.06 },
                    { Country: 'Canada', Inflation2012: 2.05, Inflation2011: 2.30 }
                ],
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                xAxis: {
                    dataField: 'Country'
                },
                valueAxis: {
                    title: { visible: false },
                    unitInterval: 1,
                    minValue: -5,
                    maxValue: 10,
                    labels: { formatSettings: { sufix: '%' } }
                },
                seriesGroups: [
                    {
                        type: 'column',
                        orientation: 'horizontal',
                        columnsGapPercent: 50,
                        toolTipFormatSettings: { sufix: '%' },
                        series: [
                            { dataField: 'Inflation2012', displayText: 'Inflation 2012' },
                            { dataField: 'Inflation2011', displayText: 'Inflation 2011' }
                        ]
                    }
                ]
            }
        }
    };
</script>

<style>
</style>