How to use the DataFlex Chart Library
Lesson 2 - Setting up a chart
Introduction
- Setting up a chart is straightforward.
- You fill a TChartData struct with your data and configure a few chart properties.
- The struct defines things like:
- The name of your data series
- Y-axis values
- The chart type
- The data series type (optional if you want mixed chart types).
Defining the Chart Data Struct
- The main struct is TChartData.
- You define:
- The series name
- An array of data points
- Optional tooltip values
- An optional chart type override (e.g., mixing a line and bar series in one chart)
Setting Chart Properties
- After setting up your struct, configure the chart object:
- Chart title (psTitle)
- X-axis labels (psXAxisLabels)
- Y-axis label (psYAxisLabel)
- Once these are set, the chart is ready to receive data.
Preparing a Demo Workspace
- A simple desktop web project is used for the demonstration.
- A view named ChartView is created and its PiWidth property is removed so it fills the full screen.
- A helper function RandomIntegerArray generates demo data.
Adding the Chart Library to Your Workspace
- To use the chart library:
- Add the DataFlex library
- Go to Tools → Maintain Libraries
- Click Add Library
- Select the .sws file corresponding to your DataFlex version
- The chart controls are now added to your workspace
- Add required JavaScript files
- Locate the AppHtml/ChartWrappers folder inside the library
- Copy the entire folder into your own project’s AppHtml directory
- Insert the provided <script> tags into your index.html
- Your workspace is now fully connected to the Chart Library.
Including the Chart Control
Use cChartControl.pkg
- Then create the chart object:
Object oMyChart is a cChart
Set piColumnSpan to 0
End_Object
Setting Chart Properties
- Using the Properties panel:
- Set psTitle → e.g. "My Chart"
- Set psYAxisLabel → e.g. "Numbers"
- These values control how the chart appears.
Filling the Chart with Data
TChartData[] chartData
Integer[] randomIntegers
String sLabels
Get RandomIntegerArray 10 to randomIntegers
- Loop through the integers
- For each index:
- Move the integer into the chartData series
- Set either:
yValue → the value displayed
sTooltip → the value shown on hover
- Build a comma-separated list of x-axis labels
- Special handling for index 0 (no leading comma)
- Apply labels
WebSet psXAxisLabels of oMyChart to sLabels
Send CreateChart of oMyChart chartData
- Compile → Run → Refresh the browser
- A basic chart appears.
Adding a Series Label
Move "My Data" to chartData[0].sLabel
- Compile → Refresh
- The legend now displays "My Data" and tooltips show series information.
Adding User Interaction (OnClick Event)
- Implement the OnClick event:
- Gives you:
- Label
- Value
- Absolute index
- Dataset name
- Example:
Send ShowInfoBox (SFormat("You clicked value%1 of dataset %2 , nValue, sDatasetName))
- Click a point → an info box appears.
- In a real application, this could navigate, open dialogs, or trigger custom logic.
Changing the Chart Type
- You can change the chart type with one property:
Set psChartType to "bar"
- Compile → Refresh
- The chart updates automatically (e.g., from line to bar).
Switching Charting Libraries
- To switch from Chart.js to Highcharts or Syncfusion:
Set psChartingLibrary to clHighCharts
- Compile → Refresh
- The chart now uses the selected library.
- Highcharts animations may differ (e.g., columns sliding in)
- Chart types may have library-specific names
- Example: Highcharts uses "column" instead of "bar".
REFERENCE LIBRARY
