Chart (forms)

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. Therefore, to create a donut chart, we will start from the pie chart.

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 the Category as X Axis Values

To use the category name on the x axis as 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 by calling 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 ]