Solvedvue chartjs Loading data from server and displaying

Expected Behavior

In the example for Reactive Data in the docs, when implemented, you have to click the "Randomize" button to trigger the fillData function and get content displayed in the graph.

Actual Behavior

I'm looking for a way (as I serve the content to display from an API) to display the data as soon as the component gets a response from my API.

I tried to do the usual Vue 2.0 nextTick to call the fillData function when the component is mounted

mounted () {
      this.$nextTick(function () {
        this.fillData;
      })
    },

Below is the code of my component (slightly adapted to match my API call), of course it works perfectly when I click the "Randomize" button but I don't want to have to click this button for each and every graph in my "Dashboard" component (several graphs in this component).

<template>
    <div>
      <line-chart :chart-data="datacollection"></line-chart>
      <button @click="fillData()">Randomize</button>
    </div>
</template>

<script>
  import LineChart from './LineChart.js'

  export default {
    components: {
      LineChart
    },
    data () {
      return {
        datacollection: null
      }
    },
    mounted () {
      this.$nextTick(function () {
        this.fillData;
      })
    },
    methods: {
      fillData () {
        this.$http.get('/api/data/line/scenarios_by_day')
            .then(response => {
            this.datacollection = response.data;
        });
      },
    }
  }
</script>

Thank you in advance for your help !

Environment

  • vue.js version:
  • vue-chart.js version:
  • npm version:
16 Answers

โœ”๏ธAccepted Answer

Hi @cdubant

I recently had to implement something like this and I was kinda stuck. Here's what I did (with help from Vuex);

First thing I did was store what I needed from the API call in Vuex so I could pretty much access it anywhere. Then I wrote a computed object that returns the the data in Vuex and uses it to build the chart; something like this

      datasetsfull () {
        return {
          labels: store.state.chartdays,
          datasets: [
            {
              label: 'Time Signed In',
              backgroundColor: '#40CF97',
              data: store.state.charttimes
            }
          ]
        }
      },
      chartdays () {
        return store.state.chartdays
      },
      charttimes () {
        return store.state.charttimes
      }
    }

And then in my template I simply used the datasetsfull function; something like this;
<reports-charts :chart-data="datasetsfull" :height="400" :options="{responsive: true, maintainAspectRatio: false}"></reports-charts>

I hope that was useful to you ๐Ÿ˜„

Related Issues:

