Pre loader

Failed to apply offset with live updating chart.

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

Answered
1
0

I tried to apply offset on the data in a live updating multiple lines chart. But it doesn’t work for me. Below are my codes for adding trace and updating data:

Add a trace to the chart without data in the beginning:

const xyDataSeries = new XyDataSeries(wasmContext);
const offsetFilter = new XyScaleOffsetFilter(xyDataSeries, { scale: 1, offset: 50 });   
let trace1 = new FastLineRenderableSeries(wasmContext, {
    type: ESeriesType.LineSeries, 
id: 1,
stroke: #333,
strokeThickness: 1,
dataIsSortedInX: true, 
dataEvenlySpacedInX: true, 
containsNaN: false,
dataSeries: offsetFilter,
});
sciChartSurface.renderableSeries.add(trace1);

Update chart data later:

sciChartSurface.renderableSeries.items.forEach(serie => {
    serie.dataSeries.clear();
serie.dataSeries.appendRange(dataX, dataY);
});

I can’t see the offset 50 applied on the chart data. Not sure what’s wrong with my codes.

Version
8.11.0
  • You must to post comments
Best Answer
1
0

Hi Quyen

When I’m running this code I am getting syntax errors in the javascript console

let trace1 = new FastLineRenderableSeries(wasmContext, {
    type: ESeriesType.LineSeries, 
    id: 1,
    stroke: #333, // error here
    strokeThickness: 1,
    dataIsSortedInX: true, 
    dataEvenlySpacedInX: true, 
    containsNaN: false,
    dataSeries: offsetFilter,
  });

[Error] SyntaxError: Invalid character: ‘#’ (anonymous function) (pen.js:22)

A few errors in your code.

1./ The stroke should be in quotes e.g. “#333”
2./ type: ESeriesType.LineSeries is not required if you are declaring a FastLineRenderableSeries. This is only required if you are declaring series using the builder API

Next error in your code:

3./ You’re updating sciChartSurface.renderableSeries.dataSeries however this isn’t the correct way to update filters.

If you have a FastLineRenderableSeries.dataSeries = new XyScaleOffsetFilter(xyDataSeries) then you should update the xyDataSeries. The XyScaleOffsetFilter will automatically recalculated.

4./ Fourth error: the stroke #333 is too dark to see on a dark background chart, I changed this to FFFFFF and increased the stroke thickness.

5./ Last error: after updating data, you should call SciChartSurface.zoomExtents() or otherwise update the visible range. By default SciChart won’t zoom to fit new data that is placed on the chart.

Putting this all together, I created this codepen:

const {
  SciChartSurface,
  NumericAxis,
  FastLineRenderableSeries,
  XyDataSeries,
  XyScaleOffsetFilter,
  ESeriesType
} = SciChart;

async function initSciChart() {
  const { sciChartSurface, wasmContext } = await SciChartSurface.create(
    "scichart-root"
  );
  sciChartSurface.xAxes.add(new NumericAxis(wasmContext));
  sciChartSurface.yAxes.add(new NumericAxis(wasmContext));

  const xyDataSeries = new XyDataSeries(wasmContext);
  const offsetFilter = new XyScaleOffsetFilter(xyDataSeries, {
    scale: 1,
    offset: 50
  });
  const trace1 = new FastLineRenderableSeries(wasmContext, {
    id: 1,
    stroke: "#FFFFFF",
    strokeThickness: 10,
    dataIsSortedInX: true,
    dataEvenlySpacedInX: true,
    containsNaN: false,
    dataSeries: offsetFilter
  });
  sciChartSurface.renderableSeries.add(trace1);
  setTimeout(() => {
    console.log("Updating data!!");
    const dataX = [0, 1, 2, 3, 4];
    const dataY = [0, 1, 2, 3, 5];
    xyDataSeries.clear();
    xyDataSeries.appendRange(dataX, dataY);
  }, 2000);
  sciChartSurface.zoomExtents();
}

initSciChart();

This seems to work as expected.

Try it out?

  • You must to post comments
1
0

Thank Andrew! It works fine now.

Could you explain more about when should we use builder API instead of existing API?

  • Andrew Burnett-Thompson
    Builder API is basically a way to create charts using JSON or JavaScript objects, which many developers from other chart libraries like HighCharts or Plotly.js may be familiar with. It does the same thing as our programmatic API (which we prefer for dynamic applications). A useful feature of builder API also is the way you can serialize charts or configure templates of charts that can be re-used throughout your app.
  • Quyen Sy
    Thank you for your answer!
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies