Data Binding

21 Apr 20172 minutes to read

Bullet Graph supports binding JSON data from a remote server or data created in client-side. You can use the e-fields property to customize the data bound with Bullet Graph.

Local Data

Data available in client-side (local data) can be bound with Bullet Graph using e-fields property. This property provides option to specify data source, fields representing progress measure bar value, comparative measure value and category value.

  • C#
  • public class BulletData
    	public double BulletValue
    	{ get; set; }
    	public double ComparisonValue
    	{ get; set; }
    	public string Category
    	{ get; set; }
    List<BulletData> data = new List<BulletData>();
    data.Add(new BulletData() { BulletValue=9.5, ComparisonValue=7.5, Category="2001"  });
    data.Add(new BulletData() { BulletValue = 9.5, ComparisonValue = 5, Category = "2002" });
    ViewBag.DataSource = data;
  • <ej-bullet-graph id="Bullets"  qualitative-range-size="60">
      <e-quantitative-scale-settings interval="1">
      <e-location x="50" y="20"></e-location>
      <e-fields category-field="Category" comparative-measure-field="ComparisonValue" datasource=@ViewBag.DataSource feature-measure-field="BulletValue">

    The following screenshot displays Bullet Graph with local data generated using JavaScript

    Bullet Graph bounded to JSON data

    Remote Data

    Bullet Graph provides option to bind data from a remote server using ejDataManager as data source in fields property. A query object should also be passed to query property when using data manager as data source.

  • <ej-bullet-graph id="Bullets"  qualitative-range-size="60">
      <e-quantitative-scale-settings interval="10" maximum="45" minimum="5">
      <e-location x="50" y="20"></e-location>
                   <e-qualitative-range range-end="25"></e-qualitative-range>
                   <e-qualitative-range range-end="37"></e-qualitative-range>
                   <e-qualitative-range range-end="45"></e-qualitative-range>
    <e-fields category-field="ProductID" comparative-measure-field="Quantity" 
    query="ej.Query().from('Order_Details').take(3).where('UnitPrice', ej.FilterOperators.greaterThan, 18, false)
    .where('UnitPrice', ej.FilterOperators.lessThanOrEqual, 40, false)
    .where('Quantity', ej.FilterOperators.greaterThan, 5, false)
    .where('Quantity', ej.FilterOperators.lessThanOrEqual, 45, false)" >
    <e-datamanager url=""></e-datamanager>

    The following screenshot displays a Bullet Graph bounded with data from a remote server

    Bullet Graph bounded to data from server