In Telerik, RadHtmlChart, not getting date format in tooptip as same like on X-axis label rendered

Question

RadHtmlChart not bind tooltip properly but same it is working as for X-axis label. I tried to set tooltip with client template and dataformatstring also but still no success for display tooltip date format just showing in numbers only.

Please refer my below code sample with image illustrated with problem.

[Telerik RadHtmlChart display value on hover issue for date field on X-axis][1] [1]: https://i.stack.imgur.com/x5Dqk.png

--> My RadHtmlChart code

TestChart.aspx

<Telerik:RadHtmlChart runat="server" ID="AnnexRadHtmlChart" Width="1400px" Height="650px"></Telerik:RadHtmlChart>

TestChart.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        BindChart();
    }

protected DataSet GetData()
{
    DataSet dataSet = new DataSet();

    List<string> ListTab = new List<string>();
    ListTab.Add("Plan");
    ListTab.Add("Actual");
    ListTab.Add("Earned Value");

    foreach (var tab in ListTab)
    {
        DataTable dt = dataSet.Tables.Add(tab);

        dt.Columns.Add("ID", typeof(int));
        dt.Columns.Add("AnnexAmount", typeof(int));
        dt.Columns.Add("AnnexDate", typeof(DateTime));
        dt.Columns.Add("AnnexTabName", typeof(string));

        if (tab.Trim().ToLower() == "plan")
        {
            dt.Rows.Add(1, 50000, new DateTime(2015, 06, 12), tab);
            dt.Rows.Add(1, 150000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(1, 200000, new DateTime(2018, 06, 17), tab);
            dt.Rows.Add(1, 250000, new DateTime(2020, 09, 18), tab);

        }
        else if (tab.Trim().ToLower() == "actual")
        {
            dt.Rows.Add(2, 100000, new DateTime(2015, 07, 12), tab);
            dt.Rows.Add(2, 180000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(2, 230000, new DateTime(2018, 07, 17), tab);
            dt.Rows.Add(2, 250000, new DateTime(2020, 09, 18), tab);

        }
        else
        {
            dt.Rows.Add(3, 100000, new DateTime(2015, 03, 12), tab);
            dt.Rows.Add(3, 200000, new DateTime(2016, 12, 12), tab);
            dt.Rows.Add(3, 250000, new DateTime(2018, 05, 17), tab);
            dt.Rows.Add(3, 350000, new DateTime(2020, 08, 18), tab);
        }
     
    }
    return dataSet;
}

public void BindChart()
{
    #region X-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Text = "Month";
    AnnexRadHtmlChart.PlotArea.XAxis.LabelsAppearance.DataFormatString = "{0:MMM/yyyy}";
    AnnexRadHtmlChart.PlotArea.XAxis.Type = Telerik.Web.UI.HtmlChart.AxisType.Date;
    AnnexRadHtmlChart.PlotArea.XAxis.BaseUnit = DateTimeBaseUnit.Days;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.XAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.XAxis.MinorGridLines.Color = Color.Bisque;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.XAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    #region Y-AXIS ITEM

    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Text = "Value";
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.DataFormatString = "{0:N}";
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickType = TickType.Outside;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorTickSize = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.LabelsAppearance.RotationAngle = 0;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Color = Color.DarkSeaGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MajorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Color = Color.PaleGreen;
    AnnexRadHtmlChart.PlotArea.YAxis.MinorGridLines.Width = 1;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.Position = AxisTitlePosition.Center;
    AnnexRadHtmlChart.PlotArea.YAxis.TitleAppearance.RotationAngle = 0;

    #endregion

    DataSet dataSet = GetData();

    List<Color> ListColors = new List<Color>();
    ListColors.Add(Color.IndianRed);
    ListColors.Add(Color.Teal);
    ListColors.Add(Color.Purple);
    ListColors.Add(Color.SlateGray);

    for (int i = 0; i < dataSet.Tables.Count; i++)
    {
        DataTable dt = dataSet.Tables[i];

        ScatterLineSeries scatterLineSeries = new ScatterLineSeries();
        scatterLineSeries.Name = dt.Rows[0]["AnnexTabName"].ToString() + " Data";
        scatterLineSeries.Appearance.FillStyle.BackgroundColor = ListColors[i];
        scatterLineSeries.MarkersAppearance.BackgroundColor = Color.AntiqueWhite;
        scatterLineSeries.LabelsAppearance.Visible = false;
        scatterLineSeries.TooltipsAppearance.DataFormatString = "Month/Year : {0:D} </br> Value : {1:N} </br> Tab Name : " + dt.Rows[0]["AnnexTabName"].ToString() + "";
        scatterLineSeries.TooltipsAppearance.Color = Color.LightPink;

        foreach (DataRow dr in dt.Rows)
        {
            DateTime dateTime = Convert.ToDateTime(dr.ItemArray[2].ToString());
            decimal dtValue = ConvertToJavaScriptDateTime(dateTime);
            ScatterSeriesItem scatterSeriesItem = new ScatterSeriesItem(dtValue, Convert.ToDecimal(dr.ItemArray[1].ToString()));

            scatterLineSeries.SeriesItems.Add(scatterSeriesItem);
        }

        AnnexRadHtmlChart.PlotArea.Series.Add(scatterLineSeries);
        AnnexRadHtmlChart.ChartTitle.Text = "Annex Data Chart";
        AnnexRadHtmlChart.Legend.Appearance.Position = ChartLegendPosition.Bottom;
        AnnexRadHtmlChart.Appearance.FillStyle.BackgroundColor = Color.Beige;
    }
}

protected decimal ConvertToJavaScriptDateTime(DateTime fromDate)
{
    return (decimal)fromDate.Subtract(new DateTime(1970, 1, 1)).TotalMilliseconds;
}

score 0 · Answer 1 · answered Mar 26 '22 at 08:04

0

I think tooltips use JS to format the value while I see some custom formats in your code. Maybe if you want to be sure you control the format from C# maybe add a column to the data source where you put the string yourself and then use that in the tooltip via its template

answered Mar 26 '22 at 08:04

rdmptn

5,413
1
16
29

Thanks for response. I did the same as you said, changed datatype from date to string but still it is considering as a date format. Because when you display point you need to pass that point as a decimal values only in telerik RadHtmlChart. So this point is not working as for this criteria. – Rptech Mar 27 '22 at 19:03

In Telerik, RadHtmlChart, not getting date format in tooptip as same like on X-axis label rendered

1 Answers1