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 |
BellaDati-charts.js requires following javascript libraries:
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> |
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", getChartData());
chart.resize($container.width(), $container.height()); |
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>
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> |