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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

Question has a verified solution.

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

Introduction HyperText Transfer Protocol ( or "HTTP" is the underpinning of internet communication.  As a teacher of web development I have heard many questions, mostly from my younger students who have come to t…
Before we dive into the marketing strategies involved with creating an effective homepage, it’s crucial that EE members know what a homepage is. In essence, a homepage is the introductory, or default page, of a website that typically highlights the …
This video teaches users how to migrate an existing Wordpress website to a new domain.
Learn how to set-up PayPal payment integration in your Wufoo form. Allow your users to remit payment through PayPal upon completion of your online form. This is helpful for collecting membership payments, customer payments, donations, and more.

803 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