Your search did not match any results.

Charts - Export Several Charts

The DevExpress.viz.exportWidgets(widgetInstances, options) method allows you to export several charts to a single image or document.

The widgetInstances parameter accepts an array with the following format:

[
    [ widgetInstance0_1, widgetInstance0_2, ..., widgetInstance0_N ],
    [ widgetInstance1_1, widgetInstance1_2, ..., widgetInstance1_M ],
    ...
    [ widgetInstanceP_1, widgetInstanceP_2, ..., widgetInstanceP_R ]
]
Backend API
<div id="chart-demo"> <div class="charts"> @(Html.DevExtreme().Chart() .ID("chart") .DataSource(new[] { new { country = "China", medals = 51 }, new { country = "USA", medals = 36 }, new { country = "Russia", medals = 22 }, new { country = "UK", medals = 19 }, new { country = "Germany", medals = 16 }, new { country = "Australia", medals = 14 }, new { country = "South Korea", medals = 13 }, new { country = "France", medals = 7 } }) .Series(s => s.Add() .ArgumentField("country") .ValueField("medals") .Type(SeriesType.Bar) .Color("#f3c40b") .Label(l => l .Visible(true) ) ) .Title("Olympic Gold Medals in 2008") .Rotated(true) .Legend(l => l.Visible(false)) ) @(Html.DevExtreme().PieChart() .ID("pieChart") .DataSource(new[] { new { country = "USA", medals = 110 }, new { country = "China", medals = 100 }, new { country = "Russia", medals = 71 }, new { country = "UK", medals = 47 }, new { country = "Australia", medals = 46 }, new { country = "Germany", medals = 41 }, new { country = "France", medals = 41 }, new { country = "South Korea", medals = 31 } }) .Series(s => s.Add() .ArgumentField("country") .ValueField("medals") .Label(l => l .Visible(true) .Connector(c => c .Visible(true) ) ) ) .Title("Total Olympic Medals\n in 2008") .Palette(VizPalette.HarmonyLight) ) </div> <div class="controls-pane"> @(Html.DevExtreme().Button() .Icon("export") .Text("Export") .OnClick("exportChart") .Type(ButtonType.Default) .Width(145) ) </div> </div> <script> function exportChart() { var chartInstance = $("#chart").dxChart("instance"), pieChartInstance = $("#pieChart").dxPieChart("instance"); DevExpress.viz.exportWidgets([[chartInstance, pieChartInstance]], { fileName: "chart", format: 'PNG' }); } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ExportSeveralCharts() { return View(); } } }
#chart-demo { height: 460px; } .charts { width: 820px; margin: 0 auto; height: 374px; margin-bottom: 40px; font-size: 0; } #chart, #pieChart{ width: 395px; height: 100%; display: inline-block; vertical-align: top; } #chart { margin-right: 30px; } .controls-pane { text-align: center; }

Each nested array contains component instances that should be in the same row in the exported document. In this demo, chartInstance and pieChartInstance occupy the only row in the document.

The options parameter accepts an object whose fields allow you to configure export properties. In this demo, we specify the fileName and format. Refer to the method description for information on other available fields.