Chart Scaling

Use the axis logBase property to spread clustered data and improve the clarity of your charts without sacrificing accuracy.

Use the axis format property to automatically scale the labels and show thousands or millions instead of very large raw values.

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.

Log Scale

// This file locates: "Scripts/Lesson/C1FlexChart/AxesChartScaling.js".
c1.documentReady(function () {
    var theChart = wijmo.Control.getControl('#theChart');
 
    // toggle log scale
    document.getElementById('logScale').addEventListener('click', function (e) {
        var logBase = e.target.checked ? 10 : null;
        theChart.axisX.logBase = logBase;
        theChart.axisY.logBase = logBase;
    });
});

// This file locates: "Content/css/Lesson/C1FlexChart/AxesChartScaling.css".
.wj-flexchart g.wj-series-group ellipse {
  fill: gold;
  stroke: orange;
  opacity: .5
}
.wj-flexchart g.wj-series-group ellipse:hover {
  fill: orange;
  opacity: 1;
}

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexChartController : Controller
    {
        // GET: AxesChartScaling
        public ActionResult AxesChartScaling()
        {
            return View(Models.PopulationGdp.GetData());
        }
    }
}

@using LearnMvcClient.Models
@model IEnumerable<PopulationGdp>
 
<h1>
    @Html.Raw(Resources.C1FlexChart.AxesChartScaling_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesChartScaling_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesChartScaling_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexChart.AxesChartScaling_Text3)
</p>
 
<div class="demo-settings">
    <label for="logScale">@Html.Raw(Resources.C1FlexChart.AxesChartScaling_Text4)</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)
)