GXChart Control

Official Content
This documentation is valid for:

Control Description

The GXChart control enables you to display incredible dinamically-generated charts on your website. The GXChart control is based on GXchart.com, which is an online service that instantly creates any chart you want to visualize according to the data provided. More information can be found at www.gxchart.com.

GXChart control 01 GXChart control 02

Using the control

In order to start using the control, you need to drag-and-drop the Chart control into a web panel (or transaction). You will then see the chart in your web form and its properties will be shown in the Properties window (which can be activated from the View menu). In addition, when you drop the chart control, an SDT is consolidated: the GXChart.

The idea here is that you will give the chart control a GXChart SDT-based variable containing the x,y values that have to be displayed in the chart. The GXChart SDT contains 2 fields:

  • Categories: these are the X values to be displayed in the X axis.
  • Series (collection):
    • Name: the name of the series
    • Values: these are the Y values. Each of the values in a series belongs to a category. That is to say, the series should have as many values as there are categories (X=category, Y= series value)

As you may have realized, a Series in a GXChart actually contains a collection of series. This allows you to chart "more than one value" belonging to a category. Consequently, it is possible to create a chart representing, for example, the incomes and expenses for a given period.

Example:

&gxChart.Categories.Add("May")
&gxChart.Categories.Add("June")
&gxChart.Categories.Add("July")
&gxChart.Categories.Add("August")
&serie.Name = "Incomes"
&serie.Values.Add(50)
&serie.Values.Add(55)
&serie.Values.Add(60)
&serie.Values.Add(65)
&gxChart.Series.Add(&serie)
&serie =new()
&serie.Name = "Outcomes"
&serie.Values.Add(20)
&serie.Values.Add(25)
&serie.Values.Add(30)
&serie.Values.Add(35)
&gxChart.Series.Add(&serie)
//&gxchart is defined as GXChart //&serie is defined as Gxchart.serie

The example shown above will create a graph as follows:

GXChart control

sample uploaded to gxopen

Control Properties

Property Description
Title Main chart title
X Axis title Title to show on X axis
Y Axis title Title to show on Y axis
Width Image width in pixels
Height Image height in pixels
BG Color 1 Gradient fill background color for the top left corner
BG Color 2 Gradient fill background color for the bottom right corner
Chart BG Color 1 Gradient fill background color of the chart pane (only for X-Y chart types) in the top left corner
Chart BG Color 2 Gradient fill background color of the chart pane (only for X-Y chart types) in the bottom right corner
Draw Shadow Specify shadows' displayed status
Draw Border Specify border style
Show Values Specify whether each value should be displayed
Opacity (Alpha) Alpha value for chart items
Legend Position Legend position
Hatch Specify the Hatch Fill for black and white charts
Codec Specify the image type
Title Font Size Specify the title font size
Category Font Size Specify the legends font size (Categories, Values, etc.)
Category Order Specify the category order

Colors

Colors to be used in the different Data Series

Scale Specify first value of the scale

More information GXchart 3.0








Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.