RadChart to RadHtmlChart

1 Answer 135 Views
Chart (HTML5) Chart (Obsolete)
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Johnny asked on 12 Aug 2022, 01:30 PM

Hello everyone.

I just can't manage to upgrade my RadChart to a RadHtmlChart because of the differences...

Is there an easier way than doing it manually?

Any sort of help is appreciated. Thanks!


<telerik:RadChart ID="RadChart1" runat="server" DataGroupColumn="jours" 
                            DataSourceID="SDSGraph7I" Skin="Mac" Width="800px">
                            <Series>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J">
                                    <Appearance>
                                        <FillStyle MainColor="55, 167, 226" SecondColor="22, 85, 161">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+1">
                                    <Appearance>
                                        <FillStyle MainColor="223, 87, 60" SecondColor="200, 38, 37">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+2">
                                    <Appearance>
                                        <FillStyle MainColor="118, 203, 76" SecondColor="73, 166, 22">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+3">
                                    <Appearance>
                                        <FillStyle MainColor="119, 83, 76" SecondColor="88, 59, 52">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+4">
                                    <Appearance>
                                        <FillStyle MainColor="255, 222, 0" SecondColor="242, 188, 0">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+5">
                                    <Appearance>
                                        <FillStyle MainColor="164, 65, 221" SecondColor="125, 24, 167">
                                            <FillSettings GradientMode="Vertical">
                                            </FillSettings>
                                        </FillStyle>
                                        <TextAppearance TextProperties-Color="Black">
                                        </TextAppearance>
                                    </Appearance>
                                </telerik:ChartSeries>
                                <telerik:ChartSeries DataYColumn="valeur" Name="J+6">
                                </telerik:ChartSeries>
                            </Series>
                            <PlotArea>
                                <XAxis AutoScale="False" DataLabelsColumn="grpcattarif" MaxValue="4" 
                                    MinValue="1" Step="1">
                                    <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134">
                                        <MajorGridLines Color="209, 222, 227" PenStyle="Solid" />
                                        <TextAppearance TextProperties-Color="51, 51, 51">
                                        </TextAppearance>
                                    </Appearance>
                                    <AxisLabel>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="51, 51, 51">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                    <Items>
                                        <telerik:ChartAxisItem Value="1">
                                            <TextBlock Text="BREST          ">
                                            </TextBlock>
                                        </telerik:ChartAxisItem>
                                        <telerik:ChartAxisItem Value="2">
                                            <TextBlock Text="BRIEUC         ">
                                            </TextBlock>
                                        </telerik:ChartAxisItem>
                                        <telerik:ChartAxisItem Value="3">
                                            <TextBlock Text="QUIMPER        ">
                                            </TextBlock>
                                        </telerik:ChartAxisItem>
                                        <telerik:ChartAxisItem Value="4">
                                            <TextBlock Text="VANNES         ">
                                            </TextBlock>
                                        </telerik:ChartAxisItem>
                                    </Items>
                                </XAxis>
                                <YAxis>
                                    <Appearance Color="134, 134, 134" MajorTick-Color="134, 134, 134" 
                                        MinorTick-Color="134, 134, 134" MinorTick-Width="0">
                                        <MajorGridLines Color="209, 222, 227" />
                                        <MinorGridLines Color="233, 239, 241" />
                                        <TextAppearance TextProperties-Color="51, 51, 51">
                                        </TextAppearance>
                                    </Appearance>
                                    <AxisLabel>
                                        <TextBlock>
                                            <Appearance TextProperties-Color="51, 51, 51">
                                            </Appearance>
                                        </TextBlock>
                                    </AxisLabel>
                                </YAxis>
                                <Appearance>
                                    <FillStyle FillType="Solid" MainColor="White">
                                    </FillStyle>
                                    <Border Color="134, 134, 134" />
                                </Appearance>
                            </PlotArea>
                            <Appearance Corners="Round, Round, Round, Round, 6">
                                <FillStyle FillType="Image">
                                    <FillSettings BackgroundImage="{chart}" ImageDrawMode="Flip" ImageFlip="FlipX">
                                    </FillSettings>
                                </FillStyle>
                                <Border Color="138, 138, 138" />
                            </Appearance>
                            <ChartTitle>
                                <Appearance Position-AlignedPosition="Top">
                                    <FillStyle MainColor="">
                                    </FillStyle>
                                </Appearance>
                                <TextBlock Text="Point Parc � 7 jours">
                                    <Appearance TextProperties-Font="Tahoma, 13pt">
                                    </Appearance>
                                </TextBlock>
                            </ChartTitle>
                            <Legend>
                                <Appearance Dimensions-Margins="15%, 3%, 1px, 1px" 
                                    Position-AlignedPosition="TopRight">
                                    <ItemMarkerAppearance Figure="Square">
                                        <Border Color="134, 134, 134" />
                                    </ItemMarkerAppearance>
                                    <FillStyle MainColor="">
                                    </FillStyle>
                                    <Border Color="Transparent" />
                                </Appearance>
                            </Legend>
                        </telerik:RadChart>
Rumen
Telerik team
commented on 15 Aug 2022, 07:26 AM

Hi Johny,

While there isn't an automatic migration tool, there is a very solid section in the documentation discussing all important migration topics:

Please check it out and let us know if you need additional assistance.

Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
commented on 16 Aug 2022, 07:52 AM | edited

Hi Rumen,

The only thing that I am not able to do is dividing my X-Axis according to the names of the agencies that I have, like it was divided in the old RadChart.

As You can see in my attached screenshot (to this comment ~ Screenshot_3), the old chart had it divided into Brest / Brieuc / Quimper / Vannes. Now in the new one, I have having BREST BREST BREST / BREIUC BRIEUC .... / etc.

The point is, instead of having the same agency name repeated multiple times, how can I simply put 1 label for each section and group them?

Thanks!

Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
commented on 16 Aug 2022, 07:57 AM

You can also check the screenshot attached to this comment, it shows an example of how the data looks from the database. I have applied that same query to the old and new RadCharts.

 

Rumen
Telerik team
commented on 19 Aug 2022, 11:59 AM

Hi Johnny,

RadHtmlChart offers grouping as shown in the Stacked Groups demo.

Note that this only applies to grouping items from several series with the same labels. If they are from the same series there is no way to group them.

If you know the step, you can display the labels in n steps so that only one is visible at a time.

For example, the first 7 are with one label, the next 7 are with another. You can skip the first 3, show the 4th, put the step on 7 and so the 4th, 11th, 18th label will actually be displayed. For more information see this article: Date Axis Base Unit Steps.

 

Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
commented on 22 Aug 2022, 07:42 AM

Hi Rumen. I will be checking this out and let you know the results. Thanks!
Rumen
Telerik team
commented on 22 Aug 2022, 07:55 AM

Take your time, Johny! Have a nice and productive week!

1 Answer, 1 is accepted

Sort by
0
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
answered on 19 Aug 2022, 06:57 AM
Hello again! I would appreciate it if anyone could actually help with this. Thanks!
Tags
Chart (HTML5) Chart (Obsolete)
Asked by
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Answers by
Johnny
Top achievements
Rank 3
Bronze
Iron
Iron
Share this question
or