Search results
Working with Data in ASP.NET Core Bullet Chart control
20 Jan 2022 / 1 minute to read
Bullet Chart can visualise data bound from local or remote data.
Local Data
You can bind a simple JSON data to the chart using
dataSource direct property of the bullet-chart. Now map the fields in
JSON to valueField and targetField properties.
The dataSource property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the valueField and targetField respectively.
tagHelper
working-with-data.cs
<ejs-bulletchart id="bulletgraph" height="400" title="Profit in %" minimum="0" maximum="20" interval="5" categoryField="category" valueField="value" targetField="comparativeMeasureValue" dataSource="ViewBag.dataSource">
<e-bullet-range-collection>
<e-bullet-range end="5"></e-bullet-range>
<e-bullet-range end="15"></e-bullet-range>
<e-bullet-range end="20"></e-bullet-range>
</e-bullet-range-collection>
</ejs-bulletchart>public IActionResult Index()
{
List<DefaultBulletData> bulletData = new List<DefaultBulletData>
{
new DefaultBulletData { value = 5, comparativeMeasureValue = 7.5, category= "2001"},
new DefaultBulletData { value = 7, comparativeMeasureValue = 5, category= "2002"},
new DefaultBulletData { value = 10, comparativeMeasureValue = 6, category= "2003"},
new DefaultBulletData { value = 5, comparativeMeasureValue = 8, category= "2004"},
new DefaultBulletData { value = 12, comparativeMeasureValue = 5, category= "2005"},
new DefaultBulletData { value = 8, comparativeMeasureValue = 6, category= "2006"}
};
ViewBag.dataSource = bulletData;
return View();
}
public class DefaultBulletData
{
public double value;
public double comparativeMeasureValue;
public string category;
}
Thank you for your feedback and comments.We will rectify this as soon as possible!