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