FlexPie
Animation
This view shows ChartAnimation for FlexPie.
Features
Settings
AnimationMode: All
Easing: Swing
Description
This view shows ChartAnimation for FlexPie.
You can use different animation modes for FlexPie by setting the AnimationMode property of ChartAnimation.
The ChartAnimation class has a Duration property that allows you to set the length of animation in milliseconds.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | using System.Collections.Generic;using System.Web.Mvc;using C1.Web.Mvc.Chart;using MvcExplorer.Models;namespace MvcExplorer.Controllers{ public partial class FlexPieController : Controller { public ActionResult ChartAnimation() { return View(CustomerOrder.GetCountryGroupOrderData()); } }} |
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 | @model IEnumerable<CustomerOrder>@{ ViewBag.DemoSettings = true;}@(Html.C1().FlexPie<CustomerOrder>().Id("animationChart").Header("Sales").Bind("Country", "Count", Model).InnerRadius(0).DataLabel(dl => dl.Content("{value}")).ShowAnimation(cab => cab.Id("animation") .AnimationMode(AnimationMode.All) .Duration(400) .Easing(Easing.Swing)))@section Scripts{<script type="text/javascript"> function updateMenu(menu, headerNamePrefix) { menu.header = headerNamePrefix + ': <b>' + menu.selectedItem.Header + '</b>'; } function updateAnimation(prop, newValue) { var chart = wijmo.Control.getControl('#animationChart'), animationExt; if (chart) { animationExt = c1.getExtender(chart, 'animation'); if (animationExt) { animationExt[prop] = newValue; } } } function animationModeChanged(menu) { var chart = wijmo.Control.getControl('#animationChart'), dataSource = chart.itemsSource.sourceCollection || chart.itemsSource; updateMenu(menu, '@(Resources.FlexPie.ChartAnimation_AnimationMode)'); updateAnimation('animationMode', wijmo.chart.animation.AnimationMode[menu.selectedItem.Header]); //make the chart to replay the animation. chart.itemsSource = dataSource.slice(0); } function easingChanged(menu) { var chart = wijmo.Control.getControl('#animationChart'), dataSource = chart.itemsSource.sourceCollection || chart.itemsSource; updateMenu(menu, '@(Resources.FlexPie.ChartAnimation_Easing)'); updateAnimation('easing', wijmo.chart.animation.Easing[menu.selectedItem.Header]); //make the chart to replay the animation. chart.itemsSource = dataSource.slice(0); } function durationChanged(sender, args) { if (!checkValue(sender)) { return; } var chart = wijmo.Control.getControl('#animationChart'), dataSource = chart.itemsSource.sourceCollection || chart.itemsSource; updateAnimation('duration', sender.value); //make the chart to replay the animation. chart.itemsSource = dataSource.slice(0); } function innerRadiusChanged(sender, args) { var chart = wijmo.Control.getControl('#animationChart'); if (chart) { chart.innerRadius = sender.value; } } function checkValue(number) { return number.value >= number.min && number.value <= number.max; }</script>}@section Settings{ <div class="container-fluid well"> <div calss="row" style="margin:10px"> @(Html.C1().Menu().Header(Resources.FlexPie.ChartAnimation_AnimationMode + ": <b>All</b>").MenuItems(mifb => { foreach (var name in Enum.GetNames(typeof(AnimationMode))) { mifb.Add().Header(name); } }).OnClientItemClicked("animationModeChanged")) @(Html.C1().Menu().Header(Resources.FlexPie.ChartAnimation_Easing + ": <b>Swing</b>").MenuItems(mifb => { foreach (var name in Enum.GetNames(typeof(Easing))) { mifb.Add().Header(name); } }).OnClientItemClicked("easingChanged")) <div> <label style="display:inline-block;font-weight:normal">@Html.Raw(Resources.FlexPie.ChartAnimation_Duration)</label> @(Html.C1().InputNumber().Min(200).Max(5000).Step(200).Value(400).Format("n0").OnClientValueChanged("durationChanged")) </div> <div> <label style="display:inline-block;font-weight:normal">@Html.Raw(Resources.FlexPie.ChartAnimation_InnerRadius)</label> @(Html.C1().InputNumber().Min(0).Max(1).Step(0.1).Value(0).Format("n1").OnClientValueChanged("innerRadiusChanged")) </div> </div> </div>}@section Description{ <p>@Html.Raw(Resources.FlexPie.ChartAnimation_Text0)</p> <p>@Html.Raw(Resources.FlexPie.ChartAnimation_Text1)</p> <p>@Html.Raw(Resources.FlexPie.ChartAnimation_Text2)</p>} |