Draw line between StripLines

[Ragu nathan]

Hi,

I have a chart with multiple x-axis StripLines. I want to find the distance between two StripLines dynamically. In that case, I need to select 2 StipLines and draw a line between those 2 StripLines and show the difference value.

Is there any way to draw a line horizontally between the StripLines?

[Thangaraj Raman]

@ragu1991nathan,

You can add a dummy line dataSeries with x-values based on stripLines values and use indexLabel to show the length between the stripLines. Please find the code snippet for the same below.

chart.addTo("data", {
    type: "line",
    toolTipContent: null,
    highlightEnabled: false,
    markerSize: 0,
    dataPoints: [
      { x: striplines[0].get("value"), y: (chart.axisY[0].viewportMaximum + chart.axisY[0].viewportMinimum) / 2 },
      { x: (striplines[1].get("value") + striplines[0].get("value")) / 2, y: (chart.axisY[0].viewportMaximum - chart.axisY[0].viewportMinimum) / 2, indexLabel:  (striplines[1].get("value") - striplines[0].get("value")).toString()},
      { x: striplines[1].get("value"), y: (chart.axisY[0].viewportMaximum - chart.axisY[0].viewportMinimum) / 2 }
    ]
});

Please check this JSFiddle for a working example.

—
Thangaraj Raman
Team CanvasJS

[Ragu nathan]

Great. Thank you. I will try this workaround.

Is there any option to hide data series and legends? I just want to hide chart lines only and keep the x-axis, y-axis and StripLines and the newly created chart line.

I tried this jsFiddle. But when I try to hide the chart lines all the lines will be hidden.

[Thangaraj Raman]

@ragu1991nathan,

You can retain the viewportMinimum and viewportMaximum for both axisX and axisY before hiding all the dataseries (by setting visible of each dataseries to false). Please find the code snippet for the same below.

document.getElementById("hide").addEventListener("click", function(){
    for(var i = 0; i < chart.options.data.length; i++) {
      chart.options.data[i].showInLegend = false;
      chart.options.data[i].visible = false;
    }
    chart.axisX[0].set("viewportMinimum", chart.axisX[0].get("viewportMinimum"), false);
    chart.axisX[0].set("viewportMaximum", chart.axisX[0].get("viewportMaximum"), false);
    chart.axisY[0].set("viewportMinimum", chart.axisY[0].get("viewportMinimum"), false);
    chart.axisY[0].set("viewportMaximum", chart.axisY[0].get("viewportMaximum"), false);
    chart.render();
  });

Please take a look at this updated JSFiddle for complete code.

—
Thangaraj Raman
Team CanvasJS

[Ragu nathan]

Thank you so much for the solution. I have tried your suggestions and created a new sample.

Please take a look at this JSFiddle. We can create as much new data lines by clicking the add button and removed all the added lines by clicking remove button.

But I’m getting the below error sometimes when I try to remove the lines. Not all the time I’m getting this error but sometimes I’m getting this. Any idea?

[Ragu nathan]

Hi Thangaraj Raman,

I could notice another issue in the sample JSFiddle you provided. I have just added the zoomEnabled property for the chart. I zoomed the chart and then hide the Data series, and then showed the Data series. Then I tried to reset the chart zoom. But I can’t able to reset the chart.

[Thangaraj Raman]

@ragu1991nathan,

As viewportMinimum and viewportMaximum are set programmatically while hiding all the dataSeries, the reset button will basically set the viewport range back to the state it was in after clicking on the hide button.

You can set the viewportMinimum and viewportMaximum to null to reset the axis range in rangeChanged event when reset button is clicked.

—
Thangaraj Raman
Team CanvasJS