Hi,
I've specific set of requirements for Bubble Chart. How can I add average X and Y lines to bubble chart as shown in the attached image. Is this something possible in Telerik HTML Chart? Is there a hack which can draw these average lines.
Thanks
MT
3 Answers, 1 is accepted
0
Hello MT,
What I can suggest is that you use Visual Templates, in order to draw the desired lines. You can examine the following resources for details on the matter:
- http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template
- http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/visual-templates/defaultcs.aspx
- http://www.telerik.com/forums/custom-drawing
Regards,
Danail Vasilev
Telerik
What I can suggest is that you use Visual Templates, in order to draw the desired lines. You can examine the following resources for details on the matter:
- http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/visual-template
- http://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/visual-templates/defaultcs.aspx
- http://www.telerik.com/forums/custom-drawing
Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items
0

Mohammad
Top achievements
Rank 1
answered on 14 Aug 2015, 03:31 PM
Hi Danail,
Thanks for the information. We use Telerik ASP.Net and not Kendo. We don't have skill set to write kendo code. Will you give us an example specific to above requirements.
This will be very helpful as we need this implemented very soon. We have been using Telerik for a while and we don't want to switch to other reporting tools in our ASP.Net applications.
Thanks
0
Hi MT,
RadHtmlChart is actually an ASP.NET server-side wrapper of the Kendo UI charting widgets, so that it is fine to utilize its API. More information is available here - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview
As for the custom scenario you can find below a possible approach for drawing lines through the center of the bubble items, but you can also modify it further according to your own needs and requirements:
ASPX:
Regards,
Danail Vasilev
Telerik
RadHtmlChart is actually an ASP.NET server-side wrapper of the Kendo UI charting widgets, so that it is fine to utilize its API. More information is available here - http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview
As for the custom scenario you can find below a possible approach for drawing lines through the center of the bubble items, but you can also modify it further according to your own needs and requirements:
ASPX:
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
></
telerik:RadScriptManager
>
<
telerik:RadHtmlChart
runat
=
"server"
ID
=
"BubbleChart"
Width
=
"500"
Height
=
"400"
>
<
ClientEvents
OnLoad
=
"customDraw"
/>
<
PlotArea
>
<
XAxis
Name
=
"xAxis"
>
</
XAxis
>
<
YAxis
Name
=
"yAxis"
>
</
YAxis
>
<
Series
>
<
telerik:BubbleSeries
>
<
TooltipsAppearance
DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<
br
/> Sales: ${1}" />
<
SeriesItems
>
<
telerik:BubbleSeriesItem
Size
=
"3"
X
=
"5"
Y
=
"55"
/>
<
telerik:BubbleSeriesItem
Size
=
"12"
X
=
"14"
Y
=
"12"
/>
<
telerik:BubbleSeriesItem
Size
=
"33"
X
=
"20"
Y
=
"60"
/>
</
SeriesItems
>
</
telerik:BubbleSeries
>
</
Series
>
</
PlotArea
>
</
telerik:RadHtmlChart
>
<
script
>
function customDraw(e) {
var linesArray = new Array(),
chart = e.get_kendoWidget(),
series = chart.options.series,
lineLength = 50;
for (var i = 0; i <
series.length
; i++) {
for (var
g
=
0
; g < series[i].data.length; g++) {
linesArray.push(series[i].data[g])
}
}
var
yAxis
=
chart
.getAxis("yAxis");
var
xAxis
=
chart
.getAxis("xAxis");
for (var
i
=
0
; i < linesArray.length; i++) {
var
ySlot
=
yAxis
.slot(linesArray[i].y);
var
xSlot
=
xAxis
.slot(linesArray[i].x);
var
path
=
new
kendo.drawing.Path({
stroke: {
color: "red",
width: 3
}
}).moveTo(xSlot.origin.x, ySlot.origin.y)
.lineTo(xSlot.origin.x + lineLength, ySlot.origin.y);
chart.surface.draw(path);
}
}
</script>
Regards,
Danail Vasilev
Telerik
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items