Chart is causing page layout problem in RTL site

3 posts, 0 answers
  1. HCT-CERT
    HCT-CERT avatar
    22 posts
    Member since:
    Aug 2012

    Posted 29 Aug 2013 Link to this post

    Hi,
    We have built a reporting portal with bilingual support (Arabic & English) using kendoui DataViz charts.Everything works fine on chrome in both English & Arabic sites until we tested recently the Arabic site in IE to find that the charts are causing the page width to be bigger 3 times (see attached screenshot).This is happening with both RadHtmlChart and kendoui DataViz charts.My understanding is that there is a big similarities between RadHtmlChart and kendoui charts and that's why I am posting in this forum (I can not post in Kendo UI forums though I have purchased all the 3 kendoui packages), and hoping to get this fixed.

    Below is the code for both RadHtmlChart & kendoui chart.I have added dir="ltr" to the charts since RTL support in charts is not working at all.All I want now is to have my layout render properly within the RTL site (RTL html body). 

     RadHtmlChart example:

    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body dir="rtl">
        <form id="form1" runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
        <telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true" dir="ltr">
        <PlotArea >
            <Series>
                <telerik:LineSeries Name="" MissingValues="Interpolate">
                    <Appearance>
                        <FillStyle BackgroundColor="Blue" />
                    </Appearance>
                    <LabelsAppearance DataFormatString="{0}%" Position="Above" />
                    <MarkersAppearance MarkersType="Square" BackgroundColor="Blue" />
                    <Items>
                        <telerik:SeriesItem YValue="15" />
                        <telerik:SeriesItem YValue="23" />
                        <telerik:SeriesItem />
                        <telerik:SeriesItem YValue="71" />
                        <telerik:SeriesItem YValue="93" />
                        <telerik:SeriesItem YValue="43" />
                        <telerik:SeriesItem YValue="23" />
                    </Items>
                </telerik:LineSeries>
                <telerik:LineSeries Name="" MissingValues="Gap">
                    <Appearance>
                        <FillStyle BackgroundColor="Red" />
                    </Appearance>
                    <LabelsAppearance DataFormatString="{0}%" Position="Above" />
                    <MarkersAppearance MarkersType="Square" BackgroundColor="Red" />
                    <Items>
                        <telerik:SeriesItem YValue="35" />
                        <telerik:SeriesItem YValue="42" />
                        <telerik:SeriesItem YValue="18" />
                        <telerik:SeriesItem YValue="39" />
                        <telerik:SeriesItem YValue="64" />
                        <telerik:SeriesItem YValue="10" />
                        <telerik:SeriesItem YValue="6" />
                    </Items>
                </telerik:LineSeries>
            </Series>
            <XAxis MajorTickType="Outside" MinorTickType="Outside">
                <Items>
                    <telerik:AxisItem LabelText="Monday" />
                    <telerik:AxisItem LabelText="Tuesday" />
                    <telerik:AxisItem LabelText="Wednesday" />
                    <telerik:AxisItem LabelText="Thursday" />
                    <telerik:AxisItem LabelText="Friday" />
                    <telerik:AxisItem LabelText="Saturday" />
                    <telerik:AxisItem LabelText="Sunday" />
                </Items>
                <MajorGridLines Color="#EFEFEF" Width="1" />
                <MinorGridLines Color="#F7F7F7" Width="1" />
                <TitleAppearance Position="Center" RotationAngle="0" Text="Days" />
            </XAxis>
            <YAxis MajorTickSize="1" MajorTickType="Outside" MaxValue="100" MinorTickSize="1"
                MinorTickType="Outside" MinValue="0">
                <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" />
                <MajorGridLines Color="#EFEFEF" Width="1" />
                <MinorGridLines Color="#F7F7F7" Width="1" />
                <TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load" />
            </YAxis>
        </PlotArea>
        <ChartTitle Text="Server CPU Load By Days">
        </ChartTitle>
        <Legend>
            <Appearance Position="Bottom" />
        </Legend>
    </telerik:RadHtmlChart>
     
     
        </div>
        </form>
    </body>
    </html>

    Kendou UI chart example:

    <!DOCTYPE html>
     
    <head runat="server" id="PageHead">
        <title></title>  
          
        <link href='<%#ResolveUrl("~/styles/kendo.common.min.css")%>' rel="stylesheet" type="text/css" />
        <link href='<%#ResolveUrl("~/styles/kendo.default.min.css")%>' rel="stylesheet" type="text/css" />
        <script lang="javascript" src='<%#ResolveUrl("~/js/jquery.min.js")%>' type="text/javascript"></script>
        <script lang="javascript" src='<%#ResolveUrl("~/js/kendo.web.min.js")%>' type="text/javascript"></script>
        <link href='<%#ResolveUrl("~/styles/kendo.dataviz.min.css")%>' rel="stylesheet" type="text/css" />
        <link href='<%#ResolveUrl("~/styles/kendo.rtl.min.css")%>' rel="stylesheet" type="text/css" />
        <script lang="javascript" src='<%#ResolveUrl("~/js/kendo.dataviz.min.js")%>' type="text/javascript"></script>
        <script lang="javascript" src='<%#ResolveUrl("~/js/cultures/kendo.culture.ar-AE.min.js")%>' type="text/javascript"></script>
        
    </head>
    <body dir="rtl" >
     
        <form id="form1" runat="server" >
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                </Scripts>
     
            </telerik:RadScriptManager>
            
            <div class="LineChart-wrapper" >
                <div>
                    <div id="LineChart" style="" dir="ltr" ></div>
                    <input id="LineChart-Series0" value="Violations" type="hidden">
                    <input id="LineChart-values0" value="15,20,35" type="hidden">
                    <input id="LineChart-Categories" value="Jul,Aug,Setp" type="hidden">
                </div>
                
                <style scoped="">
                    .LineChart-wrapper {
                        margin: 0 0 0 0px;
                        padding: 0px;
                    }
     
                        .LineChart-wrapper .k-chart {
                            height: 199px;
                            padding: 0px;
                            margin: 0 0 0 0px;
                            width: 222px;
                        }
                </style>
            </div>
            <script>
                function createLineChart() {
                    //alert($("#LineChart"));
                    $("#LineChart").kendoChart({
                        theme: $(document).data("kendoSkin") || "default",
                        title: {
                            text: ""
                        },
                        legend: {
                            position: "bottom"
                        },
                        chartArea: {
                            background: ""
     
                        },
                        seriesDefaults: {
                            type: "line",
                            labels: {
                                visible: true,
                                position: "center",
                                font: "8px Arial,Helvetica,sans-serif",
                                format: "{0}"
                            }
                        },
                        series: [{
                            name: $("#LineChart-Series0").val(), data: $("#LineChart-values0").val().split(",")
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}"
                            }
     
     
     
     
                        },
                        categoryAxis: {
                            categories: $("#LineChart-Categories").val().split(","),
                            labels: { rotation: 90 },
                            minorGridLines: {
                                visible: true
                            }
                        },
                        tooltip: {
                            visible: true,
                            format: "{0}"
                        }
                    });
                }
                $(document).ready(function () {
                    //alert('line chart ready');
                    setTimeout(function () {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createLineChart();
     
                        $("#LineChartexample").bind("kendo:skinChange", function (e) {
                            createLineChart();
                        });
                    }, 300);
     
                    
                });
            </script>
            
        </form>
     
     
    </body>


    Thanks

    Madani
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3595 posts

    Posted 03 Sep 2013 Link to this post

    Hi Madani,

    Thank you for your report. I am logging this for research and fixing. You can follow the issue's progress here. I have also updated your Telerik points for your report.


    Regards,
    Marin Bratanov
    Telerik
    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 the blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ashraf Sabry
    Ashraf Sabry avatar
    88 posts
    Member since:
    Jan 2011

    Posted 04 Jun 2015 Link to this post

    I used the fix described here:

    http://feedback.telerik.com/Project/108/Feedback/Details/159610-add-right-to-left-support-for-radhtmlchart

     And it worked well

Back to Top