Displaying a Chart

Charts are easy to display with the provided attractive theme. The first demo simply displays one bar chart. We added only a TW3Chart to the form and a few lines of code to populate the chart. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

Demonstration of Single Chart

SingleChartDemo.html

Smart Pascal Code

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Chart;

type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeObject; override;
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  W3Chart1.Title.Text := 'Percentage of Sessions on PPS (Sept 2014)';
  W3Chart1.Legend.Position := lpBottom;
  var bars := TBarSeries.Create;
  W3Chart1.AddSeries(bars);
  W3Chart1[0].Data.Values := [17, 9, 6, 5, 4, 3, 3, 2, 2, 2];
  W3Chart1[0].Data.Labels := ['UK', 'US','Germany', 'India', 'Brazil', 'Indonesia',
                              'Russia', 'Netherlands', 'Italy', 'France'];
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

Using more than one series in a TW3Chart

This demo shows:
  • that you can add a series to a chart already containing one series;
  • how to display a pie chart;
  • how to use ToolButtons in a ToolBar to select the series that is displayed;
  • how to take advantage of Values and Labels being dynamic arrays, in this case using the Reverse routine.

The supplied TeeChart demo in the Forms & Components folder shows the many other types of graph/chart that can be displayed and gives examples of changing some of their properties.

Demonstration

If the demo does not work in your current browser, try another such as Chrome. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

ChartDemo.html

Smart Pascal Code

unit Form1;

interface

uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application, SmartCL.Chart, SmartCL.Controls.ToolBar,
  SmartCL.Controls.ToolButton;

type
  TForm1 = class(TW3Form)
    procedure W3ToolButton2Click(Sender: TObject);
    procedure W3ToolButton1Click(Sender: TObject);
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeObject; override;
  end;

implementation

procedure TForm1.W3ToolButton1Click(Sender: TObject);
begin
  W3Chart1[0].Visible := true;
  W3Chart1[1].Visible := false;
 end;

procedure TForm1.W3ToolButton2Click(Sender: TObject);
begin
  W3Chart1[1].Visible := true;
  W3Chart1[0].Visible := false;
end;

procedure TForm1.InitializeObject;
var
  bars: TBarSeries;
begin
  inherited;
  {$I 'Form1:impl'}
  W3Chart1.Title.Text := 'Percentage of Sessions on PPS (Sept 2014)';
  W3Chart1.Legend.Position := lpBottom;
  bars := TBarSeries.Create;
  W3Chart1.AddSeries(bars); //The first series to be added is W3Chart1[0] (or W3Chart1.Item[0])
  W3Chart1[0].Data.Values := [17, 9, 6, 5, 4, 3, 3, 2, 2, 2];   //or W3Chart1.Item[0].Data.Values
  W3Chart1[0].Data.Labels := ['UK', 'US','Germany', 'India', 'Brazil', 'Indonesia',
                              'Russia', 'Netherlands', 'Italy', 'France'];
  W3Chart1[0].Data.Values.Reverse;
  W3Chart1[0].Data.Labels.Reverse;
	
  W3Chart1.AddSeries(TPieSeries.Create);
  W3Chart1[1].Data.Values := [52, 20, 20, 5, 2];
  W3Chart1[1].Data.Labels := ['Europe', 'Americas', 'Asia', 'Africa', 'Oceania'];
  W3Chart1[0].Visible := false;
  W3Chart1[1].Visible := false;
end;
 
initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

XML Code of the Form

<SMART>
  <Form version="2" subversion="1">
    <Created>2014-11-03T09:28:48.647</Created>
    <Modified>2014-11-05T11:48:47.868</Modified>
    <object type="TW3Form">
      <Caption>W3Form</Caption>
      <Name>Form1</Name>
      <object type="TW3Chart">
        <Width>728</Width>
        <Top>48</Top>
        <Height>328</Height>
        <Name>W3Chart1</Name>
      </object>
      <object type="TW3Toolbar">
        <Width>728</Width>
        <Top>-8</Top>
        <Height>56</Height>
        <Name>W3Toolbar1</Name>
        <object type="TW3ToolButton">
          <Caption>Countries (bar chart)</Caption>
          <Width>128</Width>
          <Top>16</Top>
          <Left>16</Left>
          <Height>32</Height>
          <Name>W3ToolButton1</Name>
          <OnClick>W3ToolButton1Click</OnClick>
        </object>
        <object type="TW3ToolButton">
          <Caption>Continents (pie chart)</Caption>
          <Width>128</Width>
          <Top>16</Top>
          <Left>160</Left>
          <Height>32</Height>
          <Name>W3ToolButton2</Name>
          <OnClick>W3ToolButton2Click</OnClick>
        </object>
      </object>
    </object>
  </Form>
</SMART>
Programming - a skill for life!

How to use a range of visual components such as edit boxes, combo boxes, grids and charts on one or multiple forms (including a modal form)