BellaDati charts.js library allows you to render BellaDati JSON charts data directly on web page. This web page can be rendered in your Java application.

You can find this example on GitHub https://github.com/BellaDati/belladati-charts-java-demo

Prerequisites 

During this tutorial you will need following:

Step-by-step

  1. Create new Java project in your IDE and setup build configuration to use JDK 8.

  2. Create HTML file (e.g. index.html) in src/main/resources. This HTML page will be rendered in Java application. Example:

    <!DOCTYPE html>
<html>
<head>
    <title>BellaDati Charts SDK Example</title>
</head>
<body>
    No content yet.
</body>
</html>

  3. Download 3 required JavaScript libraries to src/main/resources (to the same folder where index.html is located). Add relative links to these libraries in HTML head:

    <head>
...
   <script src="jquery-1.7.1.js"></script>
   <script src="raphael-min.js"></script>
   <script src="belladati-charts-min.js"></script>
...
<head>

  4. Define the container in HTML body, where the chart should be rendered:

    <body>
...
   Sample Chart
   <div id="chart" style="width: 500px; height: 400px; border: 1px solid silver"></div>
...
</body>

  5. Create class used as main UI window. You can use Swing for basic UI components and JavaFX WebEngine to render HTML code:

    package com.belladati.charts.example;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javafx.application.Platform;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.embed.swing.JFXPanel;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.scene.Scene;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import org.w3c.dom.Document;

public class MainWindow extends JFrame {

    private WebEngine webEngine;

    public MainWindow() throws InterruptedException {
        System.out.println("Initializing main window...");
        setTitle("BellaDati Charts SDK Example");
        setSize(750, 600);
        setLocationRelativeTo(null);
        setDefaultCloseOperation(EXIT_ON_CLOSE);

        JPanel content = new JPanel();
        this.add(content);
        content.setLayout(null);
        content.add(createQuitButton());
        content.add(createWebPanel());

        while (webEngine == null) {
            System.out.println("Waiting to initialize JavaFX WebEngine...");
            Thread.sleep(1000);
        }
    }

    public void loadUrl(final String url) {
        System.out.println("Loading URL: " + url + "\n");
        Platform.runLater(() -> {
            webEngine.load(url);
        });
    }

    public void loadJavaScript(final String javascript) {
        System.out.println("Executing JavaScript: " + javascript + "\n");
        webEngine.documentProperty().addListener(new ChangeListener<Document>() {
            @Override
            public void changed(ObservableValue<? extends Document> observableValue, Document document, Document newDoc) {
                if (newDoc != null) {
                    webEngine.documentProperty().removeListener(this);
                    webEngine.executeScript(javascript);
                }
            }
        });
    }

    private JFXPanel createWebPanel() {
        JFXPanel htmlPanel = new JFXPanel();
        htmlPanel.setBounds(10, 10, 600, 550);
        Platform.setImplicitExit(false);
        Platform.runLater(() -> {
            WebView webView = new WebView();
            webEngine = webView.getEngine();
            webEngine.setJavaScriptEnabled(true);
            htmlPanel.setScene(new Scene(webView));
        });
        return htmlPanel;
    }

    private JButton createQuitButton() {
        // create and return button used to quit
    }

}

  6. Create main class to run standalone Java application. Create MainWindow, load URL with index.html and render the chart by executing JavaScript Charts.createAndRender("container_id", "json_chart_data"):

    package com.belladati.charts.example;

public class Main {

    private static final String HTML_INDEX = "/com/belladati/charts/example/index.html";

    public static void main(String[] args) throws Exception {
        MainWindow window = new MainWindow();
        window.setVisible(true);
        window.loadUrl("file://" + Main.class.getResource(HTML_INDEX).getPath());
        window.loadJavaScript("Charts.createAndRender(\"chart\", json_chart_data);");
    }

}

  7. Run it


     


     

Example

You can download standalone application as JAR file and run it:

java -jar belladati-charts-java-demo.jar

 

If charts are not rendered in application and there is an error message "Exception in thread "JavaFX Application Thread" netscape.javascript.JSException: ReferenceError: Can't find variable: Charts" in console, you are using JDK with bug JDK-8136466. You have to use JDK 8u72 (or newer).
  • No labels