Page History

Sv translation

language	en

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.

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

Prerequisites

During this tutorial you will need following:

JDK 8u72+
IDE to implement Java standalone application (e.g. Eclipse IDE)
jquery 1.7.1+
raphael.js 2.1.1+
belladati-charts.js

Step-by-step

Create new Java project in your IDE and setup build configuration to use JDK 8.
Create HTML file (e.g. index.html) in src/main/resources. This HTML page will be rendered in Java application. Example:
Code Block
theme Eclipse
language xml
<!DOCTYPE html> <html> <head> <title>BellaDati Charts SDK Example</title> </head> <body> No content yet. </body> </html>
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:
Code Block
theme Eclipse
language xml
<head> ... <script src="jquery-1.7.1.js"></script> <script src="raphael-min.js"></script> <script src="belladati-charts-min.js"></script> ... <head>

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

Code Block

theme	Eclipse
language	xml

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

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

Code Block

theme	Eclipse
language	js
collapse	true

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
    }

}

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"):

Code Block

theme	Eclipse
language	js

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);");
    }

}

Run it

Example

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

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

Warning
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).

Sv translation

language	ja

BellaDati charts.jsライブラリを使用すると、Webページ上で直接BellaDati JSONチャートデータをレンダリングできます。このウェブページは、Javaアプリケーションでレンダリングできます。

Tip
GitHubの上でこの例https://github.com/BellaDati/belladati-charts-java-demoを見つけることができます。

前提条件

このチュートリアルでは、次のものが必要です。

JDK 8u72+
IDEは、Javaスタンドアロンアプリケーションを実装すること
jquery 1.7.1+
raphael.js 2.1.1+
belladati-charts.js

ステップバイステップ

IDEで新Javaプロジェクトを作成し、JDK 8を使用するようにビルド設定をセットアップします。
src/main/resourcesにHTMLファイル（index.htmlなど）を作成します。このHTMLページはJavaアプリケーションでレンダリングされます。
Code Block
theme Eclipse
language xml
<!DOCTYPE html> <html> <head> <title>BellaDati Charts SDK Example</title> </head> <body> No content yet. </body> </html>
src/main/resourcesに要求したの3つJavaScriptライブラリをダウンロードしてください。（index.htmlに配置されている同じフォルダに）。これらのHTML headでのライブラリに相対リンクを追加します。
Code Block
theme Eclipse
language xml
<head> ... <script src="jquery-1.7.1.js"></script> <script src="raphael-min.js"></script> <script src="belladati-charts-min.js"></script> ... <head>

チャートがレンダリングされるHTML本文にコンテナを定義します。

Code Block

theme	Eclipse
language	xml

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

メインUIウィンドウとして使用したクラスを作成します。HTMLコードをレンダリングするためJavaFX WebEngine、そして basic UI components のためのSwingを使用できます。

Code Block

theme	Eclipse
language	js
collapse	true

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
    }

}

スタンドアロンのJavaアプリケーションを実行するためメインクラスを作成します。メインウィンドウ作成し、index.htmlでURLをロードし、Charts.createAndRender("container_id", "json_chart_data")　JavaScript によってチャートをレンダーします。

Code Block

theme	Eclipse
language	js

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);");
    }

}

実行

例えば

JARファイルとしてスタンドアロンアプリケーションをダウンロードし、それを実行できます。

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

Warning

チャートがアプリケーションでレンダリングされていない及びコンソールで"Exception in thread "JavaFX Application Thread" netscape.javascript.JSException: ReferenceError: Can't find variable: Charts"メッセージがでる場合にその時あなたがJDK-8136466バグのJKDを利用しています。JDK 8u72（より新しい）を利用する必要があります。

Page tree

Versions Compared

Old Version 17

New Version Current

Key

Prerequisites

Step-by-step

Example

前提条件

ステップバイステップ

例えば