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

RangeColumnsSeries and BubbleSeries in same graph

1 Answer 89 Views

Chart (HTML5)

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

Auvo asked on 08 Aug 2016, 11:11 AM

rangeandbubleinsamegraph.png

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# °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: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

1 Answer, 1 is accepted

answered on 10 Aug 2016, 11:45 AM

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="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.