@using LearnMvcClient.Models
@model IEnumerable<PopulationGdp>

<h1>
    Chart Scaling
</h1>
<p>
    Use the axis <b>logBase</b> property to spread clustered data
    and improve the clarity of your charts without sacrificing
    accuracy.
</p>
<p>
    Use the axis <b>format</b> property to automatically scale the
    labels and show thousands or millions instead of very large
    raw values.
</p>
<p>
    The bubble chart below shows the population (x), GDP (y),
    and per-capita income (bubble size) for about 200 countries.
    Notice how the use of log-axes spreads out the data and
    makes the chart easy to read.
</p>

<div class="demo-settings">
    <label for="logScale">Log Scale</label>
    <input id="logScale" type="checkbox" checked="checked">
</div>

@(Html.C1().FlexChart<PopulationGdp>().Id("theChart")
    .Bind("Pop", Model)
    .ChartType(C1.Web.Mvc.Chart.ChartType.Bubble)
    .Series(sb=>sb.Add().Binding("Gdp,Pci").Name("GDP"))
    .Tooltip(t=>t.Content("<b>{Country}</b>:<br/>{Pci:n0} US$/year/capita"))
    .AxisX(x=>x.Title("Population (millions)").Format("g4,,").LogBase(10))
    .AxisY(y=>y.Title("GDP (US$ billions)").Format("g4,").LogBase(10))
    .Legend(C1.Web.Mvc.Chart.Position.None)
)