Dynamic chart in vue-chartjs

I took the graphs from this repository, and I have a pie chart. In my … Read more Dynamic chart in vue-chartjs

I took the graphs from this repository, and I have a pie chart. In my project, I enter numbers through the input data in the process, write them to variables. How do I transfer them to the chart and update it (@chart:update) I figured out how to use it, but I don’t understand how to send variables from the file in which these variables are declared (approximately.vue), to the graph file (pieexample.js or BaseCharts.js ) so when you enter new values, they are displayed on the graph and immediately change it.

https://github.com/apertureless/vue-chartjs

BaseCharts.js

import Chart from 'chart.js'

export function generateChart (chartId, chartType) {
  return {
    render: function (createElement) {
      return createElement(
        'div', {
          style: this.styles,
          class: this.cssClasses
        },
        [
          createElement(
            'canvas', {
              attrs: {
                id: this.chartId,
                width: this.width,
                height: this.height
              },
              ref: 'canvas'
            }
          )
        ]
      )
    },

    props: {
      chartId: {
        default: chartId,
        type: String
      },
      width: {
        default: 400,
        type: Number
      },
      height: {
        default: 400,
        type: Number
      },
      cssClasses: {
        type: String,
        default: ''
      },
      styles: {
        type: Object
      },
      plugins: {
        type: Array,
        default () {
          return []
        }
      }
    },

    data () {
      return {
        _chart: null,
        _plugins: this.plugins
      }
    },

    methods: {
      addPlugin (plugin) {
        this.$data._plugins.push(plugin)
      },
      generateLegend () {
        if (this.$data._chart) {
          return this.$data._chart.generateLegend()
        }
      },
      renderChart (data, options) {
        if (this.$data._chart) this.$data._chart.destroy()
        if (!this.$refs.canvas) throw new Error('Please remove the <template></template> tags from your chart component. See https://vue-chartjs.org/guide/#vue-single-file-components')
        this.$data._chart = new Chart(
          this.$refs.canvas.getContext('2d'), {
            type: chartType,
            data: data,
            options: options,
            plugins: this.$data._plugins
          }
        )
      }
    },
    beforeDestroy () {
      if (this.$data._chart) {
        this.$data._chart.destroy()
      }
    }
  }
}

export const Bar = generateChart('bar-chart', 'bar')
export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
export const Doughnut = generateChart('doughnut-chart', 'doughnut')
export const Line = generateChart('line-chart', 'line')
export const Pie = generateChart('pie-chart', 'pie')
export const PolarArea = generateChart('polar-chart', 'polarArea')
export const Radar = generateChart('radar-chart', 'radar')
export const Bubble = generateChart('bubble-chart', 'bubble')
export const Scatter = generateChart('scatter-chart', 'scatter')

export default {
  Bar,
  HorizontalBar,
  Doughnut,
  Line,
  Pie,
  PolarArea,
  Radar,
  Bubble,
  Scatter
}

Pieexample.js

import { Pie } from '../BaseCharts'

export default {
  extends: Pie,
  mounted () {
    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
          backgroundColor: [
            '#41B883',
            '#E46651',
            '#00D8FF',
            '#DD1B16'
          ],
          data: [40, 20, 80, 10]
        }
      ]
    }, {responsive: true, maintainAspectRatio: false})
  }
}

About.vue

<template>
  <div class="about">
      <div class="container">
          <div class="profile__div">
              <div class="img__prof">
                <img  src="../components/user_person_profile_avatar_icon_190943.png" alt="">
              </div>
                <div class="buttom__prof">
                    <input v-model.number="myMoney" />
                    <div class="div__but">
                        <button class="but" @click="addMoney">Add</button>
                        <button class="but" @click="takeMoney">Take</button>
                    </div>
                </div>
          </div>
          <div class="info__div">
              <div class="state__line">
                  <h1 style="text-align:center;">USD: {{this.dollar}}</h1>
              </div>
              <div class="char__div">
                    
                    <pie-example/>
              </div>
          </div>
          <div class="value__div">
                <div class="value__money">USD: {{dollar}}</div>
                <div class="value__money">ETH: {{rub}}</div>
                <div class="value__money">BTC: {{uin}}</div>
          </div>
      </div>
  </div>
</template>
<script>

  import PieExample from '../components/PieExample'

  export default {
    components: {
      PieExample,

    },
    data () {
      return {
        dataPoints: null,
        height: 20,
        myMoney: 0,
        dollar: 0,
        rub:0,
        uin:0
      }
    },
    mounted () {
      setInterval(() => {
        this.fillData()
      }, 2000)
    },
    methods: {
        addMoney() {
            this.dollar += this.myMoney
            this.rub += this.myMoney * 3486
            this.uin += this.myMoney * 56132
        },
        takeMoney() {
            this.dollar -= this.myMoney
            this.rub -= this.myMoney * 3486
            this.uin -= this.myMoney * 56132
        },
      increaseHeight () {
        this.height += 10
      },
      
      fillData () {
        this.dataPoints = {
          labels: [],
          datasets: [
            {
              label: 'Data One',
              backgroundColor: '#f87979',
              data: [this.dollar, this.rub, this.uin]
            }
          ]
        }
      }
    },
    watch: {
        chartData () {
            this.$data._chart.update()
        }
        },
    computed: {
      myStyles () {
        return {
          height: `${this.height}px`,
          position: 'relative'
        }
      }
    }
  }
</script>

I want the chart to display the values of rub, in, dollar in the div class value__money

Source: JavaSript – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *