Telerik HTML 5 Chart Tooltip and x-Axis position issue

4 posts, 0 answers
  1. Waqar
    Waqar avatar
    1 posts
    Member since:
    Dec 2007

    Posted 11 May 2013 Link to this post

    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);
          }
     
      }

  2.
  3. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 15 May 2013 Link to this post

    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.
  5. Torben
    Torben avatar
    9 posts
    Member since:
    Sep 2012

    Posted 04 Jun 2013 Link to this post

    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
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1502 posts

    Posted 06 Jun 2013 Link to this post

    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.
Back to Top