JavaScript Charting Documentation - SciChart JavaScript Charts SDK v3.x
OLD 3D Tutorial 03 - Creating a Chart and Add a Data Series

There are four key files here. Two Java classes and two layouts:

1. MainActivity.java

  • Create a reference to CreateScatter3DChartFragment exampleFragment
  • Reads the SciChart license.
  • Inits SciChartBuilder.init(this) and SciChart3DBuilder.init(this);
  • Inflates activity_main.

2. CreateScatter3DChartFragment.java

  • Extends android.app.Fragment.
  • Inflates R.layout.example_single_chart3d_fragment.
  • Creates a Camera3D camera which is used to project world coordinates (x,y,z) onto a 2D plane, i.e., the device screen.
  • Populates XyzDataSeries3D dataSeries with data.
  • Inits a SciChart3DBuilder which it uses to create SciChartSurface3D surface3d.
  • Creates an EllipsePointMarker3D pointMarker3D.
  • Passes the dataseries and pointMarker3D into the RenderableSeries ScatterRenderableSeries3D.

3. activity_main.xml

  • Contains the fragment com.scichart.examples.fragments.charts3d.CreateScatter3DChartFragment in a LinearLayout.

4. example_single_chart3D_fragment.xml

  • Inflates com.scichart.charting3d.visuals.SciChartSurface3D.

Step by step, this is:

Add the license to MainActivity

License
Copy Code 
super.onCreate(bundle);
        String license = "<LicenseContract>\n" +
                "  <Customer>xxxxxxxx</Customer>\n" +
                "  <OrderId>Documentation Use Only</OrderId>\n" +
                "  <LicenseCount>1</LicenseCount>\n" +
                "  <IsTrialLicense>true</IsTrialLicense>\n" +
                "  <SupportExpires>10/01/2019 00:00:00</SupportExpires>\n" +
                "  <ProductCode>SC-ANDV3-PRO</ProductCode>\n" +
                "  <KeyCode>xxxxx</KeyCode>\n" +
                "</LicenseContract>";

        try {
            SciChartSurface.setRuntimeLicenseKey(license);
        }
        catch (Exception e) {
            Log.e("scichart", e.printStackTrace();)
        }
  • First we inflate a LinearLayout R.layout.activity_main which contains the Fragment com.scichart.examples.fragments.charts3d.CreateScatter3DChartFragment:
Example Title
Copy Code 
public class MainActivity extends Activity {
    private CreateScatter3DChartFragment exampleFragment;
    private CustomDrawerLayout drawerLayout;
    private ImageButton settingsButton;
    @Override
    protected void onCreate(Bundle bundle) {
        SciChartBuilder.init(this);
        SciChart3DBuilder.init(this);
        ...
       
     setContentView(R.layout.activity_main);
  • We use ButterKnife, which is an SDK that lets you use annotation to inflate layouts, to inflate a com.scichart.charting3d.visuals.SciChartSurface3D.
Example Title
Copy Code 
public class CreateScatter3DChartFragment extends Fragment {
    protected final SciChart3DBuilder sciChart3DBuilder = SciChart3DBuilder.instance();
    @BindView(R.id.chart3d)
    SciChartSurface3D surface3d;
  • This inflates example_single_chart3d_fragment.xml:
Example Title
Copy Code 
 <com.scichart.charting3d.visuals.SciChartSurface3D
        android:id="@+id/chart3d"
  • Now the heavy lifting begins in CreateScatter3DChartFragment.init(). We first create some data:
Example Title
Copy Code 
protected void initExample() {
        final Camera3D camera = sciChart3DBuilder.newCamera3D().build();

        final NumericAxis3D xAxis = sciChart3DBuilder.newNumericAxis3D().withGrowBy(.1, .1).build();
        final NumericAxis3D yAxis = sciChart3DBuilder.newNumericAxis3D().withGrowBy(.1, .1).build();
        final NumericAxis3D zAxis = sciChart3DBuilder.newNumericAxis3D().withGrowBy(.1, .1).build();
        final XyzDataSeries3D<Double, Double, Double> dataSeries = new XyzDataSeries3D<>(Double.class, Double.class, Double.class);
        for (int i = 0; i < 5; i++) {
            final double x = i;
            final double y = i;
            final double z = i;
            dataSeries.append(x, y, z);
        }
  • Then we make an EllipsePointMarker3D pointMarker3D and ScatterRenderableSeries3D rs and bind that to the XyzDataSeries3D dataseries. A pointMarker means the type, color, and size of the points in the graph.
Example Title
Copy Code 
    final EllipsePointMarker3D pointMarker3D = sciChart3DBuilder.newEllipsePointMarker3D()
                .withFill(ColorUtil.LimeGreen)
                .withSize(2f)
                .build();
        final ScatterRenderableSeries3D rs = sciChart3DBuilder.newScatterSeries3D()
                .withDataSeries(dataSeries)
                .withPointMarker(pointMarker3D)
                .build();
        surface3d.setCamera(camera);
  • Now we set the Camera, XYZ axes, and render the chart:
Example Title
Copy Code 
        surface3d.setCamera(camera);
        surface3d.setXAxis(xAxis);
        surface3d.setYAxis(yAxis);
        surface3d.setZAxis(zAxis);
        surface3d.getRenderableSeries().add(rs);
        surface3d.getChartModifiers().add(sciChart3DBuilder.newModifierGroupWithDefaultModifiers().build());

The resulting chart looks like this: