ComponentOne
Web API Explorer ASP.NET Web API Explorer

Waterfall

Waterfall

Features

Settings

Export
Export Format :
Height :
Width :
Export Name :

Description

This sample demonstrates how to export a MVC FlexChart Waterfall series to image file.
using System.Collections.Generic;
using System.Web.Mvc;
using WebApiExplorer.Models;

namespace WebApiExplorer.Controllers
{
    public partial class MVCFlexChartController : Controller
    {
        public ActionResult Waterfall()
        {
            var data = WaterfallData.GetData();
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = new Dictionary<string, object[]>
                {
                    {"RelativeData", new object[] {false, true}},
                    {"ConnectorLines", new object[] {true, false}},
                    {"ShowTotal", new object[] {true, false}},
                    {"ShowIntermediateTotal", new object[] {false, true}}
                }
            };
            ViewBag.Options = _flexChartModel;
            return View(data);
        }
    }
}
@model IEnumerable<WaterfallData>
@{
    ImageExportOptions optionsModel = ViewBag.Options;
    ViewBag.DemoSettings = true;
}
@(Html.C1().FlexChart()
    .Id(optionsModel.ControlId)
    .Bind("Name", "Value", Model)
    .Series(ser =>
        {
            ser.AddWaterfall().RelativeData(false)
                .ConnectorLines(true)
                .ShowTotal(true)
                .IntermediateTotalLabels("Q1", "Q2", "Q3", "Q4")
                .IntermediateTotalPositions(3, 6, 9, 12)
                .Name("Increase,Decrease,Total")
                .Styles(s =>
                    s.ConnectorLines(cnt => cnt.StrokeDasharray("5 5").Stroke("#333"))
                     .Start(start => start.Fill("#7dc7ed"))
                     .Falling(falling => falling.Fill("#dd2714").Stroke("#a52714"))
                     .Rising(rising => rising.Fill("#0f9d58").Stroke("#0f9d58"))
                     .IntermediateTotal(intotal => intotal.Fill("#7dc7ed")));
        })
    .Height(300)
)

@section Settings{
    @Html.Partial("_ImageExportOptions", optionsModel)
    <script>
    function customChangeRelativeData(control, value) {
        control.series[0].relativeData = value;
    }
    function customChangeConnectorLines(control, value) {
        control.series[0].connectorLines = value;
    }
    function customChangeShowTotal(control, value) {
        control.series[0].showTotal = value;
    }
    function customChangeShowIntermediateTotal(control, value) {
        control.series[0].showIntermediateTotal = value;
    }
    </script>
}

@section Description{
    @Html.Raw(Resources.MVCFlexChart.Waterfall_Text0)
}