Working with Data

25 Feb 20194 minutes to read

Local Data

1. You can bind the data to the Sparkline by using DataSourceproperty and then you need to map the X and Y value with XName and YName properties respectively.

C#

public partial class Sparkline : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            // Create dataSource to sparkline
            List<SparklineData> data = new List<SparklineData>();
            data.Add(new SparklineData("Jan", 35));
            data.Add(new SparklineData("Feb", 28));
            data.Add(new SparklineData("Mar", 34));
            data.Add(new SparklineData("Apr", 32));
            data.Add(new SparklineData("May", 40));
            data.Add(new SparklineData("Jun", 32));
            data.Add(new SparklineData("Jul", 35));
            data.Add(new SparklineData("Aug", 55));
            data.Add(new SparklineData("Sep", 38));
            data.Add(new SparklineData("Oct", 30));
            data.Add(new SparklineData("Nov", 25));
            data.Add(new SparklineData("Dec", 32));
            this.Sparkline1.DataSource = data;
            this.DataBind();
       }
   }

   [Serializable]
    public class SparklineData {
        public string Month;
        public double Sales;
        public SparklineData(string month, double sales)
        {
            this.Month = month;
            this.Sales = sales;
        }
    }

HTML

<ej:Sparkline ClientIDMode="Static" ID="Sparkline1" XName="Month" YName="Sales" runat="server">
</ej:Sparkline>

1. You can also bind an array of data to Sparkline by using DataSource property.

HTML

public partial class Sparkline : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            List<SparklineData> data = new List<SparklineData>();
            Double[] y1 = { 2, 6, -1, 1, 12, 5, -2, 7, -3, 5, 8, 10};
            data.Add(new SparklineData(0, y1));
            this.Sparkline1.DataSource = data;
            this.Sparkline1.DataBind();
        }
    }