Page 1 of 1
JavaScript Exporter
Posted: Fri Jun 03, 2016 2:49 pm
by 17778248
Hello,
I hope this is the proper forum to report some JavaScript exporter problems. I use TeeChart Pro v2016.18.160504 32bit VCL version. Using the TJavascriptExportFormat class, it seems that some of the required properties are not exported, even if the teechart.js can handle them (I tried to insert some of them based on the official "TeeChart for JavaScript" documentation). So, here is a short list using a TBarSeries:
- rotation angle of the axis labels,
- series transparency,
- stroke transparency,
- marks angle,
- "Marks on Bar" property,
- alignation of chart title text (both "Alignment" and "Text Alignment"),
- "Font Series Color" property of Legend Style,
- "Resize Chart" property of Legend Position.
Furthermore, the bars use some gradient fill by default while they are solid on the VCL form.
Would you be so kind as to implement/fix these?
Thanks in advance,
MS
Re: JavaScript Exporter
Posted: Mon Jun 06, 2016 11:53 am
by yeray
Hello,
I've made a simple example project to test these properties. I've added comments next to each property:
Code: Select all
uses Series, TeeTools, TeeJavaScript;
procedure TForm1.Button1Click(Sender: TObject);
begin
TeeSaveToJavascriptFile(Chart1, 'C:\tmp\testJS.html');
end;
procedure TForm1.FormCreate(Sender: TObject);
var bar1: TBarSeries;
begin
Chart1.View3D:=false;
bar1:=Chart1.AddSeries(TBarSeries) as TBarSeries;
bar1.FillSampleValues();
//rotation angle of the axis labels - added
Chart1.Axes.Left.LabelsAngle:=45;
//series transparency - already working
//stroke transparency - added
bar1.Transparency:=50;
//marks angle - Not supported in JS
bar1.Marks.Angle:=45;
//"Marks on Bar" property - Not supported in JS
bar1.MarksOnBar:=true;
bar1.MarksLocation:=mlCenter;
//alignation of chart title text (both "Alignment" and "Text Alignment") Not supported in JS
Chart1.Title.Alignment:=taLeftJustify;
Chart1.Title.TextAlignment:=taRightJustify;
Chart1.Title.Transparent:=false;
//Chart Title workaround using an AnnotationTool
Chart1.Title.Visible:=false;
Chart1.MarginTop:=7;
with Chart1.Tools.Add(TAnnotationTool) as TAnnotationTool do
begin
Text:='Chart1';
Position:=ppLeftTop;
Shape.Transparent:=true;
end;
//"Font Series Color" property of Legend Style - added
Chart1.Legend.FontSeriesColor:=true;
//"Resize Chart" property of Legend Position - Not supported in JS
Chart1.Legend.ResizeChart:=false;
end;
Here the patch to apply to TeeJavaScript.pas to add support for Pen Transparency, FontSeriesColor, LabelsAngle and Panel Margins:
Code: Select all
---
TeeJavaScript.pas | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/TeeJavaScript.pas b/TeeJavaScript.pas
index 3ffaf02..6b032c9 100644
--- a/TeeJavaScript.pas
+++ b/TeeJavaScript.pas
@@ -913,7 +913,9 @@ var ILocals : Integer;
bar:=TCustomBarSeries(Series);
if bar.Gradient.Visible then // <-- fix ColorEach not working
- EmitGradient(tmp+'format.gradient',bar.Gradient);
+ EmitGradient(tmp+'format.gradient',bar.Gradient)
+ else
+ AddScript(tmp+'format.gradient.visible='+ToBool(false)+';');
if bar.BarWidthPercent<>70 then
AddScript(tmp+'barSize='+IntToStr(bar.BarWidthPercent)+';');
--
2.7.2.windows.1
From fc41bc205ae913548b686323c04f6e26bc8534f1 Mon Sep 17 00:00:00 2001
From: Yeray Alonso <yeray@steema.com>
Date: Mon, 6 Jun 2016 13:32:51 +0200
Subject: [PATCH] Exporting to JavaScript: Pen Transparency, FontSeriesColor,
LabelsAngle and Panel Margins
---
TeeJavaScript.pas | 28 ++++++++++++++++++++++++----
1 file changed, 24 insertions(+), 4 deletions(-)
diff --git a/TeeJavaScript.pas b/TeeJavaScript.pas
index 4be0908..3ffaf02 100644
--- a/TeeJavaScript.pas
+++ b/TeeJavaScript.pas
@@ -390,15 +390,17 @@ var ILocals : Integer;
AddScript(Tag+'.offset.y='+IntToStr(AGradient.RadialY)+';');
end;
- procedure EmitStroke(Tag:String; const APen:TTeePen; ADefPenColor:TColor={$IFDEF FMX}TAlphaColors.Black{$ELSE}clBlack{$ENDIF});
+ procedure EmitStroke(Tag:String; const APen:TTeePen;
+ ADefPenColor:TColor={$IFDEF FMX}TAlphaColors.Black{$ELSE}clBlack{$ENDIF};
+ ATransparency: Integer=0);
begin
if Minify then NewLocalVar(Tag);
if (not APen.Visible) or (APen.Style=psClear) then
AddScript(Tag+'.fill="";')
else
- if (APen.Color<>clTeeColor) and (APen.Color<>ADefPenColor) then
- AddScript(Tag+'.fill="'+HtmlColor(APen.Color)+'";');
+ if (ATransparency>0) or ((APen.Color<>clTeeColor) and (APen.Color<>ADefPenColor)) then
+ AddScript(Tag+'.fill="'+HtmlColor(APen.Color, ATransparency)+'";');
if APen.Width<>1 then
AddScript(Tag+'.size='+{$IFDEF FMX}FloatToStr{$ELSE}IntToStr{$ENDIF}(APen.Width)+';');
@@ -619,6 +621,10 @@ var ILocals : Integer;
if ALegend.Title.Visible and (ALegend.Title.Caption<>'') then
EmitLegendTitle(Tag+'.title',ALegend.Title);
+
+ if ALegend.FontSeriesColor then
+ AddScript(Tag+'.fontColor='+ToBool(True)+';');
+
end;
procedure EmitMarksStyle(Tag:String; AStyle:TSeriesMarksStyle; HasLabels:Boolean);
@@ -836,7 +842,9 @@ var ILocals : Integer;
AddScript(tmp+'format.fill="'+HtmlColor(Series.Color,tmpTransp)+'";');
end;
- EmitStroke(tmp+'format.stroke', Series.Pen);
+ EmitStroke(tmp+'format.stroke', Series.Pen,
+ {$IFDEF FMX}TAlphaColors.Black{$ELSE}clBlack{$ENDIF},
+ Series.Transparency);
if Series.ColorEachPoint then
AddScript(tmp+'colorEach="yes";')
@@ -1002,6 +1010,9 @@ var ILocals : Integer;
AddScript(Tag+'.visible='+ToBool(False)+';');
EmitFont(Tag+'.format.font',Axis.LabelsFont);
+
+ if Axis.LabelsAngle <> 0 then
+ AddScript(Tag+'.rotation='+IntToStr(Axis.LabelsAngle)+';');
end;
procedure EmitAxisTitle(Tag:String; const ATitle:TChartAxisTitle);
@@ -1091,6 +1102,15 @@ var ILocals : Integer;
if APanel.Shadow.ShouldDraw then
EmitShadow(Tag+'.format.shadow',APanel.Shadow);
+
+ if APanel.MarginLeft<>2 then
+ AddScript(Tag+'.margins.left='+IntToStr(APanel.MarginLeft)+';');
+ if APanel.MarginRight<>2 then
+ AddScript(Tag+'.margins.right='+IntToStr(APanel.MarginRight)+';');
+ if APanel.MarginTop<>2 then
+ AddScript(Tag+'.margins.top='+IntToStr(APanel.MarginTop)+';');
+ if APanel.MarginBottom<>2 then
+ AddScript(Tag+'.margins.bottom='+IntToStr(APanel.MarginBottom)+';');
end;
procedure EmitTools(Tag:String; const AChart:TCustomChart);
--