FlexChart
FlexChart
Scaling
Features
Sample
Description
Chart Scaling
Use logarithmic axes to spread clustered data and improve the clarity of your charts without sacrificing accuracy.
Use scaling formats can be used to display axis labels in a clear and concise format.
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.
Source
ScalingController.cs
using Microsoft.AspNetCore.Mvc;
using MvcExplorer.Models;
// For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
namespace MvcExplorer.Controllers
{
public partial class FlexChartController
{
// GET: /<controller>/
public ActionResult Scaling()
{
return View(Population.GetData());
}
}
}
Scaling.cshtml
@{
var svgStyle = new SVGStyle()
{
Fill = "gold",
Stroke= "orange"
};
}
<c1-flex-chart binding-x="POP" chart-type="Bubble" legend-position="None">
<c1-items-source source-collection="Model"></c1-items-source>
<c1-flex-chart-series binding="GDP,PCI" name="GDP" style="svgStyle">
</c1-flex-chart-series>
<c1-flex-chart-tooltip content="<b>{Country}</b>:<br/>{PCI:n0} US$/year/capita" is-content-html="true"></c1-flex-chart-tooltip>
<c1-flex-chart-axis c1-property="AxisX" title="Population (millions)" format="g4,," log-base="10"></c1-flex-chart-axis>
<c1-flex-chart-axis c1-property="AxisY" title="GDP (US$ billions)" format="g4," log-base="10"></c1-flex-chart-axis>
</c1-flex-chart>
@section Description{
<h3>
@Html.Raw(FlexChartRes.Scaling_ChartScaling)
</h3>
<p>@Html.Raw(FlexChartRes.Scaling_Text0)</p>
<p>@Html.Raw(FlexChartRes.Scaling_Text1)</p>
<p>@Html.Raw(FlexChartRes.Scaling_Text2)</p>
}
Documentation