This is a migrated thread and some comments may be shown as answers.

RadHTMLChart - Scaling bubble sizes

4 Answers 155 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 19 Nov 2015, 01:38 PM

Hi Mohammad,

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

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

answered on 24 Nov 2015, 07:33 PM

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()

answered on 25 Nov 2015, 03:02 PM

Hello Mohammad,

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