ASP.NET 3.5 Charting Control – Formatting Tooltips as Date

mscharttooltip I’m sure you all have heard that there is now a free ASP.NET charting control that is an add-on to ASP.NET 3.5.  If you haven’t or need one of the bits, check out ScottGu’s blog.  I recently started using the component and it’s really nice.  While working with it, I ran into an issue formatting Date values in the tooltips, so I figured I would share my findings.

In order to format the tooltips, I needed to use one of the supported keywords in order to get the proper value (#VALX).  I used an example from the samples as a guide when formatting my tooltip.  The chart from the samples shows a chart like the one in the picture off to the left with the tooltip and multiple formatting.  Based on the samples, I had the following code in my ASPX.

Note that this code is inline compared to in the code-behind in the sample, but that shouldn’t make a difference.

<asp:chart ...>
    <series>
        <asp:series name="SampleSeries" xvaluemember="Date" yvaluemember="Value"
            charttype="Line" tooltip="Date: #VALX{d}" />
    </series>
    ...
</asp:chart>

Looking at the tooltip, this should format the X Value to a short date, however when I ran the chart, my tooltip appeared as a number (as it’s represented internally by the charting component).  From my example above, you can see the formatting syntax is fairly simple.  It is just the keyword followed curly braces housing the format string.  You can use any of the standard .NET format strings.  For example, I could format the date like #VALX{MM/dd/yyyy} or if I have a currency for the Y Axis, I could use #VALY{C}.

As you may or may not know, the MS Chart control is based on the Dundas Chart source code 5.5 (more information on the differences here).  With this knowledge, I did a bit of searching and came across this link on the Dundas support site, I finally came up with the solution to my date formatting problem.  The solution is to set the xvaluetype property of the series.  This wasn’t really obvious since I figured the formatting / type from the axis would carry over to the series, but it didn’t.  Anyway, setting the xvaluetype to DateTime, caused the tooltip to format correctly.  Unfortunately this wasn’t shown in the example code in the samples, but hopefully this post will save someone else some time if they encounter this issue.  Here is the final series code, and it now works as expected:

<asp:chart ...>
    <series>
        <asp:series name="SampleSeries" xvaluemember="Date" yvaluemember="Value"
            charttype="Line" tooltip="Date: #VALX{d}" xvaluetype="DateTime" />
    </series>
    ...
</asp:chart>
Technorati Tags: ,

I am a software architect with over 13 years of experience. I simply love coding! I have a driving passion for computers and software development, and a thirst for knowledge that just cannot be quenched. I'm happy to share what I knows in my quest to learn as much as possible. I focus most of my time on web development using Ruby on Rails and ASP.NET MVC.

  • http://www.google.com mayur

    HI….

    I have a chart showing graphs, the X value is a date and the Y value is a temperature.
    I am using the following code :

    DataTable mDt = GetData();
    if (mDt != null && mDt.Rows.Count > 0)
    {
    Chart2.DataSource = mDt;
    Chart2.Series["Series2"].YValueMembers = “Temp”;
    Chart2.Series["Series2"].XValueMember = “date”;

    Chart2.Series["Series2"].ToolTip = ” #VALY °C\nDate: #VALX”;
    Chart2.DataBind();

    Chart2.Series["Series2"].IsValueShownAsLabel = false;
    Chart2.ChartAreas["ChartArea2"].Area3DStyle.Enable3D = false;
    Chart2.Series["Series2"].BorderWidth = 1;
    Chart2.Series["Series2"].MarkerStyle = MarkerStyle.Circle;
    }

    I get the Y value is correct, but the X value is always 0.
    However, when I put a tooltip on the graphs like this: Chart2.Series["Series2"].ToolTip = ” #VALY °C\nDate: #VALX”;

    Can anyone help??

  • Josh

    [quote]i found the solution. The reason X value did not came up on tooltip was i didn’t set "S[k].XValueType" value. It defaults to the "Auto". when set the value to "String" x value brings up on second series tooltip.

    Wondering why it was working for first series then even when i didn’t set XValueType.[/quote]

    Thank you for this Sacho…I had exactly the same problem. Very strange behavior.

  • http://blogs.visoftinc.com/ Damien White

    Sacho -
    I’m not sure about autosizing the charts. My guess though is that this won’t work right. These are images, so they could be stretched, but that may distort it. I’m not sure about the full Dundas product line (which the ASP.NET control is based on), but if you want a scalable chart and don’t mind Flash, check out http://amcharts.com . I’ve used these and they scale nicely in whatever direction you need. They are free to use as long as you don’t mind a small link back to the site, but they have full licenses available as well.

    Hope this helps,
    -Damien

  • Sacho

    Hi again,

    I was searching for how do i autosize chart so my chart will resize automatically as per page size. didn’t found any property for this in MSCharts. any suggestion would be appreciated.

    Thanks!

  • Sacho

    Thanks for your suggestion.

    i found the solution. The reason X value did not came up on tooltip was i didn’t set "S[k].XValueType" value. It defaults to the "Auto". when set the value to "String" x value brings up on second series tooltip.

    Wondering why it was working for first series then even when i didn’t set XValueType.

  • http://blogs.visoftinc.com/ Damien White

    Sacho-
    If the series are added dynamically, I’m assuming you are using code-behind. You can addd the tooltips in code like:

    chart.Series[0].Tooltip = "#VALX, #VALY";
    chart.Series[1].Tooltip = "#VALX, #VALY";

    If you want the a single X value and multiple Ys in one tooltip, you can also do something like:
    "VALX, #VALY, #VALY2, #VALY3"

    Hope this helps,
    -Damien

  • Sacho

    was curious on how to display tooltip with X and Y value on more than one series. plz note the chart created dynamically, series added dynamically. Tried following thing <S[0].ToolTip = "#VALX, #VALY";S[1].ToolTip = "#VALX, #VALY";> but only tooltip displays proper x and y values for first series. For second series, x value always comes as 0 and y value displays correctly. any suggesions?

  • http://blogs.visoftinc.com/ Damien White

    Tara -
    The #VAL{…} just uses the date/time format strings, so try something like #VAL{g} instead of #VAL{d}.

    -Damien

  • tara

    And what if I want to show not only the date but also the time?

  • http://blogs.visoftinc.com/ Damien White

    @deepak -
    You can display any x-axis value in the tooltip like: [b]tooltip="#VALX"[/b].

    -Damien

  • deepak nagalkar

    If i want to show tooltip on x-axis dynamically, but that is not date, its something else then how can i show it?