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