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

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

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.

Smart Pascal Code

In order to compile the code to a usable application with Smart Mobile Studio 3.0, change all occurrences of ToolButton (except SmartCL.ToolButton in the uses clause) to ToolbarButton.

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>