How to convert the following JavaScript logic using vuejs with ES6 standards

Question

I have a JavaScript file, and I want the same logic to be implemented using Vuejs with ES6 standards. I want to add this logic in "LineChart.vue" and then i will import it to my parent.vue in order to display charts.

As in vuejs there are lots of life cycle hook methods, as I'm new to vuejs I don't know to how implement this same logic in vuejs. Please help me with this.

The code is here:

function chart_shot(type, id, interval) {
    $.ajax({
        type: "GET",
        url: getApiUrl("find/" + type + "?interval=" + interval),
        headers: {
            "api_key": ''
        },
        cache: true,
        timeout: 30,
        dataType: "json",
        success: function (data) {
            var ctx = document.getElementById(id);

        var highChart = [];
        for(i = 0; i < data["date"].length; i++) {
            highChart.push({
                t: moment(data["date"][i], "X").toDate(),
                y: data["challenges"][i]
            })
        }

        if(my !== undefined) {
            my.destroy();
        }

        my = new Chart(ctx, {
            type: 'line',
            data: {
                datasets: [{
                    label: "challenges",
                    data: highChart,
                }]
            },
            options: {
                lineTension: 0,
                maintainAspectRatio: false,
                legend: {
                    display: false
                },
                scales: {
                    yAxes: [{
                        scaleLabel: {
                            display: false
                        },
                        ticks: {
                            beginAtZero: true,
                            callback: function (value, index, values) {
                                return value + '%';
                            }
                        }
                    }],
                    xAxes: [{
                        type: 'time',
                        time: {
                            unit: 'month'
                        },
                        scaleLabel: {
                            display: true,
                            labelString: ''
                        },
                    }]
                }
            }
        });
    }
});

}

Please help me with this as I am new to vuejs I don't know effective way of writing this code in vuejs.

And please do tell me in which file type it can be done, i mean in js or vue ?

And how the written code can be used in other vue component.

This code looks to be a function for a get http request and handling the response. This is not really related to vue in any way. You might be looking to ask for how to handle ajax in vanilla Javascript (no jQuery) or how to use responses in making UI components with vue? — Lars Holdaas
– Lars Holdaas, Commented Dec 9, 2020 at 7:55
Of course its a function, but if i paste same exact code in vue, i get too many errors, so i want to know how this same logic can be written using vuejs because there are certain changes in vue js and i dont know much as i am new to vuejs. — Quantum
– Quantum, Commented Dec 9, 2020 at 9:55
Have you had a look at the official vue-wrapper for highcharts? Also, are you using vue2 or 3? Since you're new to Vue I'd personally try and do simpler tasks before diving into charting and reusable components — discolor
– discolor, Commented Dec 9, 2020 at 12:54
The errors you get are not related to vue though. The code you're presenting is pure javascript except for jquery and highcharts it seems. Looks like a function for preparing an API response for displaying charts. Has nothing at all to do with vue.js which is a UI framework. If this is not obvious I agree with @discolor that you might be a bit on deep water and would benefit from first learning what vue actually does and doesn't. — Lars Holdaas
– Lars Holdaas, Commented Dec 10, 2020 at 0:53

Jay Dadhaniya · Accepted Answer · 2020-12-10 13:37:15Z

1

https://codesandbox.io/s/dry-cache-ilesg

Here is a little demo for the VueJS app related to your question. Please check it out you will get some idea about how it's working.

answered Dec 10, 2020 at 13:37

community wiki

Jay Dadhaniya

Sign up to request clarification or add additional context in comments.

3 Comments

Quantum Over a year ago

Thank you, this is really helpful. Now i got to know where to place such file in vue application, but one last thing i want to know is by using the chartjs how to display charts with my JavaScript file, please help me with this by giving demo.

Jay Dadhaniya Over a year ago

codesandbox.io/s/93m1lpjrvr Here you get the vue chartjs demo medium.com/risan/vue-chart-component-with-chart-js-db85a2d21288 And here you will all the explanation.

Quantum Over a year ago

Thank you so much, now how do i use my javascript file to display the LineChart using the chart js, please send me the demo of it by taking some API as an example because ur demo is really helping me in understanding the flow of the code.

Collectives™ on Stack Overflow

How to convert the following JavaScript logic using vuejs with ES6 standards

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related