I am trying to draw Average, High and Low value straight line on a dimple js bar chart. I have no clue how they can be drawn on y-axis (cost) as straight line that will cut through the bars. Here is the fiddle that has high, low and average values saved into corresponding variable that needed to be drawnon the chart. Any solution? jsfiddle link: http://jsfiddle.net/Ra2xS/14/
var dim = {"width":590,"height":450}; //chart container width
var data = [{"date":"01-02-2010","cost":"11.415679194952766"},{"date":"01-03-2010","cost":"10.81875691467018"},{"date":"01-04-2010","cost":"12.710197879070897"}];
//y- axis (cost) values to plot as straight line over bar chart in different colours
var avg = "11.65";
var high= "12.71";
var low = "10.82";
function barplot(id,dim,data)
{
keys = Object.keys(data[0]);
var xcord = keys[0];
var ycord = keys[1];
var svg = dimple.newSvg(id, dim.width, dim.height);
var myChart = new dimple.chart(svg,data);
myChart.setBounds(60, 30, 505, 305);
var x = myChart.addCategoryAxis("x", xcord);
x.addOrderRule(xcord);
x.showGridlines = true;
var y = myChart.addMeasureAxis("y", ycord);
y.showGridlines = true;
y.tickFormat = ',.1f';
var s = myChart.addSeries(null, dimple.plot.bar);
var s1 = myChart.addSeries(null, dimple.plot.line);
s1.lineWeight = 3;
s1.lineMarkers = true;
myChart.draw(1500);
}
barplot("body",dim,data);
See Question&Answers more detail:os