Hi,
I'm having trouble viewing the bubble chart I developed which has bubbles that overlay. I am trying to find a way to scale these bubbles for better viewing (which can be done in excel bubble charts). Please suggest if there is any solution for this.
Thanks
MT
4 Answers, 1 is accepted
Rank 1
The only approach I can suggest you with the current implementation of RadHtmlChart is to define custom Background colors to the series which are overlapping. For example:
<telerik:RadHtmlChart runat="server" ID="BubbleChart" Width="500" Height="400"> <ChartTitle Text="Market Share Study"> </ChartTitle> <PlotArea> <Appearance> <FillStyle BackgroundColor="White"></FillStyle> </Appearance> <XAxis MinValue="0" MaxValue="30" Step="10"> <TitleAppearance Text="Number of Products"></TitleAppearance> </XAxis> <YAxis MinValue="0" MaxValue="80000" Step="10000"> <LabelsAppearance DataFormatString="${0}"></LabelsAppearance> <TitleAppearance Text="Sales"></TitleAppearance> </YAxis> <Series> <telerik:BubbleSeries> <Appearance FillStyle-BackgroundColor="#6ab2c9"> </Appearance> <TooltipsAppearance DataFormatString="Percentage of Market Share: {2}%<br /> Number of products: {0}<br /> Sales: ${1}" /> <SeriesItems> <telerik:BubbleSeriesItem Size="3" X="12" Y="10000" BackgroundColor="#838B8B"/> <telerik:BubbleSeriesItem Size="12" X="14" Y="12200" BackgroundColor="#668B8B" /> <telerik:BubbleSeriesItem Size="33" X="18" Y="28000" BackgroundColor="#8FD8D8"/> <telerik:BubbleSeriesItem Size="10" X="16" Y="24400" /> <telerik:BubbleSeriesItem Size="42" X="13" Y="18000" BackgroundColor="#C1CDCD"/> </SeriesItems> </telerik:BubbleSeries> </Series> </PlotArea> <Legend> <Appearance Position="Right"></Appearance> </Legend></telerik:RadHtmlChart>I hope this approach will be helpful for you in achieving the desired scenario.
Regards,
Vessy
Telerik
Rank 1
Thanks Vessy,
I'm binding data to the series and also I can't use custom colors as I am highlighting one of the bubbles using the ColorField. Skin is applied to the chart. Is there a way to manipulate data or axes to achieve the scaling of bubbles.
Dim bubbleSeries As New BubbleSeries
With bubbleSeries
.DataFieldX = "MST"
.DataFieldY = "SOWD"
.DataFieldSize = "HHC"
.LabelsAppearance.Visible = True
.LabelsAppearance.DataField = "BName"
.LabelsAppearance.Color = Drawing.Color.White
.LabelsAppearance.TextStyle.FontSize = 7
.LabelsAppearance.TextStyle.Italic = True
.ColorField = "Color"
.TooltipsAppearance.DataFormatString = ""
.DataFieldTooltip = "BName"
.Name = "Branch"
End With
chart1.PlotArea.Series.Add(bubbleSeries)
chart1.DataSource = dt
chart1.DataBind()
A possible way to scale the bubble series is to play with their min and max size. Currently this can be done only through the client-side object of the HtmlChart in a similar way:
$find('BubbleChart').get_kendoWidget().options.series[0].minSize = 1;$find('BubbleChart').get_kendoWidget().options.series[0].maxSize = 10;$find('BubbleChart').get_kendoWidget().redraw()You can find more detailed information regarding these properties in the API reference of the Kendo UI Chart here:
http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.maxSize
Regards,
Vessy
Telerik