Page History

Sv translation

language	en

BellaDati charts.js library allows you to render BellaDati JSON charts data directly on your web page.

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

Prerequisites

BellaDati-charts.js requires following javascript libraries:

Step-by-step

Link required libraries in your page

Code Block

theme	Eclipse
language	xml

<head>
...
   <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
   <script src="http://rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
   <script src="http://rawgit.com/BellaDati/belladati-charts/master/belladati-charts-min.js"></script>
...
<head>

Get or define the charts data in JSON format
Define the container, where the chart should be rendered
Code Block
theme Eclipse
language xml
<div id="chart" style="width: 500px; height: 400px; border: 1px solid silver"></div>

Render the chart by executing Charts.createAndRender("container_id", "json_chart_data");

Code Block

theme	Eclipse
language	js

var $container = $("#chart");
var chart = Charts.createAndRender("chart", getChartData());
chart.resize($container.width(), $container.height());

Example

And here it is all-together. Click to download a sample HTML file.

Code Block

theme	Eclipse
language	xml
collapse	true

<html>
    <head>
        <title>BellaDati charts.js test page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
        <script src="http://rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
        <script src="http://rawgit.com/BellaDati/belladati-charts/master/belladati-charts-min.js"></script>
    <head>
 
    <body>
      Test chart
      <div id="chart" style="width: 500px; height: 400px; border: 1px solid silver">
      </div>
               
      <script>
        Charts.options.onClick = function(e, param) {
          if(typeof(param.link) === "string") {
            alert("Link: " + param.link);
          } else {
            alert("Click: " + param);
          }
        };
            
        var $container = $("#chart");
        var chart = Charts.createAndRender("chart", getChartData());
        chart.resize($container.width(), $container.height());
        
        function getChartData() {
         return {
          "y_axis": {
            "colour": "#e9e9e9",
            "min": 0,
            "grid-colour": "#e9e9e9",
            "max": 70000,
            "steps": 10000,
            "labels": {
                "colour": "#4e4e4e",
                "labels": [
                    {
                        "y": 0,
                        "text": "0 USD"
                    },
                    {
                        "y": 10000,
                        "text": "10,000 USD"
                    },
                    {
                        "y": 20000,
                        "text": "20,000 USD"
                    },
                    {
                        "y": 30000,
                        "text": "30,000 USD"
                    },
                    {
                        "y": 40000,
                        "text": "40,000 USD"
                    },
                    {
                        "y": 50000,
                        "text": "50,000 USD"
                    },
                    {
                        "y": 60000,
                        "text": "60,000 USD"
                    },
                    {
                        "y": 70000,
                        "text": "70,000 USD"
                    }
                ]
            }
        },
        "is_thousand_separator_disabled": 1,
        "chartId": "chart_36-wl5mfR7M70",
        "x_axis": {
            "colour": "#e9e9e9",
            "grid-colour": "#e9e9e9",
            "steps": 0,
            "labels": {
                "colour": "#4e4e4e",
                "labels": [
                    "Austria",
                    "Canada",
                    "France",
                    "Germany"
                ]
            }
        },
        "is_decimal_separator_comma": 1,
        "elements": [
            {
                "colour": "#4379bd",
                "values": [
                    {
                        "top": 44483.123456789,
                        "context": "{\"dataLink\":\"36_-1845648110\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}",
                        "tip": "Austria (Revenue)\n44,483 USD",
                        "label": "44,483"
                    },
                    {
                        "top": 47368,
                        "context": "{\"dataLink\":\"36_-1102934442\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}",
                        "tip": "Canada (Revenue)\n47,368 USD",
                        "label": "47,368"
                    },
                    {
                        "top": 54665,
                        "context": "{\"dataLink\":\"36_1318537718\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}",
                        "tip": "France (Revenue)\n54,665 USD",
                        "label": "54,665"
                    },
                    {
                        "top": 64378.34,
                        "context": "{\"dataLink\":\"36_398343378\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}",
                        "tip": "Germany (Revenue)\n64,378 USD",
                        "label": "64,378"
                    }
                ],
                "text": "Revenue",
                "type": "bar"
            },
            {
                "colour": "#b5cb04",
                "values": [
                    {
                        "top": 38361,
                        "context": "{\"dataLink\":\"36_531280046\",\"identifierQuery\":\"[L_COUNTRY={Austria}]\"}",
                        "tip": "Austria (Investments)\n38,361 USD",
                        "label": "38,361"
                    },
                    {
                        "top": 54940,
                        "context": "{\"dataLink\":\"36_1273993714\",\"identifierQuery\":\"[L_COUNTRY={Canada}]\"}",
                        "tip": "Canada (Investments)\n54,940 USD",
                        "label": "54,940"
                    },
                    {
                        "top": 47921,
                        "context": "{\"dataLink\":\"36_-599501422\",\"identifierQuery\":\"[L_COUNTRY={France}]\"}",
                        "tip": "France (Investments)\n47,921 USD",
                        "label": "47,921"
                    },
                    {
                        "top": 58817,
                        "context": "{\"dataLink\":\"36_-1519695762\",\"identifierQuery\":\"[L_COUNTRY={Germany}]\"}",
                        "tip": "Germany (Investments)\n58,817 USD",
                        "label": "58,817"
                    }
                ],
                "text": "Investments",
                "type": "bar"
            }
        ],
        "tooltip": {
            "mouse": "2",
            "colour": "#ffffff",
            "shadow": true,
            "background": "#ffffff",
            "stroke": 1
        },
        "options": {}
      };
    }
      </script>
    </body>
</html>

Sv translation

language	ja

BellaDati charts.jsライブラリは、あなたのWebページ上で直接BellaDati JSONチャートデータをレンダリングできます。

Tip
あなたはGitHubの上でこの例https://github.com/BellaDati/belladati-charts/tree/master/exampleを見つけることができます。

前提条件

BellaDati-charts.jsは以下のjavascriptのライブラリを要求します。

ステップバイステップ

ページ内のライブラリを要求したリンク

Code Block

theme	Eclipse
language	xml

<head>
...
   <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
   <script src="http://rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
   <script src="http://rawgit.com/BellaDati/belladati-charts/master/belladati-charts-min.js"></script>
...
<head>

JSON形式でチャートデータを定義または取得すること
チャートがレンダリングされるコンテナを定義すること
Code Block
theme Eclipse
language xml
<div id="chart" style="width: 500px; height: 400px; border: 1px solid silver"></div>
Charts.createAndRender("container_id", "json_chart_data")を実行することで、チャートをレンダリングします。
Code Block
theme Eclipse
language js
var $container = $("#chart"); var chart = Charts.createAndRender("chart", getChartData()); chart.resize($container.width(), $container.height());

例えば

ここですべて一緒です。クリックしてサンプルHTMLファイルをダウンロードする。

Code Block

theme	Eclipse
language	xml
collapse	true

<html>
    <head>
        <title>BellaDati charts.js test page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script src="http://code.jquery.com/jquery-1.7.1.js"></script>
        <script src="http://rawgit.com/DmitryBaranovskiy/raphael/v2.1.4/raphael-min.js"></script>
        <script src="http://rawgit.com/BellaDati/belladati-charts/master/belladati-charts-min.js"></script>
    <head>
 
    <body>
      Test chart
      <div id="chart" style="width: 500px; height: 400px; border: 1px solid silver">
      </div>
 
	  <script>
        var $container = $("#chart");
        var chart = Charts.createAndRender("chart", getChartData());
        chart.resize($container.width(), $container.height());
 
        function getChartData() {
          return {
            "x_axis": {
              "colour": "#86bbca",
              "grid-colour": "#c1d8df",
              "steps": 0,
              "labels": {
                "colour": "#484848",
                "labels": [
                  "I / 2011",
                  "II / 2011",
                  "III / 2011"
                ]
              }
            },
            "y_axis": {
              "colour": "#86bbca",
              "grid-colour": "#c1d8df",
              "steps": 25,
              "min": 0,
              "max": 100,
              "labels": {
                "colour": "#484848",
                "labels": [
                  {
                    "text": "0",
                    "y": 0
                  },
                  {
                    "text": "25",
                    "y": 25
                  },
                  {
                    "text": "50",
                    "y": 50
                  },
                  {
                    "text": "75",
                    "y": 75
                  },
                  {
                    "text": "100",
                    "y": 100
                  }
                ]
              }
            },
            "bg_colour": "#ffffff",
            "is_decimal_separator_comma": 1,
            "is_thousand_separator_disabled": 1,
            "chartId": "chart_1964",
            "elements": [
              {
                "type": "bar_glass",
                "text": "ga:newVisits (avg)",
                "values": [
                  {
                    "top": "11.5",
                    "tip": "I / 2011 (ga:newVisits (avg))<br>11,5",
                    "label": "11,5",
                  },
                  {
                    "top": "16.032967032967033",
                    "tip": "II / 2011 (ga:newVisits (avg))<br>16,03297",
                    "label": "16,03297",
                  },
                  {
                    "top": "16.75",
                    "tip": "III / 2011 (ga:newVisits (avg))<br>16,75",
                    "label": "16,75",
                  }
                ],
                "colour": "#19527d"
              },
              {
                "type": "bar_glass",
                "text": "ga:newVisits (max)",
                "values": [
                  {
                    "top": "32",
                    "tip": "I / 2011 (ga:newVisits (max))<br>32",
                    "label": "32",
                  },
                  {
                    "top": "57",
                    "tip": "II / 2011 (ga:newVisits (max))<br>57",
                    "label": "57",
                  },
                  {
                    "top": "82",
                    "tip": "III / 2011 (ga:newVisits (max))<br>82",
                    "label": "82",
                  }
                ],
                "colour": "#f4b800"
              }
            ],
            "tooltip": {
              "mouse": "2",
              "shadow": true,
              "stroke": 1,
              "colour": "#484848",
              "background": "#ffffff"
            },
            "options": {}
          };
        }
      </script>
	</body>
</html>

Page tree

Versions Compared

Old Version 41

New Version Current

Key

Prerequisites

Step-by-step

Example

前提条件

ステップバイステップ

例えば