FlexChart
FlexChart
Scaling
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.
Features
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | 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()); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | @{ 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> } |