anas rachmadi anas rachmadi - 2 months ago 39
AngularJS Question

Error: Highcharts error #13 ionic angular

i am new to HighCharts and want to use it to ionic. but i have a trouble and trying to determine what is wrong with my code. on console its showing some error message like this

i have read question about it
Highcharts error #13 and AngularJs
How can I fix Highcharts error #13?
but still cannot found my problem
this is my controller

.controller("homeController", function ($scope, $http) {
$scope.myDropDown = 'one';
$scope.data = {};
$scope.submit = function () {
var diagramlink = 'http://fendypradana.com/alfalahkeu/Apifalah/laporhari/format/json';

var processed_json = [], kategori = [];
$http.post(diagramlink, { tanggalawal: $scope.data.tglawal, tanggalakhir: $scope.data.tglakhir }).then(function (res) {

console.log(res.data);
console.log(res.data.data[2].tanggal);

for (i = 0; i < res.data.data.length; i++) {
var dataint = parseInt(res.data.data[i].total)
processed_json.push(dataint);
kategori.push(res.data.data[i].tanggal);

}
console.log(processed_json)

Highcharts.chart('containerhome', {
title: {
text: 'Diagram Pembayaran'
},

xAxis: {
title: {
text: 'coba1'
},
categories: kategori
},

tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
'Total Pembayaran: Rp.' + Highcharts.numberFormat(this.y, 1);
}
},
chart: {
type: 'column'
},

plotOptions: {

},

series: [
{
name: 'coba',
data: processed_json,

dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}

]
});
})
}
})


and this is my html

<div ng-app ng-controller="homeController">
<select ng-model="myDropDown">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<form ng-submit="submit()" ng-show="myDropDown == 'two'">
<label class="item item-input item-stacked-label">
<span class="input-label">Pilih Bulan Awal</span>
<input type="date" ng-model="data.tglawal">
</label>
<label class="item item-input item-stacked-label">
<span class="input-label">Pilih Bulan akhir</span>
<input type="date" ng-model="data.tglakhir">
</label>
<input class="button button-block button-positive" type="submit" name="submit" value="Submit to server">
<div class="card" style="width:95%; ng-controller=" homeController ">
<div id="containerhome ">Placeholder for chart</div>
</div>
</form>


Any suggestions would really help.

Answer

I went through your code, the problem is you are using highcharts-ng and using jquery way to bind the data,

Do this, inside the controller, define a config

 $scope.highchartsNG = {
        options: {
            chart: {
                type: 'bar'
            }
        },
        series: [{
            data: assign your data
        }],
        title: {
            text: 'Hello'
        },
        loading: false
    }

HTML:

 <highchart id="chart1" config="highchartsNG"></highchart>