FlexChart
FlexChart
ErrorBar
ErrorBar helps you see margins of error and standard deviations at a glance.
Features
Settings
Direction: Both
ErrorAmount: FixedValue
Value: 50
EndStyle: Cap
Description
ErrorBar helps you see margins of error and standard deviations at a glance. They can be shown as a standard error amount, a percentage, or a standard deviation. You can also set your own values to display the exact error amounts you want.
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 | using System; using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using MvcExplorer.Models; using C1.Web.Mvc.Chart; namespace MvcExplorer.Controllers { public partial class FlexChartController : Controller { List<PopulationByCountry> _populationByCountry = PopulationByCountry.GetData(); public ActionResult ErrorBar() { var settings = new ClientSettingsModel { Settings = new Dictionary<string, object[]> { {"Direction", new object[] { ErrorBarDirection.Both, ErrorBarDirection.Minus, ErrorBarDirection.Plus } }, {"ErrorAmount", new object[] { ErrorAmount.FixedValue, ErrorAmount.Custom, ErrorAmount.Percentage, ErrorAmount.StandardDeviation, ErrorAmount.StandardError } }, {"Value", new object[] { 50, 100, 150, 200 } }, {"EndStyle", new object[] { ErrorBarEndStyle.Cap, ErrorBarEndStyle.NoCap } } } }; settings.LoadRequestData(Request); ViewBag.DemoSettingsModel = settings; return View(_populationByCountry); } } } |
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 | @model IEnumerable<PopulationByCountry> @section Scripts{ <script> function setProperty(control, property, value) { control.series.forEach(function (serie) { serie[property] = value; }); } function customChangeDirection(control, value) { setProperty(control, 'direction', value); } function customChangeErrorAmount(control, value) { setProperty(control, 'errorAmount', value); } function customChangeValue(control, value) { setProperty(control, 'value', value); } function customChangeEndStyle(control, value) { setProperty(control, 'endStyle', value); } </script>} @{ var errorBarStyle = new SVGStyle { Fill = "#e6e6e6", Stroke = "#918254", StrokeWidth = 2 }; } @{ ViewBag.DemoSettings = true; ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel; var errorAmount = demoSettingsModel.GetEnum("ErrorAmount", C1.Web.Mvc.Chart.ErrorAmount.FixedValue); } <c1-flex-chart id="@demoSettingsModel.ControlId" binding="Population" binding-x="Country" height="300px"> <c1-items-source source-collection="Model" /> <c1-flex-chart-error-bar name="Population" value="50" error-bar-style="@errorBarStyle" error-amount="@errorAmount" /> </c1-flex-chart> @section Description{ <p>@Html.Raw(FlexChartRes.ErrorBar_Text0)</p> } |