Highcharts-vue fails to update data/series

Question

I'm trying to dynamically update data in highchairs. On the long term the idea is to have a dropdown list but for now I'm focusing on just having a button working properly.

https://codesandbox.io/s/vue-template-ub45g

It's a custom made graph so there's a lot of data going into the series. So far, I have a file with the chart (i.e. Rose.vue), and an App.vue file. In the App.vue I have two variables (just as an example), original and updatedData. In theory if I would press the button, it should update the series to the updatedData. However, whenever I press it nothing happens. The data is fine, as if I change the series manually in the code, the chart is updated. However, I'm not sure why the button isn't doing what it is supposed to do.

The code is below, but it's better to check the codesandbox example.

    <template>
  <div>
    <Rose v-bind:options="chart1"/>
    <button @click="updateChart()">Update chart</button>
  </div>
</template>

<script>
import Rose from "@/components/Rose";

export default {
  components: {
    Rose
  },
  data() {
    return {
      chart1: {
        title: {
          text: null
        },
        subtitle: {
          text: null
        },
        legend: {
          enabled: false
        },
        series: original.value
      }
    };
  },
  methods: {
    updateChart() {
      this.chart1.series = updatedData.value;
    }
  }
};

var original = {
  name: "Aalst",
  value: [
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 0,
      pointRange: 0.5
    },
    {
      data: [1.99759968],
      type: "column",
      color: "#1DACE8",
      name: "S_N_AT_Park_tot",

      pointStart: 0,
      pointRange: 25.71
    },

    {
      data: [3.069066148],
      type: "column",
      color: "#1DACE8",
      name: "S_N_CA_Park_tot",

      pointStart: 25.71,
      pointRange: 25.71
    },

    {
      data: [4.762283492],
      type: "column",
      color: "#1DACE8",
      name: "S_N_BTM",

      pointStart: 51.42,
      pointRange: 25.71
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 77.13,
      pointRange: 0.5
    },

    {
      data: [5.472831225],
      type: "column",
      color: "#AEA8A8",
      name: "S_N_TR",
      pointStart: 77.13,
      pointRange: 25.71
    },
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 102.84,
      pointRange: 0.5
    },

    {
      data: [5.089290648],
      type: "column",
      color: "#F24D29",
      name: "S_P_DE",

      pointStart: 102.84,
      pointRange: 25.71
    },

    {
      data: [8.593398356],
      type: "column",
      color: "#F24D29",
      name: "S_P_DI",

      pointStart: 128.55,
      pointRange: 25.71
    },

    {
      data: [5.06165564],
      type: "column",
      color: "#F24D29",
      name: "S_P_DG",

      pointStart: 154.26,
      pointRange: 25.74
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 180,
      pointRange: 0.5
    },

    {
      data: [3.63565202],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_sec",

      pointStart: 180,
      pointRange: 19.2825
    },

    {
      data: [2.033564998],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_tert",

      pointStart: 199.2825,
      pointRange: 19.2825
    },

    {
      data: [1.464012915],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_work",

      pointStart: 218.465,
      pointRange: 19.2825
    },

    {
      data: [1.284840194],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_other",

      pointStart: 237.6475,
      pointRange: 19.2825
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 256.83,
      pointRange: 0.5
    },

    {
      data: [5.840454632],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_orig",

      pointStart: 256.83,
      pointRange: 8.57
    },

    {
      data: [1.153663761],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_rid",

      pointStart: 265.4,
      pointRange: 8.57
    },

    {
      data: [4.159545368],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_dest",

      pointStart: 273.97,
      pointRange: 8.57
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 282.54,
      pointRange: 0.5
    },

    {
      data: [1.283496592],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_walk",

      pointStart: 282.54,
      pointRange: 25.71
    },

    {
      data: [4.765886288],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_bike",

      pointStart: 308.25,
      pointRange: 25.71
    },

    {
      data: [4.72029121],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_far",

      pointStart: 333.96,
      pointRange: 26.04
    }
  ]
};

var updatedData = {
  name: "Anzegem",
  value: [
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 0,
      pointRange: 0.5
    },
    {
      data: [0.128017069],
      type: "column",
      color: "#1DACE8",
      name: "S_N_AT_Park_tot",

      pointStart: 0,
      pointRange: 25.71
    },

    {
      data: [0.403696498],
      type: "column",
      color: "#1DACE8",
      name: "S_N_CA_Park_tot",

      pointStart: 25.71,
      pointRange: 25.71
    },

    {
      data: [0.253077371],
      type: "column",
      color: "#1DACE8",
      name: "S_N_BTM",

      pointStart: 51.42,
      pointRange: 25.71
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 77.13,
      pointRange: 0.5
    },

    {
      data: [3.734963849],
      type: "column",
      color: "#AEA8A8",
      name: "S_N_TR",
      pointStart: 77.13,
      pointRange: 25.71
    },
    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 102.84,
      pointRange: 0.5
    },

    {
      data: [0.867670432],
      type: "column",
      color: "#F24D29",
      name: "S_P_DE",

      pointStart: 102.84,
      pointRange: 25.71
    },

    {
      data: [3.47744926],
      type: "column",
      color: "#F24D29",
      name: "S_P_DI",

      pointStart: 128.55,
      pointRange: 25.71
    },

    {
      data: [0.994857797],
      type: "column",
      color: "#F24D29",
      name: "S_P_DG",

      pointStart: 154.26,
      pointRange: 25.74
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 180,
      pointRange: 0.5
    },

    {
      data: [0],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_sec",

      pointStart: 180,
      pointRange: 19.2825
    },

    {
      data: [0],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_tert",

      pointStart: 199.2825,
      pointRange: 19.2825
    },

    {
      data: [0.36406198],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_work",

      pointStart: 218.465,
      pointRange: 19.2825
    },

    {
      data: [0.748181912],
      type: "column",
      color: "#EDCB64",
      name: "S_PP_MOT_other",

      pointStart: 237.6475,
      pointRange: 19.2825
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 256.83,
      pointRange: 0.5
    },

    {
      data: [9.28512162],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_orig",

      pointStart: 256.83,
      pointRange: 8.57
    },

    {
      data: [0.027799127],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_rid",

      pointStart: 265.4,
      pointRange: 8.57
    },

    {
      data: [0.71487838],
      type: "column",
      color: "#C4CFD0",
      name: "S_PP_RID_dest",

      pointStart: 273.97,
      pointRange: 8.57
    },

    {
      data: [10],
      type: "column",
      color: "#AEA8A8",
      name: "TESTMARK",
      pointStart: 282.54,
      pointRange: 0.5
    },

    {
      data: [1.393719008],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_walk",

      pointStart: 282.54,
      pointRange: 25.71
    },

    {
      data: [5.832167832],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_bike",

      pointStart: 308.25,
      pointRange: 25.71
    },

    {
      data: [3.685239492],
      type: "column",
      color: "#76A08A",
      name: "S_PP_EFF_far",

      pointStart: 333.96,
      pointRange: 26.04
    }
  ]
};
</script>

Wojciech Chmiel · Accepted Answer · 2019-09-06 06:57:56Z

1

Try to make it using events. The event will be emitted in the App component with new data and received in the Rose component that will change the chartOptions.

App.vue:

  methods: {
    updateChart() {
      EventBus.$emit("btn-clicked", {
        newData: updatedData.value
      });
    }
  }

Rose.vue:

  created() {
    EventBus.$on("btn-clicked", data => {
      this.chartOptions.series = data.newData;
    });
  }

Demo:

https://codesandbox.io/s/vue-template-tf0d8

answered Sep 6, 2019 at 6:57

Wojciech Chmiel

7,4071 gold badge9 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Highcharts-vue fails to update data/series

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related