Wondering if anyone can clarify: Chart for me.

[vitorioParticipant]

What is the correct way to bind reactive Vue data to jqxChart so the chart updates automatically?

[adminKeymaster]

Hi vitorio,

With Vue + jqxChart, the key is to bind your Vue reactive data to the chart’s :source prop. jqxChart watches for changes and will redraw automatically when the reactive array updates.

<template>
  <div>
    <JqxChart
      style="width: 600px; height: 400px;"
      title="Sales Report"
      description="Vue reactive binding"
      showLegend
      enableAnimations
      :source="data"       <!--  bind to reactive data -->
      :xAxis="{ dataField: 'day' }"
      :seriesGroups="seriesGroups"
    />

    <button @click="updateData">Update Data</button>
  </div>
</template>

<script>
import JqxChart from 'jqwidgets-scripts/jqwidgets-vue3/vue_jqxchart.vue';

export default {
  components: { JqxChart },
  data() {
    return {
      data: [
        { day: "Mon", sales: 30 },
        { day: "Tue", sales: 40 },
        { day: "Wed", sales: 25 }
      ],
      seriesGroups: [
        {
          type: "column",
          series: [{ dataField: "sales", displayText: "Sales" }]
        }
      ]
    };
  },
  methods: {
    updateData() {
      //  Updating reactive data automatically refreshes chart
      this.data = [
        { day: "Mon", sales: 35 },
        { day: "Tue", sales: 50 },
        { day: "Wed", sales: 28 },
        { day: "Thu", sales: 60 }
      ];
    }
  }
};
</script>

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts