Special Chart Types

Most chart types require that you provide a binding property to define the name of the property being charted. These types include Column, Bar, Scatter, Line, Area, and Spline.

A few chart types require additional information. For example, Bubble charts type requires an additional value to determine the bubble size. Candlestick charts require values to determine the high/low/open and close values.

In these cases, the binding property should be set to a comma-delimited string containing the names of all the properties to be used for creating the chart.

For example, the Bubble chart below sets the binding property of its series to 'Expenses,Downloads', so the expenses are used as Y values and downloads determine the bubble size:

05001,0001,5002,0002,5003,0003,5004,0004,5005,0005,5006,0006,5007,0007,5008,0008,5009,000Sales02,0004,000Expenses
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: SpecialChartTypes
        public ActionResult SpecialChartTypes()
        {
            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
@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.SpecialChartTypes_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1FlexChart.SpecialChartTypes_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SpecialChartTypes_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SpecialChartTypes_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.SpecialChartTypes_Text4)
</p>
 
@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Sales", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Bubble)
    .Series(sb=>sb.Add().Binding("Expenses,Downloads"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
    .AxisX(ab=>ab.Title("Sales").Min(0))
    .AxisY(ab => ab.Title("Expenses").Min(0))
)