35
vue chartjs [Vue warn]: Invalid prop: type check failed for prop "chartData"
Oh now I understand Well the issue is that the prop is defined as an object in the mixin ...
15
vue chartjs Standalone chartjs build (don't include moment.js)
Oh damn really? So I'm stuck with having moment.js in my project even though I never use it It's lit...
3
vue chartjs Loading data from server and displaying
Hi @cdubant I recently had to implement something like this and I was kinda stuck ...
673
helm User "system:serviceaccount:kube-system:default" cannot get namespaces in the namespace "default"
That's because you don't have the permission to deploy tiller add an account for it: Console output:...
513
helm Error: no available release name found
Per #2224 (comment) the following commands resolved the error for me: Hi folks i just don't have any...
497
helm unable to retrieve the complete list of server APIs
For anyone who hits this it's caused by api-services that no longer have backends running.. In my ca...
290
helm helm upgrade --install no longer works
I thought I was experiencing the same problem but it turned out I just had an old delete (but not pu...
202
helm system:default not sufficient for helm, but works for kubectl
Per jayunit100 's advice add role cluster-admin to serviceaccount kube-system:default works for me b...
180
helm Values not exist with loop over a range
@worldsayshi For what it's worth I just ran into this same issue and it turns out there's a relevant...
150
helm Support for using {{ values }} within values.yaml
YAML also provides a handy feature called anchors which let you easily duplicate content across your...
145
helm Accessing values of the subchart with dash in the name
Use the index template function to access a value with a '-' in the name: {{ index .Values gitlab-ru...
144
helm Helm init fails on Kubernetes 1.16.0
The following sed works-for-me: The issue with @mattymo solution (using kubectl patch --local) is th...
135
helm Scoping releases names to namespaces
Explicitly It would be really nice if I could do the same things as I can do with services and other...
118
helm Error converting YAML to JSON could not find expected ':'
For what it's worth I have just run into very curious bug with (.Files.Glob configOverrides/*).AsCon...
106
helm Error: UPGRADE FAILED: cannot re-use a name that is still in use
For those stuck when initial deployment fails After you fix your chart but still cannot deploy with ...
94
react chartjs 2 Mix chart, labels.slice is not a function error
After fiddling with this for a little while I found a way to fix the example It is very easy and I d...
90
helm Error: UPGRADE FAILED: no resource with the name "anything_goes" found
Completely removing release from Helm via helm delete release works but it is not a viable solution ...
88
helm Warning after upgrading to 3.3.3
To close out this ticket.. Your ~/.kube/config should only be readable by the current user not the g...
85
ngx charts How to make width responsive (100%)
I solved it by putting it inside a div with css --> display: grid; // html // css #pie-chart-parent ...
78
helm Connection refused error when issuing helm install command
@cookkkie The service account needs to have a clusterRole: Admin default does not have a cluster adm...
77
react chartjs 2 Defaults creating error
got the same issue solve it by change the chart.js: ^2.9.4 in your package.json then delete node mod...
70
helm Add 'helm install --app-version' command/versioning a chart against an app version
Any update on this It seems PR from @Eraac does what is requested As @TD-4242 mentioned we also run ...
60
Chart.js Cannot read property 'transition' of null
This error occurs when you just initialized the graph and overwrite the dataset almost immediately a...
51
helm Error when updating Statefulsets
I had a similar error when adding a 2nd container (k8s 1.7.8) The first time I'm updating a stateful...
48
helm Using .Chart.name in range function
Just for reference here in case you are landing to this issue the documented way is working ...
44
helm Unable to perform helm upgrade due to resource conflict
This doesn't really help because I still need to manually remove old resources Output of helm versio...
43
helm Naming convention of Release and Chart
We ran into the exact same issue Usually the chart name is your app name I'm having difficulties und...
41
Chart.js Padding inside the canvas with a line chart without scale
Adding the layout padding works for me Hello ...
39
helm Helm3: No 'init', doesn't use existing ~/.helm
Found this in another issue: ./helm version version.BuildInfo{Version:v3.0.0-beta.1 GitCommit:f76b5f...
37
helm app-name has no deployed releases
Cannot agree more Our production is experiencing the same error So deleting the chart is not an opti...
35
Chart.js Do not require moment.js
@ciaoben @lsn793: While we wait for the much anticipated 2.8 (or 3.0?) release Expected Behavior Cha...
34
helm Error forwarding ports: error upgrading connection
Hi I have Helm install locally and Tiller on my cluster everything looks healthy but running helm in...
33
helm Release failure or error logs
helm status only shows that the release is failed not quite useful for debugging helm install will p...
32
Chart.js HTML legend example
@sensaetions The default generateLegend() function will generate a <ul class=0-legend> for the chart...
32
helm Proposal: Allow templating in values.yaml
@alexbrand You could use the tpl function to render values that contain variables: values.yaml templ...
32
ngx charts wrong context of AxisTickFormatting methods
[xAxisTickFormatting]=xFormat // in your template guys just simple declare function like this: ...
29
helm "required" template function breaks linter
Having a default value for a required values in the charts values.yaml file defeats the whole purpos...
27
MPAndroidChart how to display dynamic labels for XAxis
There's also an IndexAxisValueFormatter class if you have a simple lookup. I am using bar chart and ...
27
helm UPGRADE FAILED: No resource with the name "" found
This is a process I use to recover from this problem (so far it has worked every time without any in...
27
helm Error: could not find a ready tiller pod
Run this command may solve your issue kubectl logs --namespace kube-system tiller-deploy-2654728925-...
26
helm helm v3.0 mapping values are not allowed in this context
I get the same error message with our SonarQube chart for OpenShift The same install works with Helm...
25
helm Secret Management in Helm
The method proposed above does not seem like it would work with helm rollback or simple helm upgrade...
25
helm Helm 2.2.3 not working properly with kubeadm 1.6.1 default RBAC rules
After running helm init When installing a cluster for the first time using kubeadm v1.6.1 the initia...
24
helm helm cant upgrade already created resources
For the benefit of the group I am using helm 2.9.1 and I want to create a namespace with an annotati...
23
Chart.js Uncaught TypeError: Cannot read property 'length' of null (vuejs + chart.js)
Oh I see <canvas>...</canvas> need to be declared before <script>...</script> ๐Ÿ‘ ...
23
helm helm upgrade fails with spec.clusterIP: Invalid value: "": field is immutable
Update! The update fails ONLY when using helm upgrade --install w/ --force Less of a blocker now. ...
22
Chart.js Display formatted times on y-axis
Hi @justjoehere Sure Hi I am trying to upgrade my graph from Chart.js v1 to v2 So far it's great a l...
22
helm example .Files.Get from documentation not working
@prein something like this will work for you I need for my project read files and combine them to on...
22
helm Helm cannot fetch values from within a repository chart
I too would like this feature We have a number of different environments Hello everyone ...