ComponentOne
Web API Explorer ASP.NET Web API Explorer
MVCFlexChart

MVCFlexChart

Box & Whisker

This sample demonstrates how to export a MVC FlexChart Box and Whisker series to image file.

Features

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

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC FlexChart Box and Whisker series to image file.
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
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using WebApiExplorer.Models;
 
namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexChartController : Controller
    {
        public ActionResult BoxWhisker()
        {
            var analysisData = SalesAnalysis.GetData();
            var width = new object[] { 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1 };
            var boolValues = new object[] { false, true };
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"GroupWidth", width},
                    {"GapWidth", width},
                    {"ShowMeanLine", boolValues},
                    {"ShowMeanMarker", boolValues},
                    {"ShowInnerPoints", boolValues},
                    {"ShowOutliers", boolValues},
                    {"Rotated", boolValues},
                    {"ShowLabel", boolValues},
                    {"QuartileCalculation", Enum.GetValues(typeof(C1.Web.Mvc.Chart.QuartileCalculation)).Cast<object>().ToArray()}
                },
                DefaultValues = new Dictionary<string, object>
                {
                    {"GapWidth", "0.1"},
                    {"GroupWidth", "0.8"}
                }
            };
 
            ViewBag.Options = _flexChartModel;
            return View(analysisData);
        }
    }
}
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
@model IEnumerable<SalesAnalysis>
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
@(Html.C1().FlexChart()
    .Id(optionsModel.ControlId).Height(300)
    .Bind("Country", "Downloads", Model)
    .Series(ser =>
    {
        ser.AddBoxWhisker().Name("Downloads");
        ser.AddBoxWhisker().Binding("Sales").Name("Sales");
        ser.AddBoxWhisker().Binding("Queries").Name("Queries");
    })
)
 
<script>
 
    function setProperty(control, property, value) {
        control.series.forEach(function (serie) {
            serie[property] = value;
        });
    }
 
    function customChangeGroupWidth(control, value) {
        setProperty(control, 'groupWidth', value);
    }
 
    function customChangeGapWidth(control, value) {
        setProperty(control, 'gapWidth', value);
    }
 
    function customChangeShowMeanLine(control, value) {
        setProperty(control, 'showMeanLine', value);
    }
 
    function customChangeShowMeanMarker(control, value) {
        setProperty(control, 'showMeanMarker', value);
    }
 
    function customChangeShowInnerPoints(control, value) {
        setProperty(control, 'showInnerPoints', value);
    }
 
    function customChangeShowOutliers(control, value) {
        setProperty(control, 'showOutliers', value);
    }
 
    function customChangeRotated(control, value) {
        control.rotated = value;
    }
 
    function customChangeShowLabel(control, value) {
        control.dataLabel.content = value ? '{y}' : '';
    }
 
    function customChangeQuartileCalculation(control, value) {
        setProperty(control, 'quartileCalculation', value);
    }
 
</script>
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
@section Description{
    @Html.Raw(Resources.MVCFlexChart.BoxWhisker_Text0)
}