I'm on AG 12.3 and IG 12.3 with Excel and Charts.
Users would like to be able to download the charts in addition to the Spreadsheet report being generated in the same page of our app. If at all possible, they would like both charts (Design & Process from AG Composite Chart) included in the Excel workbook that is already setup for download.
I don't see anything in the API for charts or the Chart Features about downloading them.
Hello Chris,
Our spreadsheet and excel documentation has a topic called "Chart Adapter" and "Working with Charts". The "Chart Adapter" topic demonstrates adding simple chart types to your IgxSpreadsheet directly (which supports exporting/importing to and from Excel). Our Excel topics goes into more details about our Excel API and generating charts. Below is a code example
eg.
Chart Adapter
Working with Charts
const wb = new Workbook(WorkbookFormat.Excel2007); const ws = wb.worksheets().add("Sheet1"); const chart = ws.shapes().addChart(ChartType.ColumnClustered, ws.rows(0).cells(0), { x: 0, y: 0 }, ws.rows(0).cells(headers.length - 1), { x: 100, y: 100 }); chart.setSourceData(table.wholeTableRegion.toString(), true); chart.axisCollection(AxisType.Category).axisBetweenCategories = true;
If this does not answer your question, please clarify your requirements. Note, the standalone Igx chart components cannot be directly added to the spreadsheet, only through the Excel api. If you have existing charts in your application, they would need to be reconstructed with the Excel API as shown above. It can be saved to an image but I'd imagine you want to modify the chart in Excel at some point.
We have a github library if you want to learn more about our "working with charts" example from our excel topics.
https://github.com/IgniteUI/igniteui-live-editing-samples/tree/master/angular-demos-dv/excel-library/excel-library-working-with-charts
Let me know if you have any questions.
I like the Chart Adapter page you have shared. It seems to be missing the Area charts in the list, though. Is there a corresponding example page with code like the live editing sample you have included?
As with the previously referenced work, I would like to create a pair of composite charts with stacked area (Actual) and stacked line (PLAN) from the data in the attached Excel file.
The first should be based on the Designs (combine totals from different Facilities), while the second should be based on the Process (combine totals from different Designs and Facilities).
Note that this is a basic report exported from a pre-calculated data set for an igx-grid object. There's no calculation happening in this Excel sheet.
Production Estimates vs Actuals 01-01-22.xlsx
Hello Chris, Here is the source code for the spreadsheet chart adapter sample.
<div class="container sample"> <igx-spreadsheet #spreadsheet height="100%" width="100%"> </igx-spreadsheet> </div>
import { Component, OnInit, ViewChild } from "@angular/core"; import { ExcelUtility } from "../../utilities/excel-utility" import { IgxSpreadsheetComponent } from "igniteui-angular-spreadsheet"; import { SpreadsheetChartAdapter } from "igniteui-angular-spreadsheet-chart-adapter"; import { ChartTitle, ChartType, FormattedString, Workbook } from "igniteui-angular-excel"; import { Worksheet } from "igniteui-angular-excel"; import { WorksheetCell } from "igniteui-angular-excel"; @Component({ selector: "app-spreadsheet-adapter-chart", styleUrls: ["./spreadsheet-adapter-chart.component.scss"], templateUrl: "./spreadsheet-adapter-chart.component.html" }) export class SpreadsheetAdapterChartComponent implements OnInit { @ViewChild("spreadsheet", { read: IgxSpreadsheetComponent, static: true }) public spreadsheet: IgxSpreadsheetComponent; constructor() { } public ngOnInit() { this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter(); const excelFile = "https://static.infragistics.com/xplatform/excel/ChartData.xlsx"; ExcelUtility.loadFromUrl(excelFile).then((w) => { this.spreadsheet.workbook = w; const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0); sheet.defaultColumnWidth = 500 * 20; sheet.rows(0).height = 150 * 20; const cell1: WorksheetCell = sheet.getCell("A1"); const cell2: WorksheetCell = sheet.getCell("B1"); const cell3: WorksheetCell = sheet.getCell("C1"); const cell4: WorksheetCell = sheet.getCell("D1"); const dataCellAddress = "A3:D6"; const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 }); const title: ChartTitle = new ChartTitle(); title.text = new FormattedString("Line Chart"); chart1.chartTitle = title; chart1.setSourceData(dataCellAddress, true); const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 0, y: 0 }, cell2, { x: 100, y: 100 }); const title2: ChartTitle = new ChartTitle(); title2.text = new FormattedString("Column Chart"); chart2.chartTitle = title2; chart2.setSourceData(dataCellAddress, true); const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 0, y: 0 }, cell3, { x: 100, y: 100 }); const title3: ChartTitle = new ChartTitle(); title3.text = new FormattedString("Area Chart"); chart3.chartTitle = title3; chart3.setSourceData(dataCellAddress, true); const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 0, y: 0 }, cell4, { x: 100, y: 100 }); const title4: ChartTitle = new ChartTitle(); title4.text = new FormattedString("Pie Chart"); chart4.chartTitle = title4; chart4.setSourceData(dataCellAddress, true); }); } }
So, my assumption, when attempting to build charts in an Excel sheet prior to the download process is that, in my case, I should be able to use a stacked line and a stacked area chart in a composite chart, but how?
I believe I can figure out the logic to filter by design and by process. My next question is how to set the color for each line in the resultant chart? I already have a system for picking colors/shades, but I'm unsure how to apply them to a chart within an Excel sheet.
Notice that in the snippet above I'm providing cell coordinates, which is where the data is in the excel file.
const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 });If you are curious how stacked charts works you can use our Stacked series documentation. https://es.infragistics.com/angularsite/components/charts/types/stacked-chart
Note, this chart1 has properties which, since its a WorksheetChart object, exposes three important properties for configuring the series colors. First, a property called varyColors which defaults to true. You need to set this to false. Normally this tells Excel to determine the series color.
Second, on chart1 iterate the seriescollection. Each series has its own fill property but since you are interested in stacked series you have to iterate the each series and then iterate the datacollection within and set the its respectful fill property.