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

RadHTMLChart - Scaling bubble sizes

4 Answers 45 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mohammad
Top achievements
Rank 1
Mohammad asked on 16 Nov 2015, 03:02 PM

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

Sort by
0
Mohammad
Top achievements
Rank 1
answered on 16 Nov 2015, 03:07 PM
Attached is the screenshot.
0
Vessy
Telerik team
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
0
Mohammad
Top achievements
Rank 1
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() 

 

0
Vessy
Telerik team
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
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
Tags
General Discussions
Asked by
Mohammad
Top achievements
Rank 1
Answers by
Mohammad
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or