Home » Javascript » Simple Javascript using laravel vue and highcharts issue

Simple Javascript using laravel vue and highcharts issue

Posted by: admin June 30, 2018 Leave a comment

Questions:

I don’t have much experience with javascript and trying to implement highcharts with Laravel 5.6 and vuejs2.

I have setup a default chart in a separate component and the parent component contains the computed data that is pushed to the child component (containing the chart)

By default, the parent component will have:

computed : {
            chartLabel() {
                return 'Source of Bookings Received'
            },
            initSeries : function() {
              return [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Chrome',
                        y: 61.41,
                        sliced: true,
                        selected: true
                    }, {
                        name: 'Internet Explorer',
                        y: 11.84
                    }, {
                        name: 'Firefox',
                        y: 10.85
                    }, {
                        name: 'Edge',
                        y: 4.67
                    }, {
                        name: 'Safari',
                        y: 4.18
                    }, {
                        name: 'Sogou Explorer',
                        y: 1.64
                    }, {
                        name: 'Opera',
                        y: 1.6
                    }, {
                        name: 'QQ',
                        y: 1.2
                    }, {
                        name: 'Other',
                        y: 2.61
                    }]
                }];
            }
        },

I have made an ajax request which will contain multiple arrays (or objects) and I can simply loop through the specific array as such:

for (var i=0, len=this.bookingData.bookingSource.length; i<len; i++) {
                            this.bookingData.bookingSource[i].bkCount; //this value is for y:
                            this.bookingData.bookingSource[i].BookingRequestSource; //this value is for name:
                        }

I work with PHP and would normally use PHP to loop and add the values whilst keeping the javascript structure in place however since this is in a vue file I need to loop through the array and fill in the expected values within the data section of the computed section

An example which obviously doesn’t work is:

data: [
        for (var i=0, len=this.bookingData.bookingSource.length; i<len; i++) {

            {
                      name: this.bookingData.bookingSource[i].BookingRequestSource, //this value is for name:,
                      y: this.bookingData.bookingSource[i].bkCount //this value is for y:

            }

        }
]
Answers: