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

<h1>
    Axis Ranges
</h1>

<p>
    The FlexChart calculates axis ranges automatically, based on
    the data being shown. Because of this, in most cases you
    don't have to worry about setting the axis <b>min</b>,
    <b>max</b>, <b>majorUnit</b>, or <b>minorUnit</b> properties.
</p>
<p>
    In a few cases, however, setting these values explicitly may
    improve the chart.
</p>
<p>
    For example, the chart below shows values that are relatively
    close, so all bars have almost the same height. The chart shows
    that sales are even across countries, but it does not show the
    differences clearly.
</p>
<p>
    To emphasize the differences, click the 'Custom Range' checkbox.
    It will set the <b>min</b> and <b>max</b> properties of the
    Y axis so it starts at 150k, close to the minimum value for
    all countries but higher than zero. The chart will show the same
    data, but the differences will appear much larger.
</p>

<div class="demo-settings">
    <label for="customRange">Custom Range</label>
    <input id="customRange" type="checkbox">
    <div id="warning" class="panel panel-warning" style="display:none">
        <div class="panel-heading">
            The Y axis does not start at zero, so the chart magnifies
            differences in sales across countries. The largest difference
            is only about 7%.
        </div>
    </div>
</div>

@(Html.C1().FlexChart<FlexChartData.Sale>().Id("theChart")
    .Bind("Country", Model)
    .Series(sb=>sb.Add().Binding("Sales").Name("Sales"))
    .AxisY(y=>y.Format("n0,").Title("US$ (thousands)"))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)