SciChart Android 3D Charts API > Xamarin 3D Tutorials > Xamarin 3D Tutorial 02 - Creating a Chart and Add a Data Series
Xamarin 3D Tutorial 02 - Creating a Chart and Add a Data Series

First of all we need to declare SciChartSurface3D, which is the root of 3D chart. This is the Android View that you will be adding to your application whenever you need a 3D chart.

First we declare SciChartSurface3D inside XML with layout.

Example Title
Copy Code
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.scichart.charting3d.visuals.SciChartSurface3D
        android:id="@+id/chart3d"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

And then use it in code:

Example Title
Copy Code
protected override void OnCreate(Bundle bundle)
{
     base.OnCreate(bundle);
     // Set our view from the "main" layout resource
     SetContentView(Resource.Layout.Main);
     // Get our chart from the layout resource,
     var chart3D = FindViewById<SciChartSurface3D>(Resource.Id.Chart);
     // Create a numeric X axis
     var xAxis3D = new NumericAxis3D() {GrowBy = new DoubleRange(0.1, 0.1)};
     // Create a numeric Y axis
     var yAxis3D = new NumericAxis3D() {GrowBy = new DoubleRange(0.1, 0.1)};
   
     // Create a numeric Z axis
     var zAxis3D = new NumericAxis3D() {GrowBy = new DoubleRange(0.1, 0.1)};
     using (chart3D.SuspendUpdates())
     {
          chart3D.XAxis = xAxis3D;
          chart3D.YAxis = yAxis3D;
          chart3D.ZAxis = zAxis3D;
     }
}

After this you should see empty 3D chart which has XAxis, YAxis and ZAxis.

 

Adding 3D DataSeries and RenderableSeries

To draw some data in chart we need to create 3D DataSeries and RenderableSeries. The DataSeries is a class which is responsible for storing data which should be displayed and RenderableSeries is a class which determines how data should be visualized by chart.

First, lets declare the 3D DataSeries and generate some data for it:

Example Title
Copy Code
var dataManager = DataManager.Instance;
var dataSeries3D = new XyzDataSeries3D<double, double, double>();
for (int i = 0; i < 100; i++)
{
     double x = dataManager.GetGaussianRandomNumber(5, 1.5);
     double y = dataManager.GetGaussianRandomNumber(5, 1.5);
     double z = dataManager.GetGaussianRandomNumber(5, 1.5);
     dataSeries3D.Append(x, y, z);
}

The next step is to create 3D RenderableSeries. In our case we're going to display data as a point cloud using ScatterRenderableSeries3D.

Example Title
Copy Code
 var pointMarker3D = new SpherePointMarker3D()
 {
     FillColor = Color.Lime,
     Size = 5f
 };
 var renderableSeries3D = new ScatterRenderableSeries3D()
 {
     PointMarker = pointMarker3D,
     DataSeries = dataSeries3D
 };

The last step is to add created series into RenderableSeries collection of chart.

Example Title
Copy Code
 using (chart3D.SuspendUpdates())
 {
     chart3D.XAxis = xAxis3D;
     chart3D.YAxis = yAxis3D;
     chart3D.ZAxis = zAxis3D;
    
     chart3D.RenderableSeries.Add(renderableSeries3D);
 }