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.
6 Answers, 1 is accepted
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
>
Regards,
Danail Vasilev
Telerik

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.
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.

though i have a problem to reset opacity when my page with RadhtmlChart is partially updated by RadAdjaxManager .
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.
