BubbleChart Issue

[ITALO]

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.

[Danail Vasilev]

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

[Gregory]

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.

[Danail Vasilev]

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

 

 

[Gregory]

Solution is good,

though i have a problem to reset opacity when my page with RadhtmlChart is partially updated by RadAdjaxManager .

[Danail Vasilev]

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

 

 

[Gregory]

It works with RadAjaxManager. It has been another issue.