Add a "target" line to a Column type RadHtmlChart

Posted on 2014-12-17
Last Modified: 2014-12-18
This is my first time using a RadHtmlChart and I have almost exactly what I need, but the final piece of the puzzle is eluding me. Below is what I'm trying to achieve. It's the red line I'm trying to get. Ideally I would also like the line labeled "Target", but I can live without that. I don't care how it's done. Turning the 90% line red, adding a line over the 90% line, adding another field to my SQL query if that would work, or pretty much any solution that will get me there.

Bar Chart
Question by:BZ
  • 2

Accepted Solution

BZ earned 0 total points
ID: 40507192
I found two ways of approaching this, but neither worked for this graph. By combining them I got close to where I was trying to go so I'll share it here in case someone else needs this. I'm including the original two solutions because either by themselves may work just fine for someone else with a different chart than the one I'm working with.

Solution #1: Add a field to the query with the value of 90 and add a line series to the chart.
<telerik:LineSeries Name="Target: 90%" DataFieldY="Line">
				<FillStyle BackgroundColor="#ff0000" />
		<TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
		<LabelsAppearance Visible="false">
		<MarkersAppearance Visible="false" />

Open in new window

RedLine1.PNGProblems: The sample had many columns so it wasn't noticeable that the line did not go all the way across. On mine it's so short it doesn't make sense. The legend tells you that it's the target, but there's no label on the line indicating what it is.

Solution #2: Add a plot band to the chart in the YAxis section.
		<telerik:PlotBand From="89.5" To="90.5" Color="#ff0000" Alpha="50" />

Open in new window

RedLine2.PNGProblems: With no way to label the band and no legend since it isn't part of the query, there is nothing to explain what the line is.

Final Solution: Use the PlotBand as shown above. Use the LineSeries, but turn the label to visible and set the background color of the line to transparent. Making the label visible also shows the line, which is thin and prints on top of some of the columns. Setting the color to transparent takes care of that problem. But then it prints the legend with a transparent square. There's no way to not show the legend, so I changed the title of it to "Target: 90%". Not ideal, but it at least makes sense. This strategy also causes the line label to print for every series, but on this chart that isn't a problem. I also did some formatting to line it up better.

<telerik:LineSeries Name="Target: 90%" DataFieldY="Line" ColorField="Red">
				<FillStyle BackgroundColor="transparent" />
		<LabelsAppearance Visible="true" DataFormatString="Target:\n{0}%">
				<TextStyle Color="Red" FontFamily="Arial Narrow,Arial,sans-serif" FontSize="12px" Margin="20 0 0 0" Padding="20 0 0 0"/>
		<MarkersAppearance Visible="false" />

Open in new window


Author Closing Comment

ID: 40507204
I'd really give it a B+ or A- since it didn't get me exactly where I was trying to go. However, this component has limitations so there probably isn't a solution that will get me all the way there.

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
I need a solution to a Webpage for Wholesale Availability. 11 56
How to speed up an ASP/MS SQL web application 6 74
Problem to file 3 83
Image Orientation On Website 6 55
I'd like to talk about something that is near and dear to my heart: build systems. Without them, building software is all about compiling locally, with software versions everywhere. It can be a mess. Today we are going to discuss building a small di…
Developer tools in browsers have been around for a while, yet they are still heavily underused by developers. Developers still fix html or CSS then refresh page to see effect, or they put alert or debugger in JavaScript and then try again and again …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to selectively show certain fields based on user input using rules to gather relevant information and data from your forms. The rules feature provides you with an opportunity…

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question