


<!-- local_vflibs/jqxbulletchart -->
<div id="jqxBulletChart{{id}}" class="jqwidgets-bulletchart"></div>
<script type="text/javascript">
$(document).ready(function () {
    $("#jqxBulletChart{{id}}").jqxBulletChart({
        width: "{{width}}",
        height: "{{height}}",
        barSize: "{{barsize}}%",
        title: "{{name}}",
        {{#desc}}description: "{{desc}}",{{/desc}}

        ranges: [{{#ranges}}{{^firstrange}}{{{/firstrange}}
                startValue: {{start}},
                endValue: {{end}},
                color: {{color}},
                opacity: {{opacity}}
            }
        {{/ranges}}
        ],

        {{#pointer}}
        'pointer: {
            value: {{value}},
            label: "{{label}}",
            size: "{{size}}%",
            color: "{{color}}"
        },
        {{/pointer}}

        {{#target}}
        target: {
            value: {{value}},
            label: "{{label}}",
            size: {{size}},
            color: "{{color}}"
        },
        {{/target}}

        {{#ticks}}
        ticks: {
            position: "{{position}}",
            interval: {{interval}},
            size: {{size}}
        }
        {{/ticks}}

        labelsFormat: "{{ticklabelformat}}",
        showTooltip: {{tooltip}}
    });
});
</script>
<!-- /local_vflibs/jqxbulletchart -->
