Solved

Add a "target" line to a Column type RadHtmlChart

Posted on 2014-12-17
2
850 Views
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
0
Comment
Question by:BZ
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
2 Comments
 

Accepted Solution

by:
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">
		<Appearance>
				<FillStyle BackgroundColor="#ff0000" />
		</Appearance>
		<TooltipsAppearance Color="White" DataFormatString="{0}%"></TooltipsAppearance>
		<LabelsAppearance Visible="false">
		</LabelsAppearance>
		<MarkersAppearance Visible="false" />
</telerik:LineSeries>

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.
<PlotBands>
		<telerik:PlotBand From="89.5" To="90.5" Color="#ff0000" Alpha="50" />
</PlotBands>

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">
		<Appearance>
				<FillStyle BackgroundColor="transparent" />
		</Appearance>
		<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"/>
		</LabelsAppearance>
		<MarkersAppearance Visible="false" />
</telerik:LineSeries>

Open in new window

RedLineSolved.PNG
0
 

Author Closing Comment

by:BZ
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.
0

Featured Post

Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

Question has a verified solution.

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

Foreword (May 2015) This web page has appeared at Google.  It's definitely worth considering! https://www.google.com/about/careers/students/guide-to-technical-development.html How to Know You are Making a Difference at EE In August, 2013, one …
If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Learn how to set-up custom confirmation messages to users who complete your Wufoo form. Include inputs from fields in your form, webpage redirects, and more with Wufoo’s confirmation options.

688 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