Stepped Line Chart

[leonard84]

Would it be possible to either add support for a stepped mode in LineChart, or add a new SteppedLineChart? Basically the line stays on the current value until a new value is encountered and then it moves up and down instantly.

See https://www.chartjs.org/docs/next/samples/line/stepped.html

[huww98]

It should be possible with a new shader. A stepped line needs one more line segment per data point. So this can be harder. dynamically switching between stepped and current mode can be even harder. Maybe a geometry shader can help in this case.

I will look into this next weekend.

[leonard84]

FYI, for the time being I pre-process the series in js, before passing it to the chart.

  function toSteppedSeries(series) {
    const steppedSeries = [];
    for (let i = 0; i < series.length; i++) {
      const steppedData = [];
      for (let j = 0; j < series[i].data.length; j++) {
        const dataPoint = series[i].data[j];
        steppedData.push({ x: dataPoint.x, y: dataPoint.y });
        if (j < series[i].data.length - 1) {
          steppedData.push({ x: series[i].data[j + 1].x, y: dataPoint.y });
        }
      }
      steppedSeries.push({
        name: series[i].name,
        color: series[i].color,
        data: steppedData
      });
    }
    return steppedSeries;
  }

[huww98]

Hi @leonard84 , I'm excited to show you my new stepped-line implementation. I've done a major refactor to the WebGL part, cutting GPU memory usage to 1/8, and supporting dynamically changing different types of lines.

These refactor also open a door to more possibility, e.g. #50 .

Unfortunately, GitHub action is experiencing an outage. the new demo will be available at https://huww98.github.io/TimeChart/demo/line_style.html. Or you may build the code locally.

[leonard84]

The demo page is missing the line, moving the crosshair around shows that there is data, but the line is not drawn. I tried all types, no difference in the visibility.

I looked at the actions and it recently succeeded, so it should work.

[huww98]

Which browser are you using? I’ve dropped WebGL 1 support in the refactoring.

[huww98]

The first or last data point looks not quite correct if the stepLocation is set to 0 or 1. But I cannot think of a better method now.