Important: This tutorial uses the experimental forms module. To use fully supported charts, use the ui module.

You can download an example implementation here. To import it to your workspace, go to Import > Existing Projects into Workspace; select Select archive file and locate the charts.zip file and select ChartTutorial.

Creating a Donut Chart

A donut chart is a special case of the pie chart: the pie slice series have the inner size plotting property larger than 0 and a custom size.

To create a donut chart, do the following:

1. Insert a pie chart component into the form.
2. Define the data series: you can do so either in the Pie slice series property in the Properties view of the Pie Chart or using the addPieSliceSeries() method.

   def PieSliceSeries innerSeries := new PieSliceSeries("Inner Slice Series", [
          new forms::PieSlice("Big slice", 10),
          new forms::PieSlice("Small slice", 10)
        ]
     );
   def PieSliceSeries middleSeries := new PieSliceSeries("Middle Slice Series", [
          new forms::PieSlice("Another small slice", 30),
          new forms::PieSlice("Another small slice", 20),
          new forms::PieSlice("Another big slice", 50)
        ]
     );
   def PieSliceSeries outerSeries := new PieSliceSeries("Outer Slice Series", [
          new forms::PieSlice("Another small slice", 30),
          new forms::PieSlice("Another small slice", 20),
          new forms::PieSlice("Another big slice", 50)
       ]
     );
   //The dataseries as rendered in the order (z-index) as in the returned list
   //(outerSeries is the lowest):
   [ outerSeries, middleSeries, innerSeries ]
   

3. Define the required inner size and total size in the plotting options for each series.

   ...
   def PlotOptionsPie middleSeriesPlotting := new PlotOptionsPie(
     //inner border at the perimeter of the chart:
     innerSize -> new AttributeSize("20%"),
     size -> new AttributeSize("60%"),
     startAngle -> 90, borderWidth -> 2);
    
   innerSeries.plotOptions := middleSeriesPlotting;
   [ outerSeries, middleSeries, innerSeries ]
   

   

Creating a Bar Chart

To render a data series as a bar chart, do the following:

1. Insert the Cartesian Chart component into your form.
2. Define its data series in its Properties view.
3. Set the plotOptions property of the data series to PlotOptionColumn.

   myDataSeries.plotOptions := new PlotOptionsColumn(
             dataLabels -> new DataLabels(formatter -> "this.y"),
             color -> new Color(0, 255, 150));
   

Note that CategoryDataSeries are plotted as bar charts by default.

Example TimeDataSeries plotted as a bar chart

def TimeDataSeries tds := new TimeDataSeries([
   new TimeDataSeriesItem(now(), 1, 3),
   new TimeDataSeriesItem(now()+seconds(3), -1, 5),
   new TimeDataSeriesItem(now()+seconds(5), 2, 7)]
);
tds.plotOptions := new PlotOptionsColumn(range -> true);
[tds]

Setting Category as X Axis Values

To use the category name as the x axis values, set the X Axis to an Axis with category -> []. You can do so directly in the X Axis field on the Detail tab of the Properties view or anywhere with the addXAxis() method of the chart.

c.addXAxis( new Axis(categories -> []))

If you need to override some of the category names, define the names in the categories list of the chart; for example, c.addXAxis( new Axis(categories -> ["Year 2014", null , "Year 2016"])) overrides the category names of the first and third item.

Creating an Area Chart

To render a data series as an area chart in the Cartesian Chart, set its plot options to PlotOptionsLineArea.

def CategoryDataSeries cds := new CategoryDataSeries(
  [
     new CategoryDataSeriesItem("first", 1, 4),
     new CategoryDataSeriesItem("second", -1, 2),
     new CategoryDataSeriesItem("third", 0, 3)
  ]
);
cds.plotOptions := new PlotOptionsLineArea(spline -> true, range -> true);
[ cds ]

Creating an Area Chart with Time X Axis

To create an area chart that will have time axis, use the TimeDataSeries in the Cartesian Chart and set the type of the X axis to AxisType.datetime.

Creating a Line Chart

By default, ListDataSeries are rendered as line charts. If you want to plot another series type as a line chart, set its plot options to PlotOptionsLine.

cds.plotOptions := new PlotOptionsLine(spline -> true);
[ cds ]