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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

I made this because I wanted to get e-mail with a attached csv file so I'd would be able to import user input into a MS Excel template, but I also wanted to register/save all inputs from each day in a file on the server. 1st - It creates a temp C…
Thoughout my experience working on eCommerce web applications I have seen applications succumbing to increased user demand and throughput. With increased loads the response times started to spike, which leads to user frustration and lost sales. I ha…
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 choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

757 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now