RadHTMLChart - Scaling bubble sizes

5 posts, 0 answers
  1. Mohammad
    Mohammad avatar
    7 posts
    Member since:
    Nov 2013

    Posted 16 Nov 2015 Link to this post

    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

  2. Mohammad
    Mohammad avatar
    7 posts
    Member since:
    Nov 2013

    Posted 16 Nov 2015 Link to this post

    Attached is the screenshot.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 19 Nov 2015 Link to this post

    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
  5. Mohammad
    Mohammad avatar
    7 posts
    Member since:
    Nov 2013

    Posted 24 Nov 2015 in reply to Vessy Link to this post

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

     

  6. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 25 Nov 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017