Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Bubble Chart Average X and Y lines

3 Answers 82 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Mohammad
Top achievements
Rank 1
Mohammad asked on 22 Jul 2015, 08:01 PM
sample.png

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

Sort by
0
Danail Vasilev
Telerik team
answered on 27 Jul 2015, 01:35 PM
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
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
Danail Vasilev
Telerik team
answered on 19 Aug 2015, 11:05 AM
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:
<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
Tags
Chart (HTML5)
Asked by
Mohammad
Top achievements
Rank 1
Answers by
Danail Vasilev
Telerik team
Mohammad
Top achievements
Rank 1
Share this question
or