Your search did not match any results.
Charts

Export Several Charts

Documentation

This demo shows how to export several charts into a single image using the DevExpress.viz.exportFromMarkup method. Before calling this method, you need to collect the SVG markup of all charts using the DevExpress.viz.getMarkup method and calculate the size of the resulting image.

<div id="chart-demo"> <div class="charts"> @(Html.DevExtreme().Chart() .ID("chart") .DataSource(new List<object> { 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 List<object> { 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<br> 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"), markup = DevExpress.viz.getMarkup([chartInstance, pieChartInstance]), pieSize = pieChartInstance.getSize(), chartSize = chartInstance.getSize(); DevExpress.viz.exportFromMarkup(markup, { fileName: "chart", format: 'PNG', height: chartSize.height + pieSize.height, width: Math.max(chartSize.width, pieSize.width) }) } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult ExportSeveralCharts() { return View(); } } }
#chart-demo { height: 440px; } .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; }