How to use the DataFlex Chart Library
Lesson 4 - Changing an existing chart
Introduction
- Charts can be updated dynamically in several ways:
- Redraw the entire chart (not covered here, but available when changing chart properties)
- Append new data points (e.g., live-updating charts)
- Change existing data points
- Add new data series
- Remove data series
- This lesson demonstrates each of these operations.
Setting Up Buttons for Each Action
- In the Designer:
- Open the view.
- Drag four buttons into the layout.
- Name and label them:
- Add new data point
- Change existing data point
- Add new series
- Remove series
- Each button will trigger a different modification to the chart.
Adding a New Data Point
- Use the built-in procedure
Send AddNewDataPoint of oMyChart
- What the procedure requires
- Dataset name
- X-axis label
- A TPointData struct containing:
- yValue
- optional: tooltip text
- Implementation
- Create a TPointData variable.
- Generate a random number (0–50).
- Move it to data.yValue.
- Append it to the first series (“my data”).
- Use "NEW POINT" as the x-axis label.
- After compiling:
- Clicking the button adds points in real time to the chart.
Changing an Existing Data Point
Send ChangeDataPoint of oMyChart
- Arguments
- Dataset name (e.g., "my data")
- Index of the point to change
- New value
- Implementation
- Target index 0 of the first series.
- Generate a random number (0–50).
- Update the point.
- After compiling:
- Clicking the button updates the first value dynamically.
Adding a New Series
Send AddNewChartSeries of oMyChart
- Requires
- A TChartData struct (not an array this time)
- Implementation
- Create a TChartData variable.
- Generate a new random integer array.
- Loop through the array and move values into:
- chartData.aDataPoints[index].yValue
- Set the series label:
- Move "Newly Added Series" to chartData.sLabel
- Optionally set a color:
- Move "brown" to chartData.sSeriesColor
- Call AddNewChartSeries.
- After compiling:
- Clicking the button adds a new colored line series to the chart.
- The series also supports the onclick event.
Removing a Series
- Procedure
- Send RemoveDataSet of oMyChart
- Requires
- The name of the series to remove (e.g., "my data")
- After compiling:
- Clicking the button removes the selected series from the chart entirely.
Summary of What You Can Now Do
- By the end of this lesson, you can:
- Create a chart
- Append new data points
- Change existing data points
- Add and remove data series
- Enable user interaction through onclick events
- Dynamically update the chart without recreating it
- The chart library supports multiple JavaScript chart providers:
- Chart.js (MIT licensed, free)
- Highcharts (commercial license)
- Syncfusion (commercial license)
- Depending on your choice, make sure you meet the license requirements for your application.
REFERENCE LIBRARY
How to use the DataFlex Chart Library
