SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, iOS Chart, Android Chart and JavaScript Chart Components

1
0

Good day đŸ™‚

I am kinda new to SciChart …
Still under learning process on how to use it …
I was doing this particular task assigned and I got stuck …
May I know to create a Trace Setting Panel using custom annotation with html element inside ?

This is my index.js code :

import { SciChartSurface } from "scichart/Charting/Visuals/SciChartSurface";
import { NumericAxis } from "scichart/Charting/Visuals/Axis/NumericAxis";
import { FastLineRenderableSeries } from "scichart/Charting/Visuals/RenderableSeries/FastLineRenderableSeries";
import { XyDataSeries } from "scichart/Charting/Model/XyDataSeries";

async function initSciChart() {

    SciChartSurface.setRuntimeLicenseKey("...");

    const { sciChartSurface, wasmContext } = await SciChartSurface.create("scichart-root");

    // Create an X,Y Axis and add to the chart
    const xAxis = new NumericAxis(wasmContext);
    const yAxis = new NumericAxis(wasmContext);

    sciChartSurface.xAxes.add(xAxis);
    sciChartSurface.yAxes.add(yAxis);

    const lineSeries1 = new FastLineRenderableSeries(wasmContext, { stroke: "Yellow"});
    sciChartSurface.renderableSeries.add(lineSeries1);
    lineSeries1.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 3], yValues: [2, 4]});

    const lineSeries2 = new FastLineRenderableSeries(wasmContext, { stroke: "Red"});
    sciChartSurface.renderableSeries.add(lineSeries2);
    lineSeries2.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [3, 8]});

    const lineSeries3 = new FastLineRenderableSeries(wasmContext, { stroke: "Blue"});
    sciChartSurface.renderableSeries.add(lineSeries3);
    lineSeries3.dataSeries = new XyDataSeries(wasmContext, {xValues: [1, 7], yValues: [6, 3]});

    const lineSeries4 = new FastLineRenderableSeries(wasmContext, { stroke: "Green"});
    sciChartSurface.renderableSeries.add(lineSeries4);
    lineSeries4.dataSeries = new XyDataSeries(wasmContext, {xValues: [10, 6], yValues: [6, 3]});

    const lineSeries5 = new FastLineRenderableSeries(wasmContext, { stroke: "Purple"});
    sciChartSurface.renderableSeries.add(lineSeries5);
    lineSeries5.dataSeries = new XyDataSeries(wasmContext, {xValues: [15, 8], yValues: [12, 6]});

    const lineSeries6 = new FastLineRenderableSeries(wasmContext, { stroke: "Orange"});
    sciChartSurface.renderableSeries.add(lineSeries6);
    lineSeries6.dataSeries = new XyDataSeries(wasmContext, {xValues: [13, 8], yValues: [2, 1]});

}
initSciChart();

This is my index.html code:

<html lang="en-us">

<head>
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>SciChart.js Task 1</title>
    <script async type="text/javascript" src="bundle.js"></script>
    <style>
        body {
            font-family: 'Arial'
        }
    </style>
</head>

<body>
    <h1>task</h1>
    <p>task 1</p>

    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px;"></div>

</body>

</html>

Together I will attach my output (from the above code) and also the output which I suppose to get (which I’m not sure how to do it …

Hope to hear from you soon.

Thank you in advance.

Version
2.2.2407
Images
  • Andrew Burnett-Thompson
    This is a great question & an opportunity for us to demonstrate the flexibility of SciChart. I will talk to the team and get back to you. Best regards, Andrew
  • Andrew Burnett-Thompson
    Hi Samini, quick question, are you using React or Vue? We’re working on an example for you. Best regards, Andrew
  • samini retnam
    Good day; I am extremely sorry for the late response … I’m using React … Thank you …
  • You must to post comments
1
0

Hello,

There are several options that you can use to make a custom legend in SciChart.js.

Method 1 – Custom Annotation

One of them as you mentioned is using a Custom Annotation and adding HTML directly into an SVG template.
Here is an example on our Github: Annotations example.

Method 2 – Custom Legend class

Another one is to create a Custom Legend by overriding a method for generating an inner HTML string.

Here’s a code example on CodeSandbox

Custom Legend Example

const legendModifier = new LegendModifier({});
 // @ts-ignore
window.changeStroke = function changeSeriesStroke(seriesId: string) {
const series = sciChartSurface.renderableSeries.getById(seriesId);
const selector = document.getElementById(
  `${seriesId}-color-selector`
) as HTMLSelectElement;
const colorValue = selector?.value;
series.stroke = colorValue;
selector.value = colorValue;
// make sure that legend is updated and show proper color label
legendModifier.sciChartLegend.invalidateLegend();
};
const getHtmlForSeries = (series: FastLineRenderableSeries): string => {
let str = `<span class="scichart__legend-item" style="display: flex; align-items: center; margin-right: 4px; white-space: nowrap;">`;
str += `<label for="${series.id}" style="background-color: ${series.stroke}; margin: 4px; width: 30px; height: 13px;"></label>`;
str += `<label for="${series.id}" style="margin-left: 4px;">${series.id}</label>`;
str += `<select id="${series.id}-color-selector" onchange="changeStroke('${
  series.id
}')" name="colors">
      <option ${
        series.stroke === "Blue" ? "selected" : ""
      } value="Blue">Blue</option>
      <option ${
        series.stroke === "Green" ? "selected" : ""
      } value="Green">Green</option>
      <option ${series.stroke === "Red" ? "selected" : ""}
        value="Red">Red</option>
      <option ${
        series.stroke === "Yellow" ? "selected" : ""
      } value="Yellow">Yellow</option>
      <option ${
        series.stroke === "Orange" ? "selected" : ""
      } value="Yellow">Orange</option>
      <option ${
        series.stroke === "Purple" ? "selected" : ""
      } value="Yellow">Purple</option>
  </select>`;
str += `</span>`;
return str;
};
class CustomLegendControl extends SciChartLegend {
public getLegendHTML(
  placement: ELegendPlacement,
  textColor: string,
  backgroundColor: string,
  margin: Thickness,
  orientation: ELegendOrientation,
  showCheckboxes: boolean,
  showSeriesMarkers: boolean,
  items: TLegendItem[]
): string {
  let body = "";
  sciChartSurface.renderableSeries
    .asArray()
    .forEach((series: IRenderableSeries) => {
      body += getHtmlForSeries(series as FastLineRenderableSeries);
    });
return getLegendContainerHtml(
    placement,
    textColor,
    backgroundColor,
    margin,
    body
  );
}
}
legendModifier.sciChartLegend = new CustomLegendControl();
sciChartSurface.chartModifiers.add(legendModifier);

Method 3- React Example

Or alternatively, you can simply reference the chart from your Custom Control.

Here’s another Code sandbox example

Then you can apply proper positioning accordingly to your use case ( e.g. by using sciChartSurface.seriesViewRect as a base container)

  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.