LineChart Help

4 posts, 0 answers
  1. Alper
    Alper avatar
    5 posts
    Member since:
    May 2014

    Posted 24 Apr Link to this post

    Hi;

    I have some data to display in linechart chart.Getting data as dynamically, so column count can be change. 

    Could you show me how to bind to show data correctly?

    Data Sample is in attachment

  2. Peter Milchev
    Admin
    Peter Milchev avatar
    567 posts

    Posted 29 Apr Link to this post

    Hello Alper,

    The columns need to be created manually, so that the Chart knows which data fields to get and how to visualize them. To do that, you can iterate the items in the data you retrieve and then create new columns programmatically. 

    Once you have the columns created, you can pass the data to the chart and the chart should display the data properly according to the custom columns you have created. 

    Regards,
    Peter Milchev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Alper
    Alper avatar
    5 posts
    Member since:
    May 2014

    Posted 29 Apr in reply to Peter Milchev Link to this post

    Thank you for information. Now i found a way to get data and iterate as you said. But i couldn't find a way to show this data in candlestickseries. is there any possibilty to help me?
  4. Vessy
    Admin
    Vessy avatar
    2010 posts

    Posted 02 May Link to this post

    Hi Alper,

    You can create the CandleStick series needed to visualize the data by iterating through the data source and passing the respective column name to the bound fields of the CandleStickeSereis:
    https://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx
    https://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/server-side-programming/overview#programatic-chart-creation

    I am not sure what is the expected visualization of the attached data table, but you can see below how to achieve such result with a sample data and follow it in order to visualize your actual data:
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable data = GetData(); //your data selecting logic here
     
        for (int i = 1; i < data.Columns.Count - 3; i += 4)
        {
            CandlestickSeries series = new CandlestickSeries();
            series.DataOpenField = data.Columns[i].ColumnName;
            series.DataCloseField = data.Columns[i + 1].ColumnName;
            series.DataHighField = data.Columns[i + 2].ColumnName;
            series.DataLowField = data.Columns[i + 3].ColumnName;
            CandlestickChart.PlotArea.Series.Add(series);
        }
     
        CandlestickChart.DataSource = data;
        CandlestickChart.DataBind();
    }
     
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
     
        dt.Columns.Add("labelsField", typeof(System.String));
        dt.Columns.Add("series1Open", typeof(System.Decimal));
        dt.Columns.Add("series1Close", typeof(System.Decimal));
        dt.Columns.Add("series1High", typeof(System.Decimal));
        dt.Columns.Add("series1Low", typeof(System.Decimal));
        dt.Columns.Add("series2Open", typeof(System.Decimal));
        dt.Columns.Add("series2Close", typeof(System.Decimal));
        dt.Columns.Add("series2High", typeof(System.Decimal));
        dt.Columns.Add("series2Low", typeof(System.Decimal));
     
        dt.Rows.Add("item 1", 26.29, 26.93, 25.49, 26, 26.68, 26.82, 26.06, 26.29);
        dt.Rows.Add("item 2", 26.3, 27.09, 25.2, 25.99, 26.22, 28.15, 25.67, 27.91);
        dt.Rows.Add("item 3", 26.25, 27.18, 24.6, 26.87, 27.25, 29.44, 27.01, 27.99);
        return dt;
    }



    Regards,
    Vessy
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top