@using LearnMvcClient.Models
@model IEnumerable<FlexChartData.Sale>

<h1>
    Special Chart Types
</h1>

<p>
    Most chart types require that you provide a <b>binding</b>
    property to define the name of the property being charted.
    These types include Column, Bar, Scatter, Line, Area, and
    Spline.
</p>
<p>
    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.
</p>
<p>
    In these cases, the <b>binding</b> property should be set to
    a comma-delimited string containing the names of all the
    properties to be used for creating the chart.
</p>
<p>
    For example, the Bubble chart below sets the <b>binding</b>
    property of its series to 'Expenses,Downloads', so the
    expenses are used as Y values and downloads determine the
    bubble size:
</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))
)