A
A
asferot2018-11-01 11:38:00
Vue.js
asferot, 2018-11-01 11:38:00

Chart with Axios?

How can I use axios to substitute data into the chart array?
Here's what's available

<template lang="pug">
include ../../../node_modules/bemto.pug/bemto.pug
- set_bemto_settings({ prefix: 'b-' })
    div
        +b.DIV.select-container-filial
            +b.SELECT.select-filials(v-model="selectedFilial")
                +e.OPTION.filial(value="" selected disabled hidden) Выберите филиал
                +e.OPTION.filial(v-for="filial in filials" v-bind:value="filial.f5001") {{filial.f5001}}
            +e.BUTTON(@click="reset()").clear Сброс
        line-chart(class="user_chart" :data="chartData" width="450px" height="270px" xtitle="Месяц" ytitle="Сумма" :legend="true" legend="right" :colors="['#4DB6AC', '#7986CB', '#81C784']")
</template>
<script>
require('./chart-zayavka.styl')
import axios from 'axios'
export default {
  data: function(){
      return{
          chartData:[
            {name: 'name', 
                data: {"Jan": 3745, "Feb": 4578, "Mar": 10785, "Apr": 5585, "May": 32533, "Jun": 77872, "Jul": 21455, "Aug": 52585, "Sep": 12588, "Oct": 22555, "Nov": 87585, "Dec":68522}},
            {name: 'name', 
                data: {"Jan": 42525, "Feb": 78278, "Mar": 10785, "Apr": 25827, "May": 74585, "Jun":78585, "Jul": 85282, "Aug": 25258, "Sep": 82828, "Oct": 25288, "Nov": 21582, "Dec":68522}},
            {name: 'name', 
                data: {"Jan": 44255, "Feb": 75278, "Mar": 10255, "Apr": 22877, "May": 15855, "Jun":88525, "Jul": 77852, "Aug": 25214, "Sep": 42258, "Oct": 25258, "Nov": 72142, "Dec":52788}},
            
        ],
        filials: [],
        selectedFilial:''
    }
   },
    mounted(){
            var CancelToken = axios.CancelToken;
            var source = CancelToken.source();
            axios.post('/filials', {
            _csrf: document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            }).then(data => {
                this.filials = data.data;
            });
    },
    methods:{
        reset(){
            console.log('reset');
            this.selectedFilial = '';
        }
    }
}
</script>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-11-01
@0xD34F Vue.js

How can I use axios to substitute data into the chart array?

This is basically impossible, axios is for querying, not working with arrays.
Of course, you meant something else, and it is even clear what exactly. But given the fantastically bastard wording of the question, you deserve no other answer. By bastard wording, I mean not only a misunderstanding of what you yourself are asking, but also an almost complete lack of any specifics. Namely:
Not a word is said about the graphics that it displays.
Getting data for the chart is done with the help of axios - but the only request shown is about something else, there is getting data for the drop-down list. That is, there must be some other request. Which? - url, parameters, response structure - nothing is known.
Next, you plan to "substitute data" into the "chart array" - but as follows from the code snippet shown, there is no such array. There is chartData. It is he? Or some other array? I don't know what to think. As for the actual "substitute" - arrays have a push method, haven't you heard about it? If you haven’t heard, there’s nothing to talk about here, go learn the language. And somewhere in half a year, not earlier, it will be possible to try to look in the direction of vue. If you have heard - obviously, push in itself cannot be a problem, you will have to state that you simply decided to keep silent about the essence of your difficulties.
The line-chart component, which, presumably, is responsible for plotting the graph - what is it? It is unlikely that you wrote it yourself - it is either a third-party component, or a wrapper over a third-party component. Why is there no link to documentation/github/...? - as far as I understand, the graph is successfully built, but data must be dynamically thrown into it, so information about the graph component would come in handy. Does it track changes in its parameters? Or does it have a method to force a refresh of its appearance? But no - and there is no information.
Like this.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question