KB - Wijmo 5 - Draw Strokes On FlexChart

Cusom rendered elements

by Joel Parks

HTML

<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20151.63/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20151.63/styles/wijmo.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<div id="theChart" style="height:300px;"></div>

JavaScript

$(document).ready(function () {

    // create some random data
    var data = [{
        name: 'buttons',
        y : 5,
        ymin : 4,
        ymax : 6
    }, {
        name: 'bobs',
        y : 3,
        ymin : 2,
        ymax : 4
    }, {
        name: 'pins',
        y : 7,
        ymin : 6,
        ymax : 8
    }, ];

    // initialize the chart
    var chart = new wijmo.chart.FlexChart('#theChart', {
        itemsSource: data,
        bindingX: 'name',
        series: [{
            binding: 'y',
        }]
    });

    chart.axisY.max = 10;
    chart.rendered.addHandler(function (sender, e) {
        for (var i = 0; i < data.length; i++) {
            var item = data[i],
                x = chart.axisX.convert(i),
                ymin = chart.axisY.convert(item.ymin),
                ymax = chart.axisY.convert(item.ymax);

            e.engine.stroke = 'black';
            e.engine.strokeWidth = 1;
            e.engine.drawLine(x, ymin, x, ymax);
            e.engine.drawLine(x-5, ymin, x+5, ymin);
            e.engine.drawLine(x-5, ymax, x+5, ymax);
        }
    });

});