Skip to main content Skip to footer

Drawing Strokes to show Range in JavaScript

Background:

FlexChart allows for the creation of 'strokes', lines that show a range on the chart to more clearly display the data on the chart.

Steps to Complete:

1. Add a handler function to the FlexChart's rendered event

2. Use the event property of the handler created to draw lines and set the property of those lines

Getting Started

Add a handler function to the FlexChart's rendered event

In order to draw lines on the chart, we're going to need access to the control during the rendering process. FlexChart allows us access to that by having an event called rendered, which we'll tie a function to.

chart.rendered.addHandler(function(sender,e) {...});

Use the event property of the handler created to draw lines and set the property of those lines

Next, we're going to cycle through each dataItem in the chart, because we will need to draw a stroke for each one. We'll get the x and y positions, as well as the min and max of the x and y coordinates, all three of which will be used to draw the stroke for each dataItem.

for(var i = 0; i < data.length; i++) {
    var item = data[i],
    x = chart.axisX.convert(i),
    ymin = chart.axisX.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);
}

This will draw a vertical line that extends a unit past the end of the bar, a unit below the end of the bar, and a horizontal line at the top and bottom of the vertical bar. It also sets it at a unit width of 1 pixel.

You can find a live sample of this project at this location: http://jsfiddle.net/JParksGC/8Lu0xzf3/

Joel Parks