Seeking assistance as a beginner in building Basic Bar inverted axes using json data. I am trying to achieve a chart similar to Bar Inverted Axes, but encountering issues with the chart not displaying properly. Utilizing Angular to develop the web application, here is my controller:
.controller("JsonCtrl", function ($scope, $http,$location, chartBar) {
$scope.data1 = {};
$http.get('data/set.json')
.success(function (data1) {
var axis1 = [],seriesa = [],seriesb = [], seriesc = [], seriesd = [], seriese = [] ;
data1.forEach(function(row) {
axis1.push(row.data1);
seriesa.push(row.data2);
seriesb.push(row.data3);
seriesc.push(row.data4);
seriesd.push(row.data5);
seriese.push(row.data6);
});
$scope.data1.a=axis1;
$scope.data1.b=seriesa;
$scope.data1.c=seriesb;
$scope.data1.d=seriesc;
$scope.data1.e=seriesd;
$scope.data1.f=seriese;
/**/
console.log($scope.data1);
var c = chartBar('mainb',$scope.data1);
//windows responsive
window.onresize=function ()
{
c.resize()
}
//
})
.error(function (error) {
$scope.data.error = error;
});
})The JSON data used for this operation includes:
{
"data1": ["Smtra", "Jawa", "Klmtn", "Sulwsi", "Maluku"],
"data2": [149739, 244347, 54462, 59869, 6713],
"data3": [150089, 223519, 49523, 58881, 6152],
"data4": [141625, 200745, 46966, 54637, 6733],
"data5": [120428, 173979, 42208, 45067, 6034],
"data6": [114254, 164168, 39415, 38750, 5301]
}Furthermore, there is a factory designed to facilitate chart creation:
.factory('chartBar',function(echartTheme){
return function(element, data1){
var echartBar = echarts.init(document.getElementById(element), echartTheme);
echartBar.setOption({
title: {
text: 'Bar Graph',
subtext: 'Bar'
},
tooltip: {
trigger: 'axis'
},
legend: {
x: 100,
data: ['2010', '2011', '2012', '2013', '2014']
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
calculable: true,
xAxis: [{
type: 'value',
boundaryGap: [0, 0.01]
}],
yAxis: [{
type: 'category',
data: data1.a
}],
series: [{
name: '2010',
type: 'bar',
data: data1.b
}, {
name: '2011',
type: 'bar',
data: data1.c
}, {
name: '2012',
type: 'bar',
data: data1.d
}, {
name: '2013',
type: 'bar',
data: data1.e
}, {
name: '2014',
type: 'bar',
data: data1.f
}]
});
}
})Your help would be greatly appreciated :)