Bar Charts
Bar charts are similar to rotated column charts.
By default, items on the Y axis start from the bottom of the chart, so the first items appear at the bottom and the last at the top.
If you reverse the Y axis, items will start at the top of the, which is often a more natural order:
1 2 3 4 5 6 7 8 9 | // This file locates: "Scripts/Lesson/C1FlexChart/BarCharts.js". c1.documentReady(function () { var theChart = wijmo.Control.getControl( '#theChart' ); // reverse Y axis document.getElementById( 'reverseY' ).addEventListener( 'click' , function (e) { theChart.axisY.reversed = e.target. checked ; }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1FlexChartController : Controller { // GET: BarCharts public ActionResult BarCharts() { return View(Models.FlexChartData.GetSales2()); } } } |
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 LearnMvcClient.Models @model IEnumerable< FlexChartData.Sale > < h1 > @Html .Raw(Resources.C1FlexChart.BarCharts_Title) </ h1 > < p > @Html .Raw(Resources.C1FlexChart.BarCharts_Text1) </ p > < p > @Html .Raw(Resources.C1FlexChart.BarCharts_Text2) </ p > < p > @Html .Raw(Resources.C1FlexChart.BarCharts_Text3) </ p > < div class = "demo-settings" > < label for = "reverseY" > @Html .Raw(Resources.C1FlexChart.BarCharts_Text4)</ label > < input id = "reverseY" type = "checkbox" checked = "checked" > </ div > @ (Html.C1().FlexChart< FlexChartData.Sale >().Id( "theChart" ) .Bind( "Country" , Model) .ChartType(C1.Web.Mvc.Chart.ChartType.Bar) .AxisY(ab=>ab.Reversed( true )) .Series(sb=> { sb.Add().Binding( "Sales" ).Name( "Sales" ); sb.Add().Binding( "Expenses" ).Name( "Expenses" ); }) ) |