TclChart

function AddNewChart(AComponent: TCLComponent; xName, , xTitle: string): TclChart;

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined chart should be written.

xTitle : You can add a title.

This component, used to create graphics and drawings, can be used on a form or within another container. The TclChart component supports the creation of various data visualizations. These chart types include line charts, bar charts, pie charts, and area charts.

Feature	Use of	Definition
TClChart	Chart1 : TClChart;	A variable belonging to the TClChart class is created.
AddNewChart	Chart1 = Form1.AddNewChart(Form1,'Chart1','Clomosy Inc');	A new TClChart is added to the form.
Width	Chart1.Width = 150;	Allows adjusting the width of the chart.
Height	Chart1.Height = 50;	Allows adjusting the height of the chart.
Align	Chart1.Align = alTop;	With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins	Chart1.Margins.Left = 50; // Right, Top, Bottom	With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
clLoadDataFromJSONStr clLoadDataFromDataset	Chart1.clLoadDataFromJSONStr(simpleJSONStr); //simpleJSONStr: String; Chart1.clLoadDataFromDataSet(Qry); // Qry(TclDataSet): TclSQLiteQuery	There are 2 different methods to add data to the TClChart component. With the json structure, data can be added or the data can be added by taking the data over the data set. Examples of these are given at the bottom of the page. Their identification procedures are as follows:
XAxisText	Chart1.XAxisText = 'DeviceType';	The x-axis area given for the values ​​to be compared
ChartItemsValue	Chart1.ChartItemsValue = 'Percent';	The values ​​of the items entered on the X axis come and the graph is formed over these values.
ChartItemText	Chart1.ChartItemText = 'Device Sales';	TIt is the title of graphic elements.
ChartTitle	Chart1.ChartTitle = 'Samsoong Inc';	The title of the chart.
Charttype	Chart1.Charttype = clCBar;	The ChartType parameter is used to change the graphic display. There are 4 graphic views available. Graph view properties definitions: clCLine : Line view. clCBar : It's a bar view. clCPie : It's a pie view. clCSizedPie : It is a sized pie view. clCLine clCBar clCPie clCSizedPie
SetAutoXRange - SetAutoYRange	Chart1.SetAutoXRange(4); Chart1.SetAutoYRange(3);	These procedures are used to adjust the automatic ranges of the X and Y axes in a graph. They allow you to enable or disable specific behaviors for determining the axis ranges based on the data displayed on the graph. The parameter values can be set as follows: 0: arDisabled: Automatic range is disabled. This means that axis ranges are set manually and will not be adjusted automatically. 1: arEnabled: Automatic range is enabled. In this case, the data range on the X or Y axis is automatically calculated and adjusted. 2: arEnabledZeroBased: Automatic range is enabled and the axis range is started from zero. This ensures that the axis starts at zero, and the remaining range is calculated automatically. 3: arCommon: A common automatic range is used. This option typically allows for the same range to be used for multiple datasets. 4: arCommonZeroBased: Common range is started from zero. The same zero-based range is used for all datasets.
SetInteractionPanning	Chart1.SetInteractionPanning(True);	It is used to control panning interaction in graphical components. Panning allows the image within a graph or visualization area to be moved horizontally or vertically. This feature is particularly useful in large datasets, as it enables users to view different parts of the graph effectively.
SetInteractionScaleMode	Chart1.SetInteractionScaleMode(2);	It is used to control the scaling interaction in a graphical component. This feature determines how users can perform scaling (zoom) interactions within the graph or visualization area. The parameter values can be set as follows: 0: smNone: Scaling interaction is disabled. Users cannot zoom in or out on the graph. 1: smHorizontal: Only horizontal scaling is enabled. Users can zoom in or out on the graph horizontally. 2: smVertical: Only vertical scaling is enabled. Users can zoom in or out on the graph vertically.
XValuesAngle	Chart1.XValuesAngle = 20.0;	It specifies the angle of the value labels on the X axis. This angle is typically adjusted in degrees.
Legend	Chart1.Legend.Visible = True;	It is a property that determines the visibility of the legend on the chart. When set to False, the legend becomes invisible on the chart.
Series	Chart1.Series.Clear;	It allows you to reset the chart by removing the existing data series on the chart.

When you want to specify the colors of the values ​​on the chart, you can color them by typing "color":"clOrange" as in the example.

simpleJSONStr = '[{ "DeviceType": "Notebook","Percent": 50,"color":"clOrange"}]'; //simpleJSONStr: String;

Available colors:
Apart from this color, there are varieties of colors that you can give. These:

• clGreen
• clRed
• clYellow
• clBlue
• clYellowGreen
• clAzure
• clTomato
• clPurple
• clPink
• clGold
• clPeru
• clOrange

