JavaScript Exporter

[Microsolutions]

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

[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);
--