I have a license for 2D plots and now I am trying to evaluate the 3D plots. I used the most basic example provided to plot 3 axis.
import { useEffect, useRef } from "react";
import React from 'react'
import {
SciChart3DSurface,
NumericAxis3D,
Vector3,
SciChartJsNavyTheme,
MouseWheelZoomModifier3D,
OrbitModifier3D,
ResetCamera3DModifier,
NumberRange,
ENumericFormat,
EWatermarkPosition,
chartModifiers
} from "scichart"
const createChart = async (divElementId) => {
SciChart3DSurface.useWasmFromCDN();
const { wasmContext, sciChart3DSurface } = await SciChart3DSurface.createSingle(divElementId, {
//theme: new SciChartJsNavyTheme(),
worldDimensions: new Vector3(300, 200, 300),
cameraOptions: {
position: new Vector3(300, 300, 300),
target: new Vector3(0, 50, 0),
}
});
sciChart3DSurface.xAxis = new NumericAxis3D(wasmContext, {
drawMajorGridLines: true,
drawMinorGridLines: true,
drawLabels: true,
axisTitle: "X Axis, 4-decimal places",
visibleRange: new NumberRange(0, 1000),
labelFormat: ENumericFormat.Scientific,
cursorLabelFormat: ENumericFormat.Decimal,
labelPrecision: 4,
maxAutoTicks: 5,
titleOffset: 50,
tickLabelsOffset: 10,
})
sciChart3DSurface.yAxis = new NumericAxis3D(wasmContext, {
axisTitle: "Y Axis, 2 dp, prefix & postfix",
labelPrecision: 2,
labelPrefix: "$",
labelPostfix: " USD",
visibleRange: new NumberRange(10, 1000),
maxAutoTicks: 5,
titleOffset: 50,
tickLabelsOffset: 10,
})
sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, {
axisTitle: "Z Axis, 0 dp",
visibleRange: new NumberRange(0, 1000),
labelPrecision: 0,
labelPostfix: " kWh",
maxAutoTicks: 5,
titleOffset: 50,
tickLabelsOffset: 10,
})
//sciChart3DSurface.zAxis = new NumericAxis3D(wasmContext, { axisTitle: "Z Axis" });
sciChart3DSurface.chartModifiers.add(
new MouseWheelZoomModifier3D(), // provides camera zoom on mouse wheel
new OrbitModifier3D(), // provides 3d rotation on left mouse drag
new ResetCamera3DModifier()); // resets camera position on double-click
return sciChart3DSurface
};
const ThreeDPlotTemplate = (props) => {
const sciChart3DSurfaceRef = useRef()
useEffect(() => {
sciChart3DSurfaceRef.current = createChart(`scichart-root-${props.id}`); // Note, does not delete on unmount (todo later)
console.log(sciChart3DSurfaceRef.current.then(value => console.log(value)))
}, []);
return (
<div
className="wrapper"
style={{
width: "100%",
height: "100%",
position: "relative",
}}
>
<div
id={`scichart-root-${props.id}`}
style={{
width: "100%",
height: "100%",
position: "relative",
}}
></div>
<div
className="titleWrapper"
style={{
position: "absolute",
width: "100%",
top: "35%",
textAlign: "center",
pointerEvents: "none",
color: "#ffffff77"
}}
>
<p className="title">SciChart.js 3D Chart Example</p>
<p className="subTitle">Drag the mouse to rotate, use MouseWheel to zoom</p>
<p className="subTitle">Double-click to reset zoom</p>
</div>
</div >
)
}
export default ThreeDPlotTemplate
But i am getting just a blank screen Please see attached image. Is this an issue we licensing? or am i missing something?
Thanks,
Pramod
- pramod butte asked 6 months ago
- last edited 6 months ago
- You must login to post comments
Hi
Yes this is a licensing issue. The Community version for 3D does not work if you have a full 2D license applied. Please post this question to [email protected] and we will send you a 2D + 3D trial key.
Regards
David
- David Burleigh answered 6 months ago
- You must login to post comments
Please login first to submit.