BellaDati charts.js library allows you to render BellaDati JSON charts data directly on your web page.
Prerequisites
BellaDati-charts.js requires following javascript libraries:
Step-by-step
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>
- Get or define the charts data in JSON format
Define the container, where the chart should be rendered
<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");
var $container = $("#chart"); var chart = Charts.createAndRender("chart", chartData); chart.resize($container.width(), $container.height());
Example
And here it is all-together.
<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", chartData); 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>
Overview
Content Tools