Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 954
  • Last Modified:

Add a "target" line to a Column type RadHtmlChart

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
BAM
Asked:
BAM
  • 2
1 Solution
 
BAMAuthor Commented:
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
 
BAMAuthor Commented:
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

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now