Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Chart is causing page layout problem in RTL site

2 Answers 154 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
HCT-CERT
Top achievements
Rank 1
HCT-CERT asked on 29 Aug 2013, 10:02 AM
RadHtmlChart.png
kendoui-chart.png
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 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 03 Sep 2013, 08:41 AM
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.
0
أشرف
Top achievements
Rank 1
answered on 04 Jun 2015, 04:36 PM

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

Tags
Chart (HTML5)
Asked by
HCT-CERT
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
أشرف
Top achievements
Rank 1
Share this question
or