Charts is not shown on JSP Page..Empty div is shown.why????
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@page isELIgnored="false"%>
<!DOCTYPE html>
<html>
<head>
<link href="resources/styles/kendo.default-main.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/kendo.common-min.css" rel="stylesheet" type="text/css" />
<link href="resources/styles/bootstrap-main.css" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery.min.js"></script>
<script src="resources/js/kendo.web.min.js"></script>
<meta charset="ISO-8859-1">
<title>Kando Charts Example</title>
</head>
<body>
<h2>Charts</h2>
<div id="chart">hello</div>
<script>
$("#chart").kendoChart({
title: {
text: "Gross domestic product growth /GDP annual %/"
},
legend: {
position: "top"
},
series: [{
name: "India",
type: "column",
data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855],
color: "red"
},{
name: "Germany",
type: "column",
data: [1.010, 1.375, 1.161, 1.684, 3.7, 3.269, 1.083, 5.127, 3.690, 2.995],
color: "blue"
},{
name: "World",
type: "line",
data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, 2.245, 4.339, 2.727],
color: "green"
}],
categoryAxis: {
categories: [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011]
},
valueAxis: {
labels: {
format: "{0}%"
}
},
tooltip: {
visible: true,
template: "#= series.name #: #= value #%"
}
});
</script>
</body>
</html>3 Answers, 1 is accepted
Hi,
I inspected the Chart configuration you had provided and it seems correct. I am linking a Dojo example with your configuration, in which you can observe the expected results without any issues:
I would recommend checking if you had correctly referenced the Kendo scripts and styles and if they are loaded correctly in the Network tab of the Developer tools, as this might be the cause of the issue you are experiencing. You could also check if there are any errors in your browser's console.
I hope that the suggestions would be helpful.
Regards,
Zornitsa
Progress Telerik
Rank 1
Iron
Iron
Console show these Errors..
Failed to load resource: the server responded with a status of 404 ()
jquery.min.js:1
Failed to load resource: the server responded with a status of 404 ()
kendo.all.min.js:1
Failed to load resource: the server responded with a status of 404 ()
kendo.default-main.css:1
Failed to load resource: the server responded with a status of 404 ()
charts:29 Uncaught TypeError: $(...).kendoChart is not a function
at charts:29:19
kendo.common-min.css:1
Failed to load resource: the server responded with a status of 404 ()
kendo.default-main.css:1
Failed to load resource: the server responded with a status of 404 ()
Rank 1
Iron
Iron
Hello,
Based on the provided information, I cannot be sure what could be the exact cause of the issue you are experiencing. However, I will propose a few suggestions about some possible causes that could produce these errors.
Firstly, I would recommend you to check whether all paths for the included files are accurate, because this type of errors could indicate that the files are not referenced correctly.
In addition, since in your first code snippet I noticed that you are including the kendo.web.min.js script, I would like to inform you that the Chart component is not included in this script. Instead, you could use the kendo.all.min.js script, which contains all features provided by Kendo UI.
What I would also suggest is to try using the Kendo CDN service for referencing the respective files as an alternative for hosting them locally. Below I am linking an article from our documentation, in which you can get a better idea on how to use CDN:
Moreover, please note that in the 2023 and later Kendo versions, the kendo.default-main.css and kendo.common-min.css files should not be included because of the Less to Sass theme migration. Therefore, only a single CSS file should be used to add the reference to a desired Sass theme.
Please try to apply the proposed suggestions and let me know if that resolves your issue.
Regards,
Zornitsa
Progress Telerik