Wijmo5FlexChart

Overview

This sample demonstrates how to export a wijmo5 FlexChart to image file.

Features

Sample
Source
Documentation

Settings

Export

Export Format : Height :

Width :

Export Name :

Description

This sample demonstrates how to export a wijmo5 FlexChart to image file.

IndexController.cs
Index.cshtml

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexChartController : Controller
    {
        private readonly ImageExportOptions _flexChartModel = new ImageExportOptions
        {
            Exporter = "wijmo.chart.ImageExporter"
        };
 
        private readonly ClientSettingsModel _demoSettingsModel = new ClientSettingsModel
        {
            Settings = new Dictionary<string, object[]>
            {
                {"ChartType", new object[]{"Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea"}},
                {"Stacking", new object[]{"None", "Stacked", "Stacked 100%"}},
                {"Rotated", new object[]{false, true}},
                {"Palette", new object[]{"standard", "cocoa", "coral", "dark", "highcontrast", "light", "midnight", "minimal", "modern", "organic", "slate"}}
            }
        };
 
        public ActionResult Index()
        {
            ViewBag.DemoSettingsModel = _demoSettingsModel;
            ViewBag.Options = _flexChartModel;
            return View();
        }
 
    }
}

@using WebApiExplorer.Models
@{
    ClientSettingsModel settings = ViewBag.DemoSettingsModel;
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)" ></div>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
<script>
    var gettingStartedChart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)');
 
    gettingStartedChart.initialize({
        chartType: "Column",
        stacking: "None",
        rotated: false,
        palette: wijmo.chart.Palettes["standard"],
        itemsSource: getData(),
        bindingX: 'country',
        series: [
            { name: 'Sales', binding: 'sales' },
            { name: 'Expenses', binding: 'expenses' },
            { name: 'Downloads', binding: 'downloads' }
        ]
    });
 
    convertStacking = function (value) {
        return value === "Stacked 100%" ? "Stacked100pc" : value;
    };
    convertPalette = function (value) {
        return wijmo.chart.Palettes[value];
    };
 
    function getData() {
        var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            appData = [];
 
        for (var i = 0; i < countries.length; i++) {
            appData.push({
                country: countries[i],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        return appData;
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.Index_Text0)
}