There is a vendor example for charting data from JSON or XML: fusion charts
I'm a total beginner and can not make that works properly, so having 2 questions:
Cheers.
btw - datas:
--- CSV ---
Polska, Saudi, Kanada, Iran, Russia, UAE, US, China
290, 260, 180, 140, 115, 100, 30, 30
--- cat remote.json ---
{
// Chart Configuration
"chart": {
"caption": "Wykres danych z pliku JSON",
"subCaption": "In MMbbl = One Million barrels",
"xAxisName": "Country",
"yAxisName": "Reserves (MMbbl)",
"numberSuffix": "K",
"theme": "fusion",
},
// Chart Data
"data": [{
"label": "Polska",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Kanada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "30"
}, {
"label": "China",
"value": "30"
}]
}
ok, I got working example by this workaround, but it's NOT the method that was proposed by the vendor/authors of tutorial, so despite the following the question still remains, how to run the exact tutorial approach and also how to draw it from CSV
working IDEA:
with JSON
{
"chart": {
"caption": "Wykres danych z pliku JSON",
"subCaption": "Jakiś bardzo szczegółowy opis tych danych...",
"xAxisName": "Kraj",
"yAxisName": "Mierzona wartość z pliku JSON",
"numberSuffix": "K",
"theme": "fusion"
},
"data": [{
"label": "Polska",
"value": "290"
}, {
"label": "Saudi",
"value": "260"
}, {
"label": "Kanada",
"value": "180"
}, {
"label": "Iran",
"value": "140"
}, {
"label": "Russia",
"value": "115"
}, {
"label": "UAE",
"value": "100"
}, {
"label": "US",
"value": "130"
}, {
"label": "China",
"value": "80"
}]
}
and HTML
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Przykład wykresu dla mnie</title>
<!-- Include fusioncharts core library -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<!-- Include fusion theme -->
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
// TO JEST PIERWSZY WYKRES i ŁADOWANIE DANYCH z INNEGO pliku JSON:
const chartConfig = {
type: 'column3d',
renderAt: 'chart-container',
width: '80%',
height: '450',
dataFormat: 'jsonurl',
dataSource: 'wykresy4remote.json'
};
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts(chartConfig);
fusioncharts.render();
});
</script>
</head>
<body>
<center>
<div id="chart-container">FusionCharts XT will load here!</div>
</center>
</body>
</html>
Please advise, how to do it better and also with CSV. Thx.