ComponentOne
Web API Explorer ASP.NET Web API Explorer
Wijmo5FlexChart

Wijmo5FlexChart

Waterfall

This sample demonstrates how to export a Wijmo 5 FlexChart Waterfall series to image file.

Features

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

Settings

Export
Export Format : Height :
Width :
Export Name :

Description

This sample demonstrates how to export a Wijmo 5 FlexChart Waterfall series to image file.
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace WebApiExplorer.Controllers
{
    public partial class Wijmo5FlexChartController : Controller
    {
        public ActionResult Waterfall()
        {
            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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
@using WebApiExplorer.Models
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
 
<div id="@(optionsModel.ControlId)"></div>
<div>
    <div class="col-md-6">
        <label>
            <input id="relativeData" type="checkbox"> @Html.Raw(Resources.Wijmo5FlexChart.Waterfall_IsRelativeData)
        </label>
    </div>
    <div class="col-md-6">
        <label>
            <input id="connectorLines" type="checkbox"> @Html.Raw(Resources.Wijmo5FlexChart.Waterfall_ShowConnectorLines)
        </label>
    </div>
    <div class="col-md-6">
        <label>
            <input id="showTotal" type="checkbox"> @Html.Raw(Resources.Wijmo5FlexChart.Waterfall_ShowTotal)
        </label>
    </div>
    <div class="col-md-6">
        <label>
            <input id="showIntermediateTotal" type="checkbox"> @Html.Raw(Resources.Wijmo5FlexChart.Waterfall_ShowIntermediateTotal)
        </label>
    </div>
</div>
 
@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
}
 
<script>
    var waterfallChart = new wijmo.chart.FlexChart('#@(optionsModel.ControlId)'),
        relativeData = document.getElementById('relativeData'),
        connectorLines = document.getElementById('connectorLines'),
        showTotal = document.getElementById('showTotal'),
        showIntermediateTotal = document.getElementById('showIntermediateTotal');
 
    // populate itemsSource
    var names = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        data = [];
    for (var i = 0, len = names.length; i < len; i++) {
        data.push({
            name: names[i],
            value: Math.round((0.5 - Math.random()) * 1000)
        });
    }
    waterfallChart.itemsSource = data;
    waterfallChart.binding = 'value';
    waterfallChart.bindingX = 'name';
 
    //create Waterfall series
    var waterfall = new wijmo.chart.analytics.Waterfall();
    waterfall.relativeData = false;
    waterfall.connectorLines = false;
    waterfall.showTotal = false;
    waterfall.start = 1000;
    waterfall.showIntermediateTotal = false;
    waterfall.intermediateTotalPositions = [3, 6, 9, 12];
    waterfall.intermediateTotalLabels = ['Q1', 'Q2', 'Q3', 'Q4'];
    waterfall.name = 'Increase,Decrease,Total';
    waterfall.styles = {
        connectorLines: {
            stroke: '#333',
            'stroke-dasharray': '5 5'
        },
        start: {
            fill: '#7dc7ed'
        },
        falling: {
            fill: '#dd2714',
            stroke: '#a52714'
        },
        rising: {
            fill: '#0f9d58',
            stroke: '#0f9d58'
        },
        intermediateTotal: {
            fill: '#7dc7ed'
        },
        total: {
            fill: '#7dc7ed'
        }
    };
    waterfallChart.series.push(waterfall);
    waterfallChart.tooltip.content = function (ht) {
        if (ht) {
            return '<b>' + ht.x + '</b><br/>value: ' + ht.y;
        }
    }
 
    // relativeData - initialize checkbox properties
    relativeData.addEventListener('change', function () {
        waterfall.relativeData = this.checked;
    });
 
    // connectorLines - initialize checkbox properties
    connectorLines.addEventListener('change', function () {
        waterfall.connectorLines = this.checked;
    });
 
    // showTotal - initialize checkbox properties
    showTotal.addEventListener('change', function () {
        waterfall.showTotal = this.checked;
    });
 
    // showIntermediateTotal - initialize checkbox properties
    showIntermediateTotal.addEventListener('change', function () {
        waterfall.showIntermediateTotal = this.checked;
    });
</script>
 
@section Description{
    @Html.Raw(Resources.Wijmo5FlexChart.Waterfall_Text0)
}