FlexChart Chart Types

The FlexChart has three properties that determine the chart type:

chartType: Determines the default chart type to be used for all series objects. Individual series can override this default.
stacking: Determines whether series objects are plotted independently, stacked, or stacked so their sum is 100%.
rotated: Determines whether axes should be flipped so the X axis becomes vertical and the Y axis horizontal.

This example shows the effect of these properties:

Chart Type:
Stacking:
Rotated:

// This file locates: "Scripts/Lesson/C1FlexChart/ChartTypes.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theChartType = wijmo.Control.getControl('#chartType');
    var theStacking = wijmo.Control.getControl('#stacking');
 
    theChartType.selectedIndexChanged.addHandler(function (s, e) {
        theChart.chartType = s.text;
    });
 
    theStacking.selectedIndexChanged.addHandler(function (s, e) {
        theChart.stacking = s.text;
    });
 
    document.getElementById('rotated').addEventListener('click', function (e) {
        theChart.rotated = e.target.checked;
    });
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: ChartTypes
        public ActionResult ChartTypes()
        {
            return View(Models.FlexChartData.GetSales1());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
@{ 
    var chartTypes = new[] { "Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea" };
    var stackings = new[] { "None", "Stacked", "Stacked100pc" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.ChartTypes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.ChartTypes_Text1)
</p>
<ol>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartTypes_Text2)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartTypes_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexChart.ChartTypes_Text4)
    </li>
</ol>
<p>
    @Html.Raw(Resources.C1FlexChart.ChartTypes_Text5)
</p>
 
<div class="demo-settings">
    <label for="chartType">@Html.Raw(Resources.C1FlexChart.ChartTypes_Text6) </label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes)
    <br>
    <label for="stacking">@Html.Raw(Resources.C1FlexChart.ChartTypes_Text7) </label>
    @Html.C1().ComboBox().Id("stacking").Bind(stackings)
    <br>
    <label for="rotated">@Html.Raw(Resources.C1FlexChart.ChartTypes_Text8) </label>
    <input id="rotated" type="checkbox"><br>
</div>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
        sb.Add().Binding("Downloads").Name("Downloads");
    })
)