ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexChart

Wijmo5FlexChart

Labels

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

Features

Overview
Header and Footer
Labels
Bubble
Financial Chart
TrendLine
MovingAverage
YFunctionSeries
ParametricFunctionSeries
Box & Whisker
ErrorBar
Waterfall
MarchAprilMayc1c2c3c4c5051.112.372.152.320.130.698.589.214.491.061.440.343.684.921.25

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a wijmo5 FlexChart with different labels to image file.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexChartController : Controller
    {
        public ActionResult Labels()
        {
            ViewBag.Options = _flexChartModel;
            return View();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
@using WebApiExplorer.Models
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)" ></div>
<select id="typeMenu">
    <option value="0">Column</option>
    <option value="2">Scatter</option>
    <option value="3">Line</option>
    <option value="4">LineSymbols</option>
    <option value="5">Area</option>
    <option value="9">Spline</option>
    <option value="10">SplineSymbols</option>
    <option value="11">SplineArea</option>
</select>
<select id="positionMenu">
    <option value="2">Top</option>
    <option value="0">None</option>
    <option value="4">Bottom</option>
    <option value="1">Left</option>
    <option value="3">Right</option>
    <option value="5">Center</option>
</select>
<select id="borderMenu">
    <option value= 0>False</option>
    <option value= 1>True</option>
</select>
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script>
    var chart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)'), names = ['c1', 'c2', 'c3', 'c4', 'c5'],
        typeMenu = new wijmo.input.Menu('#typeMenu'),
        positionMenu = new wijmo.input.Menu('#positionMenu'),
        borderMenu = new wijmo.input.Menu('#borderMenu');
 
    chart.initialize({
        itemsSource: [],
        bindingX: 'name',
        dataLabel: { content: "{y}" },
        series: [
            { name: "March", binding: 'mar' },
            { name: "April", binding: 'apr' },
            { name: "May", binding: 'may' },
        ]
    });
 
    for (var i = 0; i < names.length; i++) {
        chart.itemsSource.push({
            name: names[i],
            mar: Math.random() * 3,
            apr: Math.random() * 10,
            may: Math.random() * 5
        });
    }
 
    updateMenuHeader();
 
    typeMenu.itemClicked.addHandler(function (sender) {
        chart.chartType = parseInt(typeMenu.selectedValue);
        updateMenuHeader();
    });
 
    positionMenu.itemClicked.addHandler(function (sender) {
        chart.dataLabel.position = parseInt(positionMenu.selectedValue);
        updateMenuHeader();
    });
 
    borderMenu.itemClicked.addHandler(function (sender) {
        chart.dataLabel.border = Boolean(parseInt(borderMenu.selectedValue));
        updateMenuHeader();
    });
 
    function updateMenuHeader() {
        typeMenu.header = '<b>@(Resources.Wijmo5FlexChart.Labels_ChartType)</b> ' + typeMenu.text;
        positionMenu.header = '<b>@(Resources.Wijmo5FlexChart.Labels_LabelPosition)</b> ' + positionMenu.text;
        borderMenu.header = '<b>@(Resources.Wijmo5FlexChart.Labels_LabelsBorder)</b> ' + borderMenu.text;
    }
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.Labels_Text0)
}