You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 37 Next »

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

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

  1. Link required libraries in your page

    <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>
  2. Get or define the charts data in JSON format

  3. Define the container, where the chart should be rendered

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

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

    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.

<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>
  • No labels