<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> window.onload = function() { var dataPoints = []; var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "Top 7 Wordpress Plugins 2017" }, subtitles:[{ text: "Alexa Top 1M Sites" }], data: [{ type: "column", indexLabel: "{y}", indexLabelPlacement: "inside", dataPoints: dataPoints }] }); $.get("https://canvasjs.com/data/gallery/jsp/top-7-wordpress-plugins.xml", function (data) { $(data).find("point").each(function () { var $dataPoint = jQuery(this); var label = $dataPoint.find("label").text(); var y = $dataPoint.find("y").text(); dataPoints.push({ label: label, y: parseFloat(y) }); }); chart.render(); }); } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> </body> </html>