Hello. I'm Diego. I'm trying to add a chart example into a portlet. But, if i add more than one portlet, i only could see one chart. The other portlets are empty. Y change my jsp page (showing down) to rename the ids of the div chart in each portlet.
Thanks
kendoui.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="namespace"><portlet:namespace/></c:set>
<%
String height = (String)request.getAttribute("height");
String url = (String)request.getAttribute("url");
String divIdStr = "divKendouiPortlet_" + new java.util.Date().getTime();
%>
<html>
<head>
<title>Basic usage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link href="<%=request.getContextPath()%>/kendoui/shared/styles/examples-offline.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/kendoui/js/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/kendoui/js/kendo.dataviz.min.js"></script>
<script src="<%=request.getContextPath()%>/kendoui/shared/js/console.js"></script>
</head>
<body>
<div id="example<%=divIdStr %>" class="k-content">
<div class="chart-wrapper">
<div id="<%=divIdStr %>" style="background: center no-repeat url('<%=request.getContextPath()%>/kendoui/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#<%=divIdStr %>").kendoChart({
title: {
text: "Site Visitors Stats /thousands/ - <%=divIdStr %>"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
//alert("READY- <%=divIdStr %>");
createChart();
$("#example<%=divIdStr %>").bind("kendo:skinChange", function(e) {
createChart();
});
}, 400);
});
</script>
<style scoped>
.chart-wrapper, .chart-wrapper .k-chart {
height: 350px;
}
</style>
</div>
</body>
</html>
Thanks
kendoui.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="namespace"><portlet:namespace/></c:set>
<%
String height = (String)request.getAttribute("height");
String url = (String)request.getAttribute("url");
String divIdStr = "divKendouiPortlet_" + new java.util.Date().getTime();
%>
<html>
<head>
<title>Basic usage</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<link href="<%=request.getContextPath()%>/kendoui/shared/styles/examples-offline.css" rel="stylesheet">
<link href="<%=request.getContextPath()%>/kendoui/styles/kendo.dataviz.min.css" rel="stylesheet">
<script src="<%=request.getContextPath()%>/kendoui/js/jquery.min.js"></script>
<script src="<%=request.getContextPath()%>/kendoui/js/kendo.dataviz.min.js"></script>
<script src="<%=request.getContextPath()%>/kendoui/shared/js/console.js"></script>
</head>
<body>
<div id="example<%=divIdStr %>" class="k-content">
<div class="chart-wrapper">
<div id="<%=divIdStr %>" style="background: center no-repeat url('<%=request.getContextPath()%>/kendoui/shared/styles/world-map.png');"></div>
</div>
<script>
function createChart() {
$("#<%=divIdStr %>").kendoChart({
title: {
text: "Site Visitors Stats /thousands/ - <%=divIdStr %>"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
//alert("READY- <%=divIdStr %>");
createChart();
$("#example<%=divIdStr %>").bind("kendo:skinChange", function(e) {
createChart();
});
}, 400);
});
</script>
<style scoped>
.chart-wrapper, .chart-wrapper .k-chart {
height: 350px;
}
</style>
</div>
</body>
</html>
4 Answers, 1 is accepted
0
Hi,
Tsvetomir Tsonev
the Telerik team
My guess is that the jQuery and Kendo UI scripts are being included with each portlet. This can cause trouble.
I'm not sure if a portlet should contain a full HTML document.
Perhaps looking at the generated HTML can help?
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Diego
Top achievements
Rank 1
Rank 1
answered on 16 May 2013, 02:38 PM
Hi, thank you for your anwser.
Yes... i tried this but it's the same.
I added these lines in liferay-portlet.xml and removed in the css and js jsp.
It works when I add the portlets in liferay but to refresh the page, it only shows one.
I am attaching the generated liferay html with 2 portlets kendoui. It's not nice :-)
Thanks
Diego
Yes... i tried this but it's the same.
I added these lines in liferay-portlet.xml and removed in the css and js jsp.
It works when I add the portlets in liferay but to refresh the page, it only shows one.
I am attaching the generated liferay html with 2 portlets kendoui. It's not nice :-)
Thanks
Diego
0
Hi,
Tsvetomir Tsonev
the Telerik team
Thanks for the additional info. I think I see the problem.
The chart is created in a function called 'createChart' that gets overridden by the second portlet instance. When the timeout executes after 400 ms only the second chart is created. This matches your observations.
My suggestion is to use document.ready or get rid of the enclosing function altogether. The timeout and skinChange events are part of the online demos and required in normal use.
$(document).ready(function() {
$("#<%=divIdStr %>").kendoChart({
// ...
});
});
And that's it, not timeouts or event handlers.
I hope this helps.
Tsvetomir Tsonev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Diego
Top achievements
Rank 1
Rank 1
answered on 17 May 2013, 12:59 PM
Thanks!!!
That's work!!
But sometime have problems.
The best way is the next code:
function <portlet:namespace/>createChart() {
$("#<%=divIdStr %>").kendoChart({
title: {
text: "Site Visitors Stats /thousands/ - <%=divIdStr %>"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
<portlet:namespace/>createChart();
$("#example<%=divIdStr %>").bind("kendo:skinChange", function(e) {
<portlet:namespace/>createChart();
});
}, 400);
});
Thanks again!!
Diego
That's work!!
But sometime have problems.
The best way is the next code:
function <portlet:namespace/>createChart() {
$("#<%=divIdStr %>").kendoChart({
title: {
text: "Site Visitors Stats /thousands/ - <%=divIdStr %>"
},
legend: {
visible: false
},
seriesDefaults: {
type: "bar"
},
series: [{
name: "Total Visits",
data: [56000, 63000, 74000, 91000, 117000, 138000]
}, {
name: "Unique visitors",
data: [52000, 34000, 23000, 48000, 67000, 83000]
}],
valueAxis: {
max: 140000,
line: {
visible: false
},
minorGridLines: {
visible: true
}
},
categoryAxis: {
categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #"
}
});
}
$(document).ready(function() {
setTimeout(function() {
// Initialize the chart with a delay to make sure
// the initial animation is visible
<portlet:namespace/>createChart();
$("#example<%=divIdStr %>").bind("kendo:skinChange", function(e) {
<portlet:namespace/>createChart();
});
}, 400);
});
Thanks again!!
Diego