Bubble Chart Average X and Y lines

4 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    7 posts
    Member since:
    Nov 2013

    Posted 22 Jul 2015 Link to this post

    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

     

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 27 Jul 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mohammad
    Mohammad avatar
    7 posts
    Member since:
    Nov 2013

    Posted 14 Aug 2015 in reply to Danail Vasilev Link to this post

    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

     

  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 19 Aug 2015 Link to this post

    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
Back to Top