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

<h1>
    Chart Elements and Hit-Testing
</h1>

<p>
    The FlexChart is composed of elements that can be customized
    using its object model. The elements are:
</p>
<ul>
    <li>
        <b>PlotArea</b>: The area within the axes.
    </li>
    <li>
        <b>ChartArea</b>: The area within the control but
        outside the axes.
    </li>
    <li>
        <b>Legend</b>: The chart legend, usually on the
        right of the plot area.
    </li>
    <li>
        <b>Header</b>: The chart header, above the plot area.
    </li>
    <li>
        <b>Footer</b>: The chart footer, below the plot area.
    </li>
    <li>
        <b>AxisX</b>: The X-axis, usually horizontal.
    </li>
    <li>
        <b>AxisY</b>: The Y-axis, usually vertical.
    </li>
    <li>
        <b>Series</b>: A chart series.
    </li>
    <li>
        <b>SeriesSymbol</b>: A symbol in a chart series.
    </li>
    <li>
        <b>DataLabel</b>: A label attached to a data point.
    </li>
</ul>
<p>
    You can use the <b>hitTest</b> method to determine what
    chart area is under the mouse.
</p>
<p>
    Move the mouse over the chart below to see some information
    about each element:
</p>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.LineSymbols)
    .Header("Header")
    .Footer("Footer")
    .DataLabel(dl=>dl.Content("{value:0}").Position(C1.Web.Mvc.Chart.LabelPosition.Top).Offset(5))
    .Tooltip(t=>t.Content(""))
    .Series(sb=>
    {
        sb.Add().Binding("Sales").Name("Sales");
        sb.Add().Binding("Expenses").Name("Expenses");
    })
)