TEChartsChart Component

TEChartsChart wraps the ECharts JavaScript library for use in TMS WEB Core applications:

• Automatic chart initialization and disposal
• ResizeObserver-based auto-resize (not timers)
• JSON-based option configuration
• Theme support (dark, light, custom)
• Event handling for click, hover, etc.

Location: Framework/Components/Charts/SOURCE/Obj.Charts.ECharts.pas

Required: ECharts library loaded in HTML (CDN or local)

Initialization

PROCEDURE InitChart;                     /// Initialize ECharts instance
PROCEDURE DisposeChart;                  /// Dispose and cleanup
PROCEDURE SetOption(Option: TJSObject);  /// Apply new chart options
PROCEDURE SetOptionJSON(JSON: STRING);   /// Apply options from JSON string

Data Updates

PROCEDURE UpdateSeries(Index: Integer; Data: TJSArray);
PROCEDURE AppendData(SeriesIndex: Integer; Data: TJSArray);
PROCEDURE ClearChart;                    /// Remove all data

Display Control

PROCEDURE Resize;                        /// Force resize recalculation
PROCEDURE ShowLoading;                   /// Show loading spinner
PROCEDURE HideLoading;                   /// Hide loading spinner
PROCEDURE SaveAsImage: STRING;           /// Get base64 PNG image

Set via series[].type in ChartOption:

From TAPIDataset

PROCEDURE LoadFromDataset(Dataset: TAPIDataset; 
   XField, YField: STRING; SeriesName: STRING = '');

From JSON Array

/// Build data array manually
VAR
   Data: TJSArray;
BEGIN
   Data := TJSArray.new;
   WHILE NOT Dataset.EOF DO
      BEGIN
         Data.push(TJSArray._of(
            Dataset.FieldByName('timestamp').AsString,
            Dataset.FieldByName('value').AsFloat));
         Dataset.Next;
      END;
   Chart.UpdateSeries(0, Data);
END;

From getchartdata() Result

/// PostgreSQL getchartdata() returns ready-to-use JSON
dsChartData.Load(
   PROCEDURE
   BEGIN
      Chart.SetOptionJSON(dsChartData.FieldByName('chartoption').AsString);
   END);

Built-in Themes

Chart.Theme := 'dark';    /// Dark background theme
Chart.Theme := 'light';   /// Light background theme

Custom Theme

/// Register custom theme in JavaScript first
/// echarts.registerTheme('myTheme', {...})

Chart.Theme := 'myTheme';

Runtime Color Override

/// Override colors in option
Option := TJSObject.new;
Option['color'] := TJSArray._of('#66b3ff', '#55d38a', '#ffbf66');
Chart.SetOption(Option);

Simple Line Chart

PROCEDURE TfrmChart.CreateLineChart;
VAR
   Option: TJSObject;
BEGIN
   Option := TJSJSON.parseObject('{
      "xAxis": {"type": "category", "data": ["Mon","Tue","Wed","Thu","Fri"]},
      "yAxis": {"type": "value"},
      "series": [{"type": "line", "data": [150, 230, 224, 218, 135]}]
   }');
   Chart.SetOption(Option);
END;

Time Series with Dataset

PROCEDURE TfrmChart.dsSensorDataAfterOpen(Dataset: TDataset);
VAR
   Option: TJSObject;
   Data: TJSArray;
BEGIN
   Data := TJSArray.new;
   Dataset.First;
   WHILE NOT Dataset.EOF DO
      BEGIN
         Data.push(TJSArray._of(
            Dataset.FieldByName('readingtime').AsString,
            Dataset.FieldByName('value').AsFloat));
         Dataset.Next;
      END;
   
   Option := TJSJSON.parseObject('{
      "xAxis": {"type": "time"},
      "yAxis": {"type": "value", "name": "Reading"},
      "series": [{"type": "line", "smooth": true}]
   }');
   Option['series'][0]['data'] := Data;
   Chart.SetOption(Option);
END;

Gauge Chart

PROCEDURE TfrmChart.UpdateGauge(Value: Double);
VAR
   Option: TJSObject;
BEGIN
   Option := TJSJSON.parseObject('{
      "series": [{
         "type": "gauge",
         "min": 0,
         "max": 100,
         "detail": {"formatter": "{value}%"},
         "data": [{"value": ' + FloatToStr(Value) + '}]
      }]
   }');
   Chart.SetOption(Option);
END;