Jetty is an HTTP based web server, which can be used to communicate between machines in large software frameworks. Jetty is an open source server under Apache/Eclipse license. An easy to use server which can be easily embedded in devices, tools, frameworks and application servers.
This tutorial showcases how you can render charts using FusionCharts and Jetty Server.
Table of Contents
To start rendering charts using Jetty server, you need to make sure that you have the following components downloaded on your local machine:
To start your jetty server, install it from the terminal using the following command:
java -jar start.jar
Note:
Follow the steps given below to create and configure the jetty server:
To create charts using Fusioncharts in jetty server, include JSP wrapper into the source package. Once done add the following line of codes in your index.jsp page:
Note: Don’t forget to include the fusioncharts library files to your working folder.
< %--
Document : fusioncharts jsp file
Author : fusioncharts
--%>
< %@page contentType="text/html" pageEncoding="UTF-8"%>
< !DOCTYPE html>
<html>
<head>
<title>Loading Data from a Static JSON String - fusioncharts.com</title>
<!-- Step 1: Include the `fusioncharts.js` file. This file is needed to
render the chart. Ensure that the path to this JS file is correct.
Otherwise, it may lead to JavaScript errors.
-->
<script src="fusioncharts.js"></script>
<script src="fusioncharts.theme.fint.js"></script>
</head>
<body>
<div id="chart"></div>
<!-- Step 2: Include the `FusionCharts.java` file as a package in your
project.
-->
< %@page import="fusioncharts.FusionCharts" %>
<!-- Step 3:Include the package in the file where you want to show
FusionCharts as follows.
Step 4: Create a chart object using the FusionCharts JAVA class
constructor. Syntax for the constructor:
`FusionCharts("type of chart", "unique chart id", "width of chart",
"height of chart", "div id to render the chart",
"data format", "data source")`
-->
< %
FusionCharts column2dChart = new FusionCharts(
"Column2D",// chartType
"myFirstChart",// chartId
"600","400",// chartWidth, chartHeight
"chart",// chartContainer
"json",// dataFormat
"{\"chart\": {\"caption\": \"Harry\'s SuperMart - Top 5 Stores' Revenue\", \"subCaption\": \"Last Year\", \"numberPrefix\": \"$\", \"rotatevalues\": \"0\", \"plotToolText\": \"<div><b>$label</b><br />Sales : <b>$$value</b>\", \"theme\": \"fint\"}, \"data\": [{\"label\": \"Bakersfield Central\", \"value\": \"880000\"}, {\"label\": \"Garden Groove harbour\", \"value\": \"730000\"}, {\"label\": \"Los Angeles Topanga\", \"value\": \"590000\"}, {\"label\": \"Compton-Rancho Dom\", \"value\": \"520000\"}, {\"label\": \"Daly City Serramonte\", \"value\": \"330000\"}] }"
);
%>
<!-- Step 5: Render the chart -->
< %=column2dChart.render()%>
</body>
</html> Now, you are ready to render FusionCharts using jetty server. Press CTRL + f5 to run and check the output of the chart as shown in image below:
If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.
In case something went wrong and you are unable to see the chart, check for the following:
You can build complex web applications easily with Angular. But it’s a challenge to present…
JavaScript charts help transform raw data into clear, interactive visualizations that users can easily understand.…
Modern web applications depend on data visualization to transform complex information into clear, actionable insights.…
Data is a big part of modern software. Companies use charts to track sales, monitor…
Every day, businesses get more data than ever before. Looking at endless rows and columns…
Building interactive React charts from scratch can quickly become complicated. It becomes even more challenging…
View Comments
Hello, all is going nicely here and ofcourse every one is sharing data, that's genuinely excellent, keep up writing.