RangeColumnsSeries and BubbleSeries in same graph

2 posts, 0 answers
  1. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 08 Aug Link to this post

    Hi,

    I am using telerik RadHtmlChart Component with RangeColumnSeries. I would like to add BubbleSeries to this graph also but it does not appear.

    See the png what I would like to do.

     

    and below is the used code:

       <telerik:RadHtmlChart runat="server" ID="RangeColumnChart" Width="800px" Height="500px">
            <ChartTitle Text="Putket">
            </ChartTitle>
            <PlotArea>

                <XAxis Visible="True">
                    <Items>
                        <telerik:AxisItem LabelText="1"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="2"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="3"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="4"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="5"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="6"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="7"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="8"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="9"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="10"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="11"></telerik:AxisItem>
                        <telerik:AxisItem LabelText="12"></telerik:AxisItem>
                    </Items>
                </XAxis>
                <YAxis Visible="True"></YAxis>
                <Series>
                    <telerik:RangeColumnSeries>
                        <SeriesItems>
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="25" />
                            <telerik:RangeSeriesItem From="0" To="20" />
                            <telerik:RangeSeriesItem From="0" To="20" />
                        </SeriesItems>


                        <LabelsAppearance Visible="false">
                            <FromLabelsAppearance>
                                <ClientTemplate>
                                        #=value.from# &deg;C
                                </ClientTemplate>
    </FromLabelsAppearance>
                            <ToLabelsAppearance>
                                <ClientTemplate>
                                        #=value.to# &deg;C
                                </ClientTemplate>
    </ToLabelsAppearance>
                        </LabelsAppearance>
                        <TooltipsAppearance Color="White">
                            <ClientTemplate>
                                    Avg Min Temp : #= value.from # &deg;C<br>
                                    Avg Max Temp : #= value.to # &deg;C
                            </ClientTemplate>
                        </TooltipsAppearance>
                    </telerik:RangeColumnSeries>
                       <telerik:BubbleSeries Name="pallukat">

                        <Appearance FillStyle-BackgroundColor="#328fae"></Appearance>
                        <SeriesItems>
                            <telerik:BubbleSeriesItem Size="33739900" X="7" Y="8" Tooltip="CAN" />
                            <telerik:BubbleSeriesItem Size="33739900" X="7" Y="16" Tooltip="CAN" />
                            <telerik:BubbleSeriesItem Size="33739900" X="8" Y="8" Tooltip="CAN" />
                            <telerik:BubbleSeriesItem Size="33739900" X="8" Y="18" Tooltip="CAN" />

                        </SeriesItems>
                    </telerik:BubbleSeries>



                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>

     

    Can you provide simple example how I get this work?

     

    Regards,

     Auvo

     

     

  2. Vessy
    Admin
    Vessy avatar
    1384 posts

    Posted 10 Aug Link to this post

    Hi Auvo,

    I am adraid that I will need to disappoint you, but it is not possible to achieve the desired scenario for the moment as the Bubble chart is numeric chart, while the Column chart is category and they cannot be combined.

    Th only possible solution I can suggest you for the moment is to combine your RangeColumn series with Line series, setting the width of the latter to 0, thus the line will not be visible. Unfortunately with this approach you will not be able to add more than one item X axis point:
    <telerik:RadHtmlChart runat="server" ID="RangeColumnChart" Width="800px" Height="500px">
        <ChartTitle Text="Putket">
        </ChartTitle>
        <PlotArea>
            <XAxis Visible="True">
                <Items>
                    <telerik:AxisItem LabelText="7"></telerik:AxisItem>
                    <telerik:AxisItem LabelText="8"></telerik:AxisItem>
                    <telerik:AxisItem LabelText="9"></telerik:AxisItem>
                    <telerik:AxisItem LabelText="10"></telerik:AxisItem>
                </Items>
            </XAxis>
            <YAxis Visible="True"></YAxis>
            <Series>
                <telerik:RangeColumnSeries>
                    <SeriesItems>
                        <telerik:RangeSeriesItem From="0" To="25" />
                        <telerik:RangeSeriesItem From="0" To="25" />
                        <telerik:RangeSeriesItem From="0" To="20" />
                        <telerik:RangeSeriesItem From="0" To="20" />
                    </SeriesItems>
                    <LabelsAppearance Visible="false">
                        <FromLabelsAppearance>
                            <ClientTemplate>
                                #=value.from# °C
                            </ClientTemplate>
                        </FromLabelsAppearance>
                        <ToLabelsAppearance>
                            <ClientTemplate>
                                #=value.to# °C
                            </ClientTemplate>
                        </ToLabelsAppearance>
                    </LabelsAppearance>
                    <TooltipsAppearance Color="White">
                        <ClientTemplate>
                            Avg Min Temp : #= value.from # °C<br>
                            Avg Max Temp : #= value.to # °C
                        </ClientTemplate>
                    </TooltipsAppearance>
                </telerik:RangeColumnSeries>
                <telerik:LineSeries>
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="8" />
                        <telerik:CategorySeriesItem Y="16" />
                        <telerik:CategorySeriesItem Y="8" />
                        <telerik:CategorySeriesItem Y="18" />
                    </SeriesItems>
                    <LineAppearance Width="0" />
                    <MarkersAppearance BackgroundColor="Red" Size="30" />
                </telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>


    Regards,
    Vessy
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top