Example : Usage with JSON Data

 var
   MyForm:TclForm;
   testChart : TClChart;
   simpleJSONStr : String;
 
 { 
   MyForm = TclForm.Create(Self);
   testChart = MyForm.AddNewChart(MyForm,'testChart','Samsoong');
   simpleJSONStr = '[{ "DeviceType": "Notebook","Percent": 50,"color":"clOrange"},{"DeviceType" : "Tablet","Percent": 35,"color":"clPink"},{"DeviceType" : "Phone","Percent": 73,"color":"clTomato"}]';
 
   testChart.Charttype = clCBar;
   testChart.XAxisText = 'DeviceType';
   testChart.ChartItemText = 'Device Sales';
   testChart.ChartItemsValue = 'Percent';
   testChart.ChartTitle = 'Samsoong Inc';
   testChart.clLoadDataFromJSONStr(simpleJSONStr);
   MyForm.Run;
 
 }

Output:

Example: Usage with Data Set

  var
    MyForm : TclForm;
    Chart1 : TClChart;
  
  void SqLiteInsertData;
  {
    try
      Clomosy.DBSQLiteQuery.Sql.Text = '
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (1, ''Vista'',''Microsoft Windows'',''tablet'', 200);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''XP'',''Microsoft Windows'',''tablet'', 500);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Alpha'',''Microsoft Windows'',''computer'', 104);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Public Beta'',''MacOS'',''computer'', 400);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (2, ''Tiger'',''MacOS'',''tablet'', 350);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Leopard'',''MacOS'',''computer'', 125);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (3, ''Lollipop'',''Android'',''mobile'', 325);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Alpha'',''Android'',''tablet'', 123);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (4, ''Gnome'',''Pardus'',''computer'', 300);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Raspberry'',''Pardus'',''computer'', 175);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (5, ''Tiger'',''MacOS'',''mobile'', 10);
    INSERT INTO OperatingSystem (id, model,operating_system,device_type, sales_figure) VALUES (6, ''Alpha'',''MacOS'',''ipad'', 104);';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      ShowMessage('Adding data to the table was successful!');
    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
  void SqLiteConnectionCreateTable;
  var
    TableExists: Boolean;
  {
    try
      Clomosy.DBSQLiteConnect(Clomosy.AppFilesPath + 'DBProductSales.db3', '');
 
      // Check if the table exists
      Clomosy.DBSQLiteQuery.Sql.Text = 'SELECT name FROM sqlite_master WHERE type="table" AND name="OperatingSystem";';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      // Check the results
      TableExists = not Clomosy.DBSQLiteQuery.Eof;
      
      // Create the table if it does not exist
      if not (TableExists)
      {
        Clomosy.DBSQLiteQuery.Sql.Text = 'CREATE TABLE OperatingSystem (
                                        	id INTEGER NOT NULL,
                                        	model TEXT NOT NULL,
                                        	operating_system TEXT NOT NULL,
                                        	device_type TEXT NOT NULL,
                                        	sales_figure INTEGER NOT NULL
                                          )';
        Clomosy.DBSQLiteQuery.OpenOrExecute;
        
        ShowMessage('Table successfully added to the database!');
        SqLiteInsertData;
      } else
      {
        ShowMessage('The Products table already exists.');
      }

    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
 void AddDataToChart;
 Var
    Qry : TClSQLiteQuery;
 {
    try
      Qry = Clomosy.DBSQLiteQueryWith('SELECT SUM(sales_figure) AS SALES, case when device_type ='+QuotedStr('tablet')+' 
      then '+QuotedStr('clPink')+' when device_type ='+QuotedStr('mobile')+' then '+QuotedStr('clBlue')+' 
      else '+QuotedStr('clGold')+' end  as color ,  device_type FROM OperatingSystem
      GROUP BY device_type');
      Qry.OpenOrExecute;
      if (Qry.Found)
      {
        Chart1 = MyForm.AddNewChart(MyForm,'Chart1','Clomosy Inc');
        Chart1.Charttype = clCSizedPie;
        Chart1.XAxisText = 'device_type';
        Chart1.ChartItemText = 'Device Sales';
        Chart1.ChartItemsValue = 'SALES';
        Chart1.ChartTitle = 'Clomosy Inc';
        Chart1.clLoadDataFromDataSet(Qry);
      }
     except
      ShowMessage('Exception class: '+LastExceptionClassName+' Exception Message: ' +LastExceptionMessage);
     }
 }
  
  {
    
    MyForm = TclForm.Create(Self);
    SqLiteConnectionCreateTable;
    AddDataToChart;
    
    MyForm.Run;
  }

Output:

See Also

• Components
• Object Properties
• AddNewEvent