Bubble Chart item Demension

Thread is closed for posting
4 posts, 0 answers
  1. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 28 Sep 2011 Link to this post

    Hi. I'm looking for how to set the item demension at the bubble chart.
    my datasource is like this.
    Dim dataTableBubbleData = New DataTable()
        dataTableBubbleData.Columns.Add("Year")
        dataTableBubbleData.Columns.Add("Budget")
        dataTableBubbleData.Columns.Add("Profit")
     
        dataTableBubbleData.Rows.Add(New Object() {"2008", "7", "2"})
        dataTableBubbleData.Rows.Add(New Object() {"2009", "9", "4"})
        dataTableBubbleData.Rows.Add(New Object() {"2010", "7", "3"})
     
        GetBubbleData = dataTableBubbleData
    End Function
     and i defined x , y axis on aspx page like this.
    <telerik:RadChart ID="RadChartBubbleChart" SkinsOverrideStyles="true" runat="server"
                                        Width="800" Height="400">
                                        <ChartTitle>
                                            <TextBlock Text="Bubble Chart">
                                            </TextBlock>
                                        </ChartTitle>
                                        <PlotArea>
                                            <XAxis DataLabelsColumn="Year">
                                                <AxisLabel Visible="true">
                                                    <Appearance Visible="True">
                                                    </Appearance>
                                                    <TextBlock Text="Year">
                                                    </TextBlock>
                                                </AxisLabel>
                                            </XAxis>
                                            <YAxis AxisMode="Normal" MaxValue="12" AutoScale="false">
                                                <Appearance MinorTick-Visible="false" MinorGridLines-Visible="false">
                                                    <MinorGridLines Visible="False"></MinorGridLines>
                                                </Appearance>
                                                <AxisLabel Visible="true">
                                                    <Appearance Visible="True">
                                                    </Appearance>
                                                    <TextBlock Text="Budget">
                                                    </TextBlock>
                                                </AxisLabel>
                                            </YAxis>
                                        </PlotArea>
                                        <Series>
                                            <telerik:ChartSeries DataYColumn="Budget" Type="Bubble" Name="money flow" Appearance-LabelAppearance-Visible="false">
                                                <Appearance>
                                                    <LabelAppearance Visible="False">
                                                    </LabelAppearance>
                                                </Appearance>
                                            </telerik:ChartSeries>
                                        </Series>
                                    </telerik:RadChart>

    ths code works fine indicating bubble. but  i don't know about setting each item's demension.
    i wish to set demension value from "profit" datatable field.
  2. Yavor
    Admin
    Yavor avatar
    11 posts

    Posted 03 Oct 2011 Link to this post

    Hello Shunman,

    To see more information along the lines of the requested functionality, please refer to the following article:

    http://www.telerik.com/help/aspnet-ajax/radchart-types-bubble.html

    I hope this gets you started properly.

    Regards,
    Yavor
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. shunman
    shunman avatar
    77 posts
    Member since:
    Jul 2011

    Posted 03 Oct 2011 Link to this post

    Hi telerik. thank you for reply.
    But already I have read you mentioned article.
    I think, that article should be modify our datasource structure for  x,x2,y,y2 axis value.

    i don't know how to change our data for Bubble chart axis value.
    Could you more help this problem?

    thank you.


  5. Evgenia
    Admin
    Evgenia avatar
    1407 posts

    Posted 05 Oct 2011 Link to this post

    Hello Shunman,

    The Bubble series allow separate chart items to have different bubble sizes without the bubble "loosing it's center on the axes". The size of the bubble is controlled through XValue2 for bubble size on X axis and respectively - YValue2 for bubble size on the Y axis. Here's an example:

        <telerik:ChartSeries Name="Series 1" Type="Bubble">
            <Items>
                <telerik:ChartSeriesItem Name="Item 1" XValue="10" XValue2="2" YValue="5"
                    YValue2="2">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 2" XValue="10" XValue2="3" YValue="10"
                    YValue2="3">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 3" XValue="10" XValue2="4" YValue="15"
                    YValue2="4">
                </telerik:ChartSeriesItem>
                <telerik:ChartSeriesItem Name="Item 4" XValue="10" XValue2="5" YValue="20"
                    YValue2="5">
                </telerik:ChartSeriesItem>
            </Items>
        </telerik:ChartSeries>
    </Series>

    Also note that the size of the bubble depends on the X range and Y range, thus you can use custom range to get proper view. This will cause the bubbles defined above to be circular:

    <PlotArea>
        <XAxis AutoScale="False" MaxValue="30" MinValue="0" Step="5">
        </XAxis>
        <YAxis AutoScale="False" MaxValue="30" MinValue="0" Step="5">
        </YAxis>
    </PlotArea>

    Kind regards,
    Evgenia
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top