ONLINE HELP
 WINDEVWEBDEV AND WINDEV MOBILE

Help / Developing an application or website / Controls, windows and pages / Controls: Available types / Chart control / Types of charts
  • Overview
  • Characteristics of a Composite chart
  • Creating a composite chart in the editor
  • Creating a composite chart through programming
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaReports and QueriesUser code (UMC)
WEBDEV
WindowsLinuxPHPWEBDEV - Browser code
WINDEV Mobile
AndroidAndroid Widget iPhone/iPadIOS WidgetApple WatchMac CatalystUniversal Windows 10 App
Others
Stored procedures
Overview
A composite chart is a chart that displays several types of charts.
This help page presents:
Remark: a composite chart is not a 'Composite" chart but it is a chart containing several series, each one corresponding to a specific type of chart.
Characteristics of a Composite chart
Composite chart
In this chart:
1. Area chart
Area chart that constitutes the first chart of the composite chart. To create this chart, the first chart series was defined as being an Area (in the editor, "Series" tab) or through programming via grSeriesType.
2. Column chart
Column chart that constitutes the second chart of composite chart.
3. Mean
Mean displayed. You have the ability to add a trend line into a composite chart:
  • by the grSeriesType function.
  • in the editor, by adding a "Trend line" series.
4. Legend
The characteristics of the legend can be defined in the "Details" tab of the control description ("Edit chart legend").
5. Chart title.
The characteristics of the chart title can be defined in the "Details" tab of the control description ("Edit chart title"). You can define the chart title, its position and style.
6. Title of axes.
Creating a composite chart in the editor
To create a composite chart in the editor:
  1. Create a new chart control. Define the type of this chart.
  2. In the "General" and "Details" tabs of the description window of Chart control, define the main characteristics of your chart.
  3. In the "Series" tab of the description window of Chart control, add the necessaries series as well as their data source.
  4. For each series, specify in the lower section of the screen:
    • the type of chart associated with the series: Line, Area, Column, ...
    • the color of series, the opacity, the type of points, ...
  5. Depending on the type of chart associated with the series, define the properties specific to the series.
Creating a composite chart through programming
To create a composite chart through programming:
  1. Create a chart (grCreate).
  2. Configure the global options of this chart (grSmoothing, grLegend, ...).
  3. For each series:
  4. Draw the chart (grDraw).
Remark: grSeriesType can also be used to define automatic lines in relation to a series, to display a mean or a linear regression.
Code example:
nCurrentYear is int = CurrentYear()
nYearN1 is int = nCurrentYear - 1
nYearN2 is int = nCurrentYear - 2
 
// Create the chart
grCreate(CHART_CompositeChart, grArea)
 
// Light border color
grColor(CHART_CompositeChart, grColorBorder, White)
 
// Displays the gridlines
grGridlines(CHART_CompositeChart, True, grXCoordinate)
 
// Labels of X-axis
FOR i = 1 TO 12
grCategoryLabel(CHART_CompositeChart, i, Left(MonthNumberInAlpha(i), 1) + ".")
END
 
// The legend will be displayed on the right
grLegend(CHART_CompositeChart, grAtRight)
// The colors must not be gradient colors
grGradient(CHART_CompositeChart, False)
 
// Series 1: objective (area)
// - type of series
grSeriesType(CHART_CompositeChart, 1, grArea)
// - line thickness
grLineThickness(CHART_CompositeChart, 1, 2)
// - type of line
grSeriesLineType(CHART_CompositeChart, 1, LineDash)
// - opacity
grSeriesOpacity(CHART_CompositeChart, 1, 50)
// - label
grSeriesLabel(CHART_CompositeChart, 1, "TO objective")
// - color
grSeriesColor(CHART_CompositeChart, 1, HTMLToRGB("#64B5F6"))
// - add data
grAddData(CHART_CompositeChart, 1, 1, 170)
grAddData(CHART_CompositeChart, 1, 2, 240)
grAddData(CHART_CompositeChart, 1, 3, 120)
grAddData(CHART_CompositeChart, 1, 4, 100)
grAddData(CHART_CompositeChart, 1, 5, 150)
grAddData(CHART_CompositeChart, 1, 6, 180)
grAddData(CHART_CompositeChart, 1, 7, 200)
grAddData(CHART_CompositeChart, 1, 8, 270)
grAddData(CHART_CompositeChart, 1, 9, 270)
grAddData(CHART_CompositeChart, 1, 10, 205)
grAddData(CHART_CompositeChart, 1, 11, 180)
grAddData(CHART_CompositeChart, 1, 12, 190)
 
 
// Series 2 and 3: history A and A-1 (grouped column chart)
// - type of series
grSeriesType(CHART_CompositeChart, 2, grColumn)
grSeriesType(CHART_CompositeChart, 3, grColumn)
// - label
grSeriesLabel(CHART_CompositeChart, 2, "Yearly TO " + nCurrentYear)
grSeriesLabel(CHART_CompositeChart, 3, "Yearly TO " + nYearN1)
// - color
grSeriesColor(CHART_CompositeChart, 2, HTMLToRGB("#FFF176"))
grSeriesColor(CHART_CompositeChart, 3, HTMLToRGB("#AED581"))
// - add data (series 2)
grAddData(CHART_CompositeChart, 2, 1, 110)
grAddData(CHART_CompositeChart, 2, 2, 230)
grAddData(CHART_CompositeChart, 2, 3, 80)
grAddData(CHART_CompositeChart, 2, 4, 72)
grAddData(CHART_CompositeChart, 2, 5, 50)
grAddData(CHART_CompositeChart, 2, 6, 120)
grAddData(CHART_CompositeChart, 2, 7, 170)
grAddData(CHART_CompositeChart, 2, 8, 230)
grAddData(CHART_CompositeChart, 2, 9, 125)
grAddData(CHART_CompositeChart, 2, 10, 215)
 
// - add data (series 3)
grAddData(CHART_CompositeChart, 3, 1, 150)
grAddData(CHART_CompositeChart, 3, 2, 210)
grAddData(CHART_CompositeChart, 3, 3, 50)
grAddData(CHART_CompositeChart, 3, 4, 62)
grAddData(CHART_CompositeChart, 3, 5, 40)
grAddData(CHART_CompositeChart, 3, 6, 160)
grAddData(CHART_CompositeChart, 3, 7, 180)
grAddData(CHART_CompositeChart, 3, 8, 220)
grAddData(CHART_CompositeChart, 3, 9, 230)
grAddData(CHART_CompositeChart, 3, 10, 205)
grAddData(CHART_CompositeChart, 3, 11, 150)
grAddData(CHART_CompositeChart, 3, 12, 160)
 
 
// Series 4: deviation (column chart)
// - type of series
grSeriesType(CHART_CompositeChart, 4, grColumn)
// - label
grSeriesLabel(CHART_CompositeChart, 4, StringBuild("Deviation %1-%2", nCurrentYear, nYearN1))
// - color
grSeriesColor(CHART_CompositeChart, 4, HTMLToRGB("#E57373"))
// - add data
grAddData(CHART_CompositeChart, 4, 1, -40)
grAddData(CHART_CompositeChart, 4, 2, 20)
grAddData(CHART_CompositeChart, 4, 3, 30)
grAddData(CHART_CompositeChart, 4, 4, 10)
grAddData(CHART_CompositeChart, 4, 5, 10)
grAddData(CHART_CompositeChart, 4, 6, -40)
grAddData(CHART_CompositeChart, 4, 7, -10)
grAddData(CHART_CompositeChart, 4, 8, 10)
grAddData(CHART_CompositeChart, 4, 9, 20)
grAddData(CHART_CompositeChart, 4, 10, 10)
 
 
// Displays a mean for the TO line
// - type of series
grSeriesType(CHART_CompositeChart, 5, grLineMeanValue, 2)
// - label
grSeriesLabel(CHART_CompositeChart, 5, "Average TO "+ nCurrentYear)
// - type of line
grSeriesLineType(CHART_CompositeChart, 5, LineDotted)
// - line thickness
grLineThickness(CHART_CompositeChart, 5, 2)
// - color
grSeriesColor(CHART_CompositeChart, 5, RGB(215, 100, 177))
 
// Draw the chart
grDraw(CHART_CompositeChart)
Minimum version required
  • Version 22
This page is also available for…
Comments
Click [Add] to post a comment

Last update: 05/26/2022

Send a report | Local help