Kendo charts not shown not working in jsp page

3 Answers 54 Views
Charts
kha
Top achievements
Rank 1
Iron
kha asked on 14 Aug 2023, 12:29 PM

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

Sort by
0
Zornitsa
Telerik team
answered on 17 Aug 2023, 09:17 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
kha
Top achievements
Rank 1
Iron
commented on 19 Aug 2023, 05:57 AM | edited

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

 


0
kha
Top achievements
Rank 1
Iron
answered on 19 Aug 2023, 06:10 AM
Why these file are not Loaded.....I think i have no include these file in my projects...Can someone give me from where i can download these files so that i can include them in my projects
0
Zornitsa
Telerik team
answered on 23 Aug 2023, 01:45 PM

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

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources
Tags
Charts
Asked by
kha
Top achievements
Rank 1
Iron
Answers by
Zornitsa
Telerik team
kha
Top achievements
Rank 1
Iron
Share this question
or