Plot a a json chart with HighCharts & Vue.js

Question

I'm trying to plot some data I have in my database. I'm following this jsfiddle for the structure. However even though I manage to get the data correctly from my API, the chart shows up but no data is plotted.

My app.js looks something like this:

// Load Sessions
var sessions = new Vue({
  el: '#sessions',
  delimiters: ["v{","}"],
  data: { date:'', sessions:'', json:'', timestamp:''},
  methods: {
    loadSessions: function(){
      var vm = this
      axios.get('/api/v1/metrics/')
           .then(function(response) {
             vm.json = response.data
             Highcharts.chart('container', {
                    chart: {
                        zoomType: 'x'
                    },
                    title: {
                        text: 'Session Over Time'
                    },
                    subtitle: {
                        text: document.ontouchstart === undefined ?
                                'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
                    },
                    xAxis: {
                        type: 'datetime'
                    },
                    yAxis: {
                        title: {
                            text: 'Sessions'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        area: {
                            fillColor: {
                                linearGradient: {
                                    x1: 0,
                                    y1: 0,
                                    x2: 0,
                                    y2: 1
                                },
                                stops: [
                                    [0, Highcharts.getOptions().colors[0]],
                                    [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                                ]
                            },
                            marker: {
                                radius: 2
                            },
                            lineWidth: 1,
                            states: {
                                hover: {
                                    lineWidth: 1
                                }
                            },
                            threshold: null
                        }
                    },

                    series: [{
                        type: 'area',
                        name: 'Sessions',
                        data: vm.json
                    }]
                });
           })
    }
  }
})

The vm.json file looks like this:

[ { "date": "2017-01-02", "timestamp": 1483401600, "sessions": 1100 }, { "date": "2017-01-03", "timestamp": 1483488000, "sessions": 1159 }, { "date": "2017-01-04", "timestamp": 1483574400, "sessions": 1084 }]

And I load vue in my html with a simple:

<div id='sessions'>
<a class="button is-primary" @click='loadSessions'>Load Sessions</a>

<!-- Just to test that data is loaded correctly from API -->
<ul style="margin-left: 20px;">
  <li v-for="item in json">
    <b>Date: </b> v{item.date} <br />
    <b>Sessions:</b> v{item.sessions} <br />
    <b>Timestamp:</b> v{item.timestamp}
  </li>
</ul>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

</div>

Now I think that my problem is on formatting the json, isn't it? The on in the jsfiddle example looks a bit different. How can I get my data to show up?

Bert · Accepted Answer · 2017-04-23 22:32:05Z

1

You can convert your data into the format that is shown in the example.

series: [{
  type: 'area',
  name: 'Sessions',
  data: vm.json.map(d => [new Date(d.date).getTime(), d.sessions])
}]

I converted your date properties to Javascript Date objects in order to use getTime because your timestamp property, where ever it came from, is not a proper Javascript timestamp.

Example.

answered Apr 23, 2017 at 22:32

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

6 Comments

Costantin Over a year ago

Hi, I've tried with your settings but something doesn't seem to work. If I add vm.nex = vm.json.map(d => [new Date(d.date).getTime(), d.sessions]) just under vm.json = response.data and then I add v{nex} in my template nothing loads and also the chart doesn't load. Any ideas why?

Bert Over a year ago

@Costantin Does response.data actually have any data?

Costantin Over a year ago

yes, because when I render vm.json = response.data with v{json} I get the following:

[ { "date": "2017-01-06", "timestamp": 1483747200, "sessions": 1180 }, { "date": "2017-01-08", "timestamp": 1483920000, "sessions": 966 }, { "date": "2017-01-09", "timestamp": 1484006400, "sessions": 1203 } etc

Bert Over a year ago

@Costantin is there a console error? Does response.data contain a string or an actual array?

Costantin Over a year ago

Yes, now that I've checked I get this error:

[Vue warn]: Property or method "nex" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.  (found in <Root>)

|

Collectives™ on Stack Overflow

Plot a a json chart with HighCharts & Vue.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related