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

<h1>
    Extra Axes
</h1>

<p>
    Most charts have two axes, X and Y. This works well as long
    as all the data on the chart has the same nature and can
    share the same scale.
</p>
<p>
    But some charts contain series that show different types of
    data, with different units and scales. The chart below has
    two series that represent amounts (sales and expenses) and
    one that represents quantities (downloads).
</p>
<p>
    Plotting all the series against a single Y axis squeezes
    the first two series against the bottom of the chart.
</p>
<p>
    The easiest way to solve this problem and still using a
    single chart is to create a secondary Y axis and assign
    it to the <b>axisY</b> property of the "Downloads" series:
</p>

<div class="demo-settings">
    <label for="secondaryAxis">Secondary Y Axis</label>
    <input id="secondaryAxis" type="checkbox" checked="checked">
</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);
    })
    .AxisY(y=>y.Format("n0,").Title("Sales/Expenses (US$ k)").AxisLine(true))
)