Cloning UniformHeatmapSeries to add to multiple charts in JS

Hi Pramod,

OK I’ve had a go at creating a solution for you. Based on the first codepen in our JavaScript Heatmap Documentation and the Serialization/Deserialization API I’ve created a deepCopy function.

Find it in the Codepen here.

How this works. We create a heatmap series as normal but to clone it I’ve added a deepCopy function. This is defined as:

  // Now deepcopy the series
  const deepCopySeries = (series, includeData, seriesName) => {
    const excludeData = !includeData;
    // Serialize the series toJSON
    const json = series.toJSON(excludeData);
    // console.log(json);
    try {
      // using buildSeries, deserialize. This returns an array so take the first element
      const cloned = chartBuilder.buildSeries(
        wasmContext, // Must be wasmContext of the chart you want to place the series on
        json)[0];
      // Change the series Name
      cloned.dataSeries.dataSeriesName = seriesName;
      // Change the series ID so you can load two on same chart
      cloned.id = generateGuid();
      return cloned;
    } catch (error) {
      console.log(error.message);
    }
  };

Note the functions and types chartBuilder, generateGuid must be imported from “scichart”.

Next the clone is added back to the same chart. I offset the xStart, xStep to show that its a different series.

  // deepcopy/clone series including data and add on the chart
  const copySeries = deepCopySeries(heatmapSeries, true, "Cloned Heatmap");
  console.log(`I have a copied/cloned series ${copySeries}`);

  // Only point of this is to offset the clone so we can see it
  copySeries.dataSeries.xStart += 5;
  copySeries.dataSeries.yStart += 5;
  console.log(`I have a copied/cloned series ${copySeries}`);

  sciChartSurface.renderableSeries.add(copySeries);

  sciChartSurface.zoomExtents();

Some notes:

• If you are adding to a NEW chart then the wasmContext passed to chartBuilder.buildSeries must be the destination chart wasmContext. You can access this via sciChartSurface.webAssemblyContext2D
• If you are adding to the SAME chart then you need to generate a new series.id – which I have done above.
• You can optionally clone a series without data by passing in excludeData = true to the series.toJSON() function. This lets you do a shallow copy of series properties only. Otherwise, all data will be serialised (can be slow depending on dataseries size)

Let me know if this helps! If the solution works for you please upvote!

-Andrew

Thank you Andrew,
I am trying it now, at the baseline it works beautifully, even a small change in the colormap axismarker needs full serialization… which seems costly. I am trying out some hybrid methods, I will get back to you with my findings.

In the mean time, can you also help me with how to add an image (in our case it is the image of the exact scan, it has different resolution but exact same aspect ratio. I tried it as an svg annotation with image embedded in the svg, but scaling and alignment are not very intuitive to me.

Best,

Pramod