TP2WChart

TP2WChart is a Delphi wrapper for Chart.js, the best charting library for the web.

Properties

property	description
AspectRatio	canvas aspect ratio (i.e. width / height, a value of 1 representing a square canvas)
Axes	please see: TP2WChartAxes
ChartType	possible values are: Bar, Bubble, Doughnut, Line, Pie, PolarArea, Radar, or Scatter
DataSets	one or more TP2WChartDataSets
Labels	labels that appear on the x-axis (or y-axis, depending on the chart type)
Options	please see: TP2WChartOptions
Title	defines text to draw at the top of the chart

Events

event	description
OnClick	fired when the user clicks on the chart
OnConfig	fired before the chart is displayed, allowing you to further configure the JavaScript object
OnFormatAxis	allows for you to change the string representation of the tick value as it should be displayed on the chart
OnFormatTooltip	allows for you to change the tooltip that appears over a TP2WChartDataItem
OnHover	fired when the user hovers the mouse cursor over the chart

Most of the above events include the following arguments:

1. a TP2WChart
2. X and Y coordinates
3. a TP2WChartDataSet if the user clicked on a dataset, otherwise nil

TP2WChartAxes

property	description
X	please see: TP2WChartAxis
Y	please see: TP2WChartAxis

TP2WChartAxis

property	description
BeginAtZero	if true, scale will include 0 if it is not already included
Max	user defined maximum number for the scale, overrides maximum value from data
Min	user defined minimum number for the scale, overrides minimum value from data
Visible	controls the axis global visibility

TP2WChartDataSet

property	description
BackgroundColor	background color for the dataset
BorderColor	border color for the dataset
BorderWidth	width of the border
Data	one or more TP2WChartDataItems
HoverBackgroundColor	background color when the mouse cursor is over the dataset
HoverBorderColor	border color when the mouse cursor is over the dataset
HoverBorderWidth	width of the border when the mouse cursor is over the dataset
Label	the label for the dataset which appears in the legend and tooltips
Tension	bezier curve tension. set to 0 to draw straightlines

TP2WChartDataItem

property	mandatory	description
X	no	if included, this data point is formatted as an object with X and Y coordinates, for example: {x: '2016-12-25', y: 20}
Y	yes	for every label in TP2WChart.Labels, there must be a number value
R	no	the raw radius in pixels of the bubble that is drawn on the canvas

TP2WChartOptions

option	description
Animation	enable or disable animations
Legend	show or hide the legend
MaintainAspectRatio	maintain the original canvas aspect ratio (width / height) when resizing
Responsive	resizes the chart canvas when its container does
Tooltips	enable or disable tooltips
Title	draw a title at the top of the chart

Inside TP2WBootstrapDialog

Should you want to display a TP2WChart inside a TP2WBootstrapDialog, here is how to do it:

[async] procedure TForm1.WebButton1Click(Sender: TObject);
var
  D: TP2WBootstrapDialog;
  C: TP2WChart;
begin
  D := TP2WBootstrapDialog.Create(Self);
  try
    with D.Buttons.Add do
    begin
      Text    := 'Close';
      Primary := True;
      Close   := True;
    end;
    C := TP2WChart.Create(D.ElementID + '_Chart');
    try
      D.OnShow := TOnDialogShow(procedure(Sender: TObject; const body, relatedTarget: TJSElement)
      begin
        body.appendChild(TP2WChart.CreateElement(D.ElementID + '_Chart'));
        C.BeginUpdate;
        try
          // set your TP2WChart properties here, for example:
          C.ChartType := ctLine;
          ...
        finally
          C.EndUpdate;
        end;
      end);
      await(Integer, D.ShowModal);
    finally
      C.Free;
    end;
  finally
    D.Free;
  end;
end;