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

Chart is causing page layout problem in RTL site

2 Answers 223 Views

Chart (HTML5)

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

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

Chart is causing page layout problem in RTL site

2 Answers, 1 is accepted