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

Published 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.