How to add values to an array from variables in Vue.Js to make bar chart

Question

I'm trying to add values, stored in variables, to be added to an array to display as a bar chart in Vue.js

I tried adding values by using series[0]=ServiceArea1;.

This is what I got so far:

barChart: {
    data: {
        series [0] : ServiceArea1Total,
        series [1] : ServiceArea2Total,                    
        series [2] : ServiceArea3Total,
        series [3] : ServiceArea4Total,
        series [4] : ServiceArea5Total,
        labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
        series: [ ]                
    }
}

If I enter the values like so

series: [[542, 443, 320, 780, 553],]

the output comes however since I am calling the values from a database, I cannot enter the values statically.

The HTML part is below:

<div class="row">
                <div class="col-md-6">
                    <chart-card :chart-data="barChart.data"
                                :chart-options="barChart.options"
                                :chart-responsive-options="barChart.responsiveOptions"
                                chart-type="Bar">
                        <template slot="header">
                            <h4 class="card-title">Statewide Service Area Kids</h4>
                            <p class="card-category">Click on a service area to view more information</p>
                        </template>
                        <template slot="footer">
                            <div class="legend">
                                <i class="fa fa-circle text-info"></i> Service Area

                            </div>
                            <hr>
                            <div class="stats">
                                <i class="fa fa-check"></i> Data information certified
                            </div>
                        </template>
                    </chart-card>
                </div>

Can you look for fix your indentation, cause your barChart{ ... } is not easy to read, and I am not sure that you haven't a typos in, you need to add "," after series [ 0 ] : ServiceArea1Total — Benoit Chassignol, Jun 24 '19 at 16:07
Thx for the fix, can you tell me if series [ 0 ] is the first item of your array series ? — Benoit Chassignol, Jun 24 '19 at 16:13
@ibeefymcwhatnow how are you getting these `ServiceAreaTotal` variables ?...can you show us your database `GET` request ! because the variables should be bounded to your data array after the request immediatly — Abdelillah Aissani, Jun 24 '19 at 16:23
@BenoitChassignol Yes, I want ServiceArea1Total to be saved in the first position of the array hence series[0]=: ServiceArea1Total — hulkenbergg, Jun 24 '19 at 19:02
@ibeefymcwhatnow, have you look my answer below ? I explain how you can insert the result of your request/function ServiceArea1Total in series[ ], I just think you did a mistake for creating your data model barChart, take look below and tell me if you can adapt it to your code. — Benoit Chassignol, Jun 24 '19 at 19:35

score 0 · Answer 1 · answered Jun 24 '19 at 16:09

0

It depends on how the data is structured when it comes back from the database. At the most basic, you'd loop through an array or object from the database and call Array.push for each element.. Ex: series.push(x)

This may help:

How do I push items into an array in the data object in Vuejs? Vue seems not to be watching the .push() method

answered Jun 24 '19 at 16:09

rwest88

9
5

The values are being stored as integers inside ServiceArea1Total, ServiceArea2Total..... ServiceArea5Total variables. I just need to find a way to plug them into the array – hulkenbergg Jun 24 '19 at 16:11

Benoit Chassignol · Answer 2 · 2019-06-24T19:52:39.173

0

Assuming that you have a model like :

let barChart = {
  services: [
    ServiceArea1Total,
    ServiceArea2Total,                    
    ServiceArea3Total,
    ServiceArea4Total,
    ServiceArea5Total,
  ],
  labels: ['Western', 'Northern', 'Eastern', 'Southern', 'Central'],
  series: []
}

You are storing your services call in barChart.services, your labels in barChart.labels (which is not used here) and your total series in barChart.series. For getting all your data from your services and storing it in barChart.series you have to do something like :

barChart.services.forEach( function( service ){
    barChart.series.push( service() );
});

With that code you gonna call all your functions in services and push the data in the array series for each one.

May I have miss understood what you are trying to do ?

edited Jun 24 '19 at 19:52

answered Jun 24 '19 at 16:34

Benoit Chassignol

289
2
11

I tried putting the services function in however it is giving me errors for "barChart.data.services.forEach(function (service)". I put the function after the array code that you wrote below Thank you for trying however I realized didn't explain the question correctly before so please find the HTML part in the question. – hulkenbergg Jun 25 '19 at 14:37
Can you give the error log ? I have update my answer, i introduce a bug in the previous version. – Benoit Chassignol Jun 26 '19 at 11:52

How to add values to an array from variables in Vue.Js to make bar chart

2 Answers2