Toolbar - Download chart as image

code-gen-library/ToolbarDownloadChart/Angular.ts

@@ -0,0 +1,16 @@
+//begin imports
+import { IgxToolbarComponent, IgxToolActionLabelComponent, IgxToolActionComponent, IgxToolCommandEventArgs } from 'igniteui-angular-layouts';
+//end imports
+
+
+export class ToolbarDownloadChart {
+
+    //begin eventHandler
+    public ToolbarDownloadChart(): void {
+
+        //TODO
+
+    }
+    //end eventHandler
+
+}

code-gen-library/ToolbarDownloadChart/Blazor.cs

@@ -0,0 +1,20 @@
+//begin imports
+using IgniteUI.Blazor.Controls;
+using System;
+//end imports
+
+public class ToolbarDownloadChart
+{
+    //begin eventHandler
+    public void ToolbarDownloadChart(IgbToolCommandEventArgs args)
+	{
+		var target = this.chart;
+		switch (args.Command.CommandId)
+		{
+			case "DownloadAsImage":
+				JS.InvokeVoidAsync("ToolbarDownloadScript", null);
+					break;
+		}
+	}
+    //end eventHandler
+}

code-gen-library/ToolbarDownloadChart/React.tsx

@@ -0,0 +1,16 @@
+//begin imports
+import { IgrToolbarComponent, IgrToolActionLabelComponent, IgrToolActionComponent, IgrToolCommandEventArgs } from 'igniteui-react-layouts';
+//end imports
+
+
+export class ToolbarDownloadChart {
+
+    //begin eventHandler
+    public toolbarDownloadChart(): void {
+
+        //TODO
+
+    }
+    //end eventHandler
+
+}

code-gen-library/ToolbarDownloadChart/WPF.cs

@@ -0,0 +1,31 @@
+//begin imports
+using Infragistics.Controls;
+using Infragistics.Controls.Layouts;
+using System;
+using System.Collections.Generic;
+using System.Collections.ObjectModel;
+using System.Diagnostics;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+//end imports
+
+public class ToolbarDownloadChart
+{
+
+	//begin eventHandler
+	public void ToolbarDownloadChart()
+	{
+		//TODO
+	}
+    //end eventHandler
+}

code-gen-library/ToolbarDownloadChart/WebComponents.ts

@@ -0,0 +1,16 @@
+//begin imports
+import { IgcToolbarComponent, IgcToolActionLabelComponent, IgcToolActionComponent, IgcToolCommandEventArgs } from 'igniteui-webcomponents-layouts';
+//end imports
+
+
+export class ToolbarDownloadChart {
+
+    //begin eventHandler
+    public toolbarDownloadChart(): void {
+
+        //TODO
+
+    }
+    //end eventHandler
+
+}

code-gen-library/ToolbarDownloadScript/Blazor.js

@@ -0,0 +1,17 @@
+//begin template
+function toolbarDownloadScript() {
+    var chart = document.getElementsByClassName("ig-data-chart igc-data-chart")[0];
+    var image = chart.renderToImage(chart.viewportRect.width, chart.viewportRect.height);
+    this.saveBase64AsFile(image.src, "file.jpg");
+}
+
+function saveBase64AsFile(base64, fileName) {
+    var link = document.createElement("a");
+    document.body.appendChild(link);
+    link.setAttribute("type", "hidden");
+    link.href = base64;
+    link.download = fileName;
+    link.click();
+    document.body.removeChild(link);
+}
+//end template

samples/charts/toolbar/download-data-chart-as-image.json

@@ -0,0 +1,82 @@
+{
+  "TODO": "CodeGen does not yet support external JS scripts called from event handler",
+  "export": false,
+  "descriptions": {
+    "aboveContentLeft": {
+      "type": "Toolbar",
+      "name": "Toolbar",
+      "targetRef": "chart",
+      "orientation": "Horizontal",
+      "onCommandRef": "ToolbarDownloadChart",
+      "actions": [
+        {
+          "name": "DownloadChartImage",
+          "type": "ToolActionIconButton",
+          "title": "Download as Image",
+          "overlayId": "CopyAsImage",
+          "commandId": "DownloadAsImage"
+
+        }
+      ]
+    },
+    "content": {
+      "type": "DataChart",
+      "computedPlotAreaMarginMode": "Series",
+      "isHorizontalZoomEnabled": true,
+      "isVerticalZoomEnabled": true,
+      "name": "chart",
+      "axes": [
+        {
+          "type": "CategoryXAxis",
+          "name": "xAxis",
+          "dataSourceRef": "CountryRenewableElectricity",
+          "label": "Year"
+        },
+        {
+          "type": "NumericYAxis",
+          "name": "yAxis",
+          "title": "TWh",
+          "labelLocation": "OutsideRight"
+        }
+      ],
+      "series": [
+        {
+          "type": "LineSeries",
+          "name": "LineSeries1",
+          "title": "Electricity",
+          "xAxisRef": "xAxis",
+          "yAxisRef": "yAxis",
+          "dataSourceRef": "CountryRenewableElectricity",
+          "valueMemberPath": "America"
+        },
+        {
+          "type": "LineSeries",
+          "name": "LineSeries2",
+          "title": "Electricity",
+          "xAxisRef": "xAxis",
+          "yAxisRef": "yAxis",
+          "dataSourceRef": "CountryRenewableElectricity",
+          "valueMemberPath": "Europe"
+        },
+        {
+          "type": "LineSeries",
+          "name": "LineSeries3",
+          "title": "Electricity",
+          "xAxisRef": "xAxis",
+          "yAxisRef": "yAxis",
+          "dataSourceRef": "CountryRenewableElectricity",
+          "valueMemberPath": "China"
+        }
+      ]
+    }
+  },
+  "modules": [
+    "layouts/ToolbarModule",
+    "charts/DataChartToolbarModule",
+    "charts/DataChartCoreModule",
+    "charts/DataChartCategoryModule",
+    "charts/DataChartAnnotationModule",
+    "charts/DataChartInteractivityModule",
+    "charts/DataChartCategoryTrendLineModule"
+  ]
+}