<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>
<channel>
	<title>Visoft, Inc. Blogs &#187; ASP.NET Charts</title>
	<atom:link href="http://blogs.visoftinc.com/category/asp-net-charts/feed/" rel="self" type="application/rss+xml" />
	<link>http://blogs.visoftinc.com</link>
	<description>.NET, ASP.NET, AJAX, Ruby and more</description>
	<lastBuildDate>Mon, 12 Mar 2012 18:05:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		<item>
		<title>ASP.NET 3.5 Charting Control &#8211; Formatting Tooltips as Date</title>
		<link>http://blogs.visoftinc.com/2008/12/15/asp-net-3-5-charting-control-formatting-tooltips-as-date/</link>
		<comments>http://blogs.visoftinc.com/2008/12/15/asp-net-3-5-charting-control-formatting-tooltips-as-date/#comments</comments>
		<pubDate>Tue, 16 Dec 2008 02:23:24 +0000</pubDate>
		<dc:creator>Damien White</dc:creator>
				<category><![CDATA[ASP.NET]]></category>
		<category><![CDATA[ASP.NET Charts]]></category>
		<guid isPermaLink="false">/archive/2008/12/15/ASP.NET-3.5-Charting-Control-Formatting-Tooltips-as-Date.aspx</guid>
		<description><![CDATA[I&#8217;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&#8217;t or need one of the bits, check out ScottGu&#8217;s blog.  I recently started using the component and it&#8217;s really nice.  While working with it, I ran into an issue formatting [...]]]></description>
			<content:encoded><![CDATA[<p><a href="/wp-content/uploads/WindowsLiveWriter/aspchartFormattingTooltips_A211/mscharttooltip_2.png"><img style="margin: 0px 15px 0px 0px; border-width: 0px;" src="http://blogs.visoftinc.com/wp-content/uploads/WindowsLiveWriter/aspchartFormattingTooltips_A211/mscharttooltip_thumb.png" border="0" alt="mscharttooltip" width="173" height="108" align="left" /></a> I&#8217;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&#8217;t or need one of the bits, check out <a href="http://weblogs.asp.net/scottgu/archive/2008/11/24/new-asp-net-charting-control-lt-asp-chart-runat-quot-server-quot-gt.aspx" target="_blank">ScottGu&#8217;s blog</a>.  I recently started using the component and it&#8217;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.</p>
<p>In order to format the tooltips, I needed to use one of the <a href="http://blogs.msdn.com/alexgor/archive/2008/11/11/microsoft-chart-control-how-to-using-keywords.aspx" target="_blank">supported keywords</a> in order to get the proper value (#VALX).  I used an example from the <a href="http://code.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591" target="_blank">samples</a> 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.</p>
<p><span id="more-36"></span></p>
<p>Note that this code is inline compared to in the code-behind in the sample, but that shouldn&#8217;t make a difference.</p>
<div>
<div>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">asp:chart</span> ...<span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">series</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">asp:series</span> <span class="attr">name</span><span class="kwrd">="SampleSeries"</span> <span class="attr">xvaluemember</span><span class="kwrd">="Date"</span> <span class="attr">yvaluemember</span><span class="kwrd">="Value"</span>
            <span class="attr">charttype</span><span class="kwrd">="Line"</span> <span class="attr">tooltip</span><span class="kwrd">="Date: #VALX{d}"</span> <span class="kwrd">/&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">series</span><span class="kwrd">&gt;</span>
    ...
<span class="kwrd">&lt;/</span><span class="html">asp:chart</span><span class="kwrd">&gt;</span></pre>
</div>
<p><span class="kwrd">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&#8217;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}. </span></p>
<p>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 <a href="http://blogs.msdn.com/alexgor/archive/2008/11/07/microsoft-chart-control-vs-dundas-chart-control.aspx" target="_blank">here</a>).  With this knowledge, I did a bit of searching and came <span class="kwrd">across this <a href="http://support.dundas.com/onlinedocumentation/webchart2005/Working_with_Dates.html" target="_blank">link</a> on the Dundas support site, I finally came up with the solution to my date formatting problem.  The solution is to set the <strong>xvaluetype</strong> property of the series.  This wasn&#8217;t really obvious since I figured the formatting / type from the axis would carry over to the series, but it didn&#8217;t.  Anyway, setting the <strong>xvaluetype</strong> to <strong>DateTime</strong>, caused the tooltip to format correctly.  Unfortunately this wasn&#8217;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:</span></p>
<div>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">asp:chart</span> ...<span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">series</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">asp:series</span> <span class="attr">name</span><span class="kwrd">="SampleSeries"</span> <span class="attr">xvaluemember</span><span class="kwrd">="Date"</span> <span class="attr">yvaluemember</span><span class="kwrd">="Value"</span>
            <span class="attr">charttype</span><span class="kwrd">="Line"</span> <span class="attr">tooltip</span><span class="kwrd">="Date: #VALX{d}"</span> <strong><span class="attr">xvaluetype</span><span class="kwrd">="DateTime"</span></strong> <span class="kwrd">/&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">series</span><span class="kwrd">&gt;</span>
    ...
<span class="kwrd">&lt;/</span><span class="html">asp:chart</span><span class="kwrd">&gt;</span></pre>
<div id="scid:0767317B-992E-4b12-91E0-4F059A8CECA8:99d2a6a5-4024-401e-bdbe-fe74b331b078" class="wlWriterSmartContent" style="margin: 0px; display: inline; padding: 0px;">Technorati Tags: <a rel="tag" href="http://technorati.com/tags/MSChart">MSChart</a>,<a rel="tag" href="http://technorati.com/tags/ASP.NET">ASP.NET</a></div>
</div>
</div>
]]></content:encoded>
			<wfw:commentRss>http://blogs.visoftinc.com/2008/12/15/asp-net-3-5-charting-control-formatting-tooltips-as-date/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>

