Multiple Chart Types

Each series object in the FlexChart may specify its own chartType to override the chart's default. This makes it easy to mix different chart types in a single chart.

This example allows you to pick a chart type for the 'Downloads' series:

SalesExpensesDownloadsUSGermanyUKJapanItalyGreece010,000
1
2
3
4
5
6
7
8
9
// This file locates: "Scripts/Lesson/C1FlexChart/MultipleChartTypes.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
    var theChartType = wijmo.Control.getControl('#chartType');
 
    theChartType.textChanged.addHandler(function (s, e) {
        theChart.series[2].chartType = s.text;
    });
});
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: MultipleChartTypes
        public ActionResult MultipleChartTypes()
        {
            return View(Models.FlexChartData.GetSales1());
        }
    }
}
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
@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
@{
    var chartTypes = new[] { "Column", "Bar", "Scatter", "Line", "LineSymbols", "Area", "Spline", "SplineSymbols", "SplineArea" };
}
 
<h1>
    @Html.Raw(Resources.C1FlexChart.MultipleChartTypes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.MultipleChartTypes_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.MultipleChartTypes_Text2)
</p>
 
<div class="demo-settings">
    <label for="chartType">@Html.Raw(Resources.C1FlexChart.MultipleChartTypes_Text3)</label>
    @Html.C1().ComboBox().Id("chartType").Bind(chartTypes).Text("LineSymbols")
</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").ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols);
    })
)