vladimir
6
0
Vue

Chart from laracasts.com/series/charting-and-you/

Posted 1 year ago by vladimir

Above is broken, since a lot of changes from the date it was published. Does not matter, i've got it working with vue 2 and laravel 5.4 Anyway, there is a problem that i cant solve for now. In the series, component is created, and that is great, but there is a line component, with only one line into graph. How to pass two lines into graph? Or more? Here is the part of code:

<div class="column">
          <div class="chart-wrapper">
                  <revenue-graph url="/fetchLast7Days" :range="30" label=""></revenue-graph>
            </div>
</div>

And vue part:

var Graph = Vue.extend({
        template: `
        <div>
            <canvas width="400" height="400" ref="canvas"></canvas>
            {{ legend }}
        </div>
    `,
        props: {
            url: '',
            label: '',
            background: {
                default: "rgba(220,220,220,0.1)"
            }
        },
        data() {
            return {
                chart: '',
                legend: '',
            };
        },
        mounted() {
            this.load();
        },
        methods: {
            load() {
                this.fetchData().then(
                    response => this.render(response.data)
                );
            },
            fetchData() {
                return axios.get(this.url);
            },
            render(data){
                console.log(data)
                this.chart = new Chart(this.$refs.canvas, {
                    type: 'line',
                    data: {
                        labels: data.labels,
                        datasets: [
                            {
                                label: this.label, // move to a property to make dynamic.
                                backgroundColor: this.background, //"rgba(220,220,220,0.2)",
                                strokeColor: "rgba(220,220,220,1)",
                                pointColor: "rgba(220,220,220,1)",
                                pointStrokeColor: "#fff",
                                pointHighlightFill: "#fff",
                                pointHighlightStroke: "rgba(220,220,220,1)",
                                data: data.data
                            }
                        ]
                    }
                });
                this.legend = this.chart.generateLegend();
                console.log(this.legend)
            },
            reload() {
                this.chart.destroy();
                this.load();
            }
        }
    });
    var RevenueGraph = Graph.extend({
        template: `
                    <div>
                        <div>
                            <label>How Many Days?</label>
                            <select v-model="range" @change="reload">
                                <option v-for="n in 365">{{ n }}</option>
                            </select>
                        </div>
                        <canvas ref="canvas"></canvas>
                        <div v-html="legend"></div>
                    </div>
                `,
        props: {
            range: {default: 30}
        },

        methods: {
            fetchData() {
                return axios.get(
                    this.url, {range: this.range}
                );
            }
        }
    });
    

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.