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

<h1>
    FlexChart Render Cycle
</h1>
<p>
    The FlexChart is data-driven. When there are changes to the
    data it is bound to, or to any of its properties, the chart
    goes through a render cycle, which consists of these steps:
</p>
<ol>
    <li>
        <b>Get the data</b>:<br />
        The chart has an <b>itemsSource</b> property that represents
        the overall data source, and each series may override this
        using its own local <b>itemsSource</b> property. Similarly,
        the chart has <b>bindingX</b> and <b>binding</b> properties
        that determine the values to be charted for each series.<br />
        In most cases, you will set the <b>itemsSource</b> and
        <b>bindingX</b> properties on the chart object, and the
        <b>binding</b> property on each series.
    </li>
    <li>
        <b>Scale the data</b>:<br />
        You may set the chart's range by setting the <b>min</b> and
        <b>max</b> properties on the chart's axes. By default, those
        properties are set to null, which causes the chart to scale
        itself automatically. By default, series use the chart's
        main set of axes, <b>axisX</b> and <b>axisY</b>; but you
        may create additional axes and assign those axes to one or
        more series.
    </li>
    <li>
        <b>Raise the rendering event</b>:<br />
        At this point, the chart is empty. Event handlers may use
        <b>engine</b> parameter of the <b>rendering</b> event to
        add custom elements that will render behind the chart data.
        This can be used to add background elements such as alarm
        zones.
    </li>
    <li>
        <b>Render each series</b><br />
        In this step, the chart creates one or more SVG elements
        to represent each series. The simplest and most efficient
        chart types are 'Line' and 'Spline', which can usually be
        represented by a single SVG element.
        Other chart types require more elements to render bars and
        symbols.
        The chart invokes a callback specified by the
        <b>itemFormatter</b> property to allow customization of
        specific points in each series. Axes also have an
        <b>itemFormatter</b> property to allow customization
        of the axes labels.
    </li>
    <li>
        <b>Raise the rendered event</b>:<br />
        At this point, the chart has been fully rendered.
        Event handlers may use the <b>engine</b> parameter of the
        <b>rendered</b> event to add custom elements that will
        render above the chart data. This can be used to add
        elements such as point annotations.
    </li>
</ol>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Line)
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)
<button id="btnRefresh" class="btn btn-default">
    Refresh
</button>
<div id="eventLog">
</div>