BubbleChart Issue

7 posts, 0 answers
  1. ITALO
    ITALO avatar
    2 posts
    Member since:
    Jun 2013

    Posted 27 Nov 2013 Link to this post

    Hi,

    I have a Bubble Chart (RadHtmlChart) filled by a datatable in which every row is a serie.

    Bubble on the chart have the same size even the value assigned to Size property of seriesItem is different.



    How can I have the correct size for each series?



    Here's the code used to fille chart.



    // get data

    DataTable dt = ChartQueryStringParameters.GetChartSeries(p.PMaster, p.Level, p.L_Item, itemsPerChart);

    // bidning data to volume chart

    foreach (DataRow dr in dt.Rows)

    {

    if (dr["Vol_Dimension"].ToString() != "0")

    {

    BubbleSeries bSerie = new BubbleSeries();

    bSerie.Name = dr["SerieName"].ToString().Replace("'", "\\'");

    SeriesItem sItem = new SeriesItem();

    sItem.XValue = Convert.ToDecimal(dr["Vol_XValue"]);

    sItem.YValue = Convert.ToDecimal(dr["Vol_YValue"]);

    sItem.SizeValue = Convert.ToDecimal(dr["Vol_Dimension"]);

    sItem.TooltipValue = dr["SerieName"].ToString().Replace("'", "\\'");

    bSerie.Items.Add(sItem);

    BubbleChartGAP_Volume.PlotArea.XAxis.AxisCrossingValue = Convert.ToDecimal(dr["Vol_XAxis"]);

    BubbleChartGAP_Volume.PlotArea.YAxis.AxisCrossingValue = Convert.ToDecimal(dr["Vol_YAxis"]);

    BubbleChartGAP_Volume.PlotArea.Series.Add(bSerie);

    }

    }



    Thank you.

  2. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 02 Dec 2013 Link to this post

    Hello,

    It seems that you are creating only one BubbleSeriesItem per each BubbleSeries. In that case all the bubble series items will share the same size. You can test that with the following markup:
    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="600px" Height="400px">
        <PlotArea>
            <Series>
                <telerik:BubbleSeries Name="series 1">
                    <SeriesItems>
                        <telerik:BubbleSeriesItem X="2" Y="2" Size="4" />
                        <telerik:BubbleSeriesItem X="3" Y="2" Size="100" />
                    </SeriesItems>
                </telerik:BubbleSeries>
                <telerik:BubbleSeries Name="series 2">
                    <SeriesItems>
                        <telerik:BubbleSeriesItem X="4" Y="2" Size="8" />
                    </SeriesItems>
                </telerik:BubbleSeries>
                <telerik:BubbleSeries Name="series 3">
                    <SeriesItems>
                        <telerik:BubbleSeriesItem X="6" Y="2" Size="16" />
                    </SeriesItems>
                </telerik:BubbleSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    The second item from series 1 (the items with the largest size) will have the same size like the item from series 2 and series 3. That being said the items from the series that have the largest size will share the same size and the size calculation of the rest items from within these series will be based on it.

    Regards,
    Danail Vasilev
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gregory
    Gregory avatar
    3 posts
    Member since:
    Nov 2012

    Posted 20 Feb 2015 in reply to Danail Vasilev Link to this post

    The behavior implemented for the series is not correct. It should scale the BubbleChartItems inside of the Chart itself and not inside of BubbleSeries only.
    We are also using functionality of the Bubble Chart and this issue become a big problem to us. The issue created to us two main problems: 1) We cannot display the legend without using BubbleSeries; 2) We cannot set a transparency.
  5. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 24 Feb 2015 Link to this post

    Hello Gregory,

    This issue has already been logged in the FIX the size of BubbleSeriesItems is not consistend between series feedback item, so that you can monitor, comment and vote on it. For the time being you can workaround this behavior as follows:
    1)Place all of the items within the same series
    2)Use different colors for items in order to distinguish them from their original series.
    3)Create a custom legend if needed one.

    Regarding the opacity you can set is through the kendo widget as illustrated in the ADD: Opacity property for the Series in RadHtmlChart feedback item. It is also fine to use functions:

    <script>
        function pageLoad() {
            var chart = $find("<%=BubbleChart.ClientID%>");
            chart._chartObject.options.series[0].opacity = function (args) {
                if (args.value.size > 30) {
                    return 0.1
                }
                else {
                    return 0.9
                }
            };
            chart.repaint();
        }
    </script>
    ASPX:
    <telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400">
        <PlotArea>
            <Series>
                <telerik:BubbleSeries>
                    <Appearance FillStyle-BackgroundColor="#6ab2c9">
                    </Appearance>
                    <SeriesItems>
                        <telerik:BubbleSeriesItem Size="3" X="5" Y="5500" />
                        <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" />
                        <telerik:BubbleSeriesItem Size="33" X="20" Y="39000" />
                        <telerik:BubbleSeriesItem Size="10" X="18" Y="24400" />
                        <telerik:BubbleSeriesItem Size="42" X="20" Y="32000" />
                    </SeriesItems>
                </telerik:BubbleSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Gregory
    Gregory avatar
    3 posts
    Member since:
    Nov 2012

    Posted 24 Feb 2015 in reply to Danail Vasilev Link to this post

    Solution is good,

    though i have a problem to reset opacity when my page with RadhtmlChart is partially updated by RadAdjaxManager .
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1490 posts

    Posted 25 Feb 2015 Link to this post

    Hello Gregory,

    Can you please paste a short code mockup that reproduces the issue so that I can make a further investigation? For the time being you can try to attach to the OnResponseEnd event of the ajax manager and repaint the chart with the provided code.

    Regards,
    Danail Vasilev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. Gregory
    Gregory avatar
    3 posts
    Member since:
    Nov 2012

    Posted 28 Jul 2015 Link to this post

    It works with RadAjaxManager. It has been another issue.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017