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"); })) |
