continue the line drawing on dotnet highchart

Question

I'm creating a dotnet high chart by using the code:

object[,] data1 = new object[Dt.Rows.Count, 2];
for (int i = 0; i < Dt.Rows.Count; i++)
{
    data1[i, 0] = Dt.Rows[i]["IncDate"];
    data1[i, 1] = Dt.Rows[i]["IncCost"];
}

object[,] data2 = new object[Dt2.Rows.Count, 2];
for (int i = 0; i < Dt2.Rows.Count; i++)
{
    data2[i, 0] = Dt2.Rows[i]["ExpDate"];
    data2[i, 1] = Dt2.Rows[i]["ExpCost"];
}

Highcharts chart = new Highcharts("graph")

    .SetTitle(new Title { Text = "Money Analysis" })
    .SetXAxis(new XAxis { Type = AxisTypes.Datetime })
    .SetYAxis(new YAxis { Title = new YAxisTitle { Text = "Amount (£)" } })
    .SetSeries(new[]
        {
        new Series { Name = "Incomings", Color = Color.LimeGreen, Data = new Data(data1) },
        new Series { Name = "Expenditures", Color = Color.Red, Data = new Data(data2) }
    })

which outputs: I was wondering how I'm able to make the red line continue along the current cost until the end of the graph (the last date for the incoming.) And also do the same for the green line if the expenditures have a later date than the last incomings date. Hopefully people know what I mean. Thanks in advance

Answer 1

So, no - the chart won't do that for you automatically, but we can do it ourselves easy enough.

1) retrieve the final y value of your data

2) retrieve the final x value that you want it to extend until

3) add a new point to the data with those x and y values.

Example function:

function extendData(series, axis) {
    var ext = axis.getExtremes();
    var x   = ext.dataMax;
    var y   = series.data[series.data.length -1].y;
    series.addPoint({'x':x, 'y':y, marker: { enabled: true }});
  }

Working example:

• http://jsfiddle.net/jlbriggs/omtugbvo/

And just to show an example using any number of series:

• http://jsfiddle.net/jlbriggs/omtugbvo/3/

Example image: