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

Telerik HTML 5 Chart Tooltip and x-Axis position issue

3 Answers 114 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Waqar
Top achievements
Rank 1
Waqar asked on 12 May 2013, 02:08 AM
I have following chart I want to set two things using C#
  1. How can I set x-axis legends below chart not below axis since it overlaping lines?
  2. I am setting tooltip is not appearing like this "{0} Sentiment - {1} Volume"?

Chart Preview

private void FillChart(IEnumerable<EntitySearchResponse> data)
  {
      SentimentChart.ChartTitle.Text = "Sentemants Per day";
 
      SentimentChart.PlotArea.YAxis.TitleAppearance.Text = "Sentimants %";
 
 
      SentimentChart.PlotArea.XAxis.LabelsAppearance.RotationAngle = 90;
      SentimentChart.PlotArea.XAxis.Step = 10;
      SentimentChart.PlotArea.XAxis.Items.Clear();
 
      foreach (var date in data.Select(x => x.Date).Distinct())
      {
          var axisItem = new AxisItem(date.ToString("ddd dd"));
          SentimentChart.PlotArea.XAxis.Items.Add(axisItem);
      }
 
      SentimentChart.DataSource = data;
 
      SentimentChart.PlotArea.Series.Clear();
 
      foreach (var entityName in data.Select(x => x.EntityName).Distinct())
      {
          var series = new ColumnSeries();
          series.LabelsAppearance.DataFormatString = "{0} items";
          series.TooltipsAppearance.DataFormatString = "{0} {2} items";
          series.Name = entityName;
 
          var items = data.Where(x => x.EntityName == entityName).ToList();
          foreach (var entitySearchResponse in items)
          {
              var seriesItem = new SeriesItem(entitySearchResponse.Sentiment);
              seriesItem.TooltipValue = string.Format("{0} Sentiment - {1} Volume", entitySearchResponse.Sentiment,
                                                      entitySearchResponse.Volume);
              series.Items.Add(seriesItem);
          }
          SentimentChart.PlotArea.Series.Add(series);
      }
 
  }

3 Answers, 1 is accepted

Sort by
0
Danail Vasilev
Telerik team
answered on 15 May 2013, 02:33 PM
Hello Waqar,

You can use the TextStyle property in the XAxis' LabelsAppearance element in order to set larger margin/padding of the labels so that they get aligned out of the chart. Note that the larger margin/padding will decrease the size of the chart's plot area so that the chart boundaries are kept. Therefore you should also increase the dimensions of the chart respectively.

Regarding your question about formatting the ToolTips, note the following:
  • For ColumnSeries you can set only one placeholder - {0} in the DataFormatString property of the TooltipsAppearance/LabelsAppearance that represents the YValue of the Series Item.
  • The ToolTip for an individual Series Item cannot be set, unless the HtmlChart is databound to a datasource. This help article and this online demo will shed more light on using ClientTemplates. The exception is the Bubble Series, which Series Items expose the ToolTipValue property.
  • It seems that you are creating the Series of the HtmlChart programmatically. ClientTemplates, as already mentioned, can only be used when the HtmlChart is databound to a datasource. Therefore you can recreate your current logic in order to simulate a datasource which is to be databound. Please find an example attached that sheds more light on how to do that.

Should you need further assistance on this matter, do not hesitate to contact us again.


Kind regards,
Danail Vasilev
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Torben
Top achievements
Rank 1
answered on 04 Jun 2013, 02:50 PM
Hello Danail,
your post helped me with a problem, i had.
We have PieCharts and wanted the ToolTips display the item Name, not the Value.
But now there is another Problem: there is no legend...
Is there any way to get it back?

Greetings,
Torben
0
Danail Vasilev
Telerik team
answered on 06 Jun 2013, 05:12 PM
Hi Torben,

You can create an additional column in your datasource or use an existing one for the PieSeries names. Then the PieSeries property NameField can be used, in order to reference it. For example:
        //Create a DataTable datasource
        DataTable tbl = new DataTable();
        tbl.Columns.Add(new DataColumn("ID"));
        tbl.Columns.Add(new DataColumn("MonthName"));
        tbl.Columns.Add(new DataColumn("NameField1"));
...
        PieSeries currSeries = new PieSeries();
        currSeries.NameField = "NameField1";

You can also find useful the server-side API of RadHtmlChart.

Regards,
Danail Vasilev
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Chart (HTML5)
Asked by
Waqar
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Torben
Top achievements
Rank 1
Share this question
or