retrieve x-axis value in the tooltip of ColumnChart

2 posts, 0 answers
  1. Somya
    Somya avatar
    1 posts
    Member since:
    Jan 2017

    Posted 18 Jan Link to this post

    Hello,

    I am creating htmlCharts dynamically from server side and trying to put a tooltip which shows both x and y axis values in the tooltip label.

    As everything is dynamic, I can only code from the server side. I tried using

    areaSeries.TooltipsAppearance.DataFormatString = "{0}% FCI in {1}Year";

    but it looks like that we can't use {1} for areaSeries.

    Then I tried using clientTemplate following the demo:

    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/clienttemplates/defaultcs.aspx

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview

    but none of these tell how to code purely from server side. I am pasting my concerned code for better insight

    //To create chart

    RadHtmlChart htmlChartACIOverStudyPeriod = CreateHtmlChart("Year", "FCI", "%");
    htmlChartACIOverStudyPeriod.ChartTitle.Text = "FCI Over Study Period";
    htmlChartACIOverStudyPeriod.ID = "rhcFCIOverStudyPeriod";
    //To clear the plotarea and xaxis for the chart
    htmlChartACIOverStudyPeriod.PlotArea.XAxis.Items.Clear();

    htmlChartACIOverStudyPeriod.PlotArea.Series.Clear();
     //To check if datatable has some value for selected agency and facility
    if (dtCurEstTotalOverStudyPeriod.Rows.Count > 0)
    {
      int rowCount = 0;
      ColumnSeries columnSeries = new ColumnSeries();
      columnSeries.LabelsAppearance.Visible = false;

      //  columnSeries.TooltipsAppearance.DataFormatString = "{0}% FCI in {1}Year";
      columnSeries.TooltipsAppearance.ClientTemplate = " #=dataItem.CurEstTotal#  justForTest";


      for (Int32 intCurrent = intFiscalYear; intCurrent <= intMaxYear; intCurrent++)
      {
        htmlChartACIOverStudyPeriod.PlotArea.XAxis.Items.Add(new AxisItem(intCurrent.ToString()));
      decimal ACI = 0;
      CategorySeriesItem categorySeriesItem = new CategorySeriesItem();
        //to check if row in the table exists
       if (rowCount < dtCurEstTotalOverStudyPeriod.Rows.Count)
      {
        if (dtCurEstTotalOverStudyPeriod.Rows[rowCount]["AnoFiscalYear"].Equals(intCurrent))
          {
         //To plot the y-axis
            ACI = (Convert.ToDecimal(dtCurEstTotalOverStudyPeriod.Rows[rowCount]["CurEstTotal"]) / CurEstReplOverStudyPeriod) * 100;
            rowCount++;
              }
            else
              {
              ACI = 0;
              }
       categorySeriesItem.Y = Math.Round(ACI, 3);
       columnSeries.SeriesItems.Add(categorySeriesItem);
       }
      }
     htmlChartACIOverStudyPeriod.PlotArea.Series.Add(columnSeries);   
    }
    dockA2.ContentContainer.Controls.Add(htmlChartACIOverStudyPeriod);

     

    this results into attached snapshot. Please help me to get x-axis value in the tooltip of ColumnChart.

     

    Thnaks,

    Somya

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    165 posts

    Posted 23 Jan Link to this post

    Hi Somya,

    In order to use the #= dataItem # syntax, you need to bind the chart as explained here:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/overview#showing-database-values-using-a-clienttemplate

    However, it looks like you are creating the series items as individual objects, which does not provide such functionality:

    http://demos.telerik.com/aspnet-ajax/htmlchart/examples/serversideapi/programmaticcreation/defaultcs.aspx

    I am attaching a page, which demonstrates how to display both the series item value and the category in the tooltip. Please have a look at it and inform me if you have any further questions regarding it.


    Regards,
    Stamo Gochev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top