


<!-- local_vflibs/jqxbarchart -->
<center>
<div id="jqxBarChart{{id}}" class="vflibs-jqbarchart" style="width:{{width}}px; height:{{height}}px"></div>
</center>

<script type="text/javascript">
$(document).ready(function () {

    // prepare chart data
    var graphdata{{id}} = {{datalist}};

    // prepare jqxChart settings
    var settings{{id}} = {
        title: "{{name}}",
        description: "{{desc}}",
        showLegend: true,
        enableAnimations: true,
        padding: {{padding}},
        titlePadding: {{titlepadding}},
        source: graphdata{{id}},
        xAxis: {
            dataField: '{{xaxis}}',
            gridLines: {
                visible: true
            },
            flip: {{xflip}},
            labels: {
                visible: true,
                angle:90
            }
        },
        valueAxis: {
            flip: {{yflip}},
            labels: {
                visible: true,
                angle:90
            }
        },
        colorScheme: 'scheme01',
        seriesGroups: [
            {
                type: 'column',
                orientation: '{{direction}}',
                columnsGapPercent: 50,
                toolTipFormatSettings: {
                    thousandsSeparator: ','
                },
                series: {{seriesarr}}
            }
        ]
    };

    // setup the chart
    $('#jqxBarChart{{id}}').jqxChart(settings{{id}});
});
</script>
<!-- /local_vflibs/jqxbarchart -->
