This is a migrated thread and some comments may be shown as answers.

retrieve x-axis value in the tooltip of ColumnChart

1 Answer 128 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Somya
Top achievements
Rank 1
Somya asked on 18 Jan 2017, 09:45 PM

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

1 Answer, 1 is accepted

Sort by
0
Stamo Gochev
Telerik team
answered on 23 Jan 2017, 08:28 AM
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.
Tags
Chart (HTML5)
Asked by
Somya
Top achievements
Rank 1
Answers by
Stamo Gochev
Telerik team
Share this question
or