HighCharts-Meteor RangeSelector, Buttons to DB

1

I implemented HightCharts in my Meteor App using this tutorial and it works fine for the beginning.

problem1 : I was trying to implement the rangeButtons like in the full example bellow, but there is nothing showing up. Any idea why?

problem 2: After solving problem1, how in the world could i link the buttons to the database if i was to display for example a count for all DB Items created in day for the duration of a week, month, year? :confused:

html

    <div id="chart">{{createChart}}</div>

js

var Highcharts = require('highcharts/highstock');

Meteor.subscribe("cvs");

Template.Statistici.helpers({
    createChart: function () {

        totalInterviuri = Cvs.find().count()
        totalAngajati = Cvs.find({ createdAd: { $regex: '^2016-09-15' } }).count()

        // Use Meteor.defer() to craete chart after DOM is ready:
        Meteor.defer(function () {
            Highcharts.chart('chart', {
                series: [{
                    name: 'Angajati',
                    type: 'line',
                    data: [{
                        y: totalAngajati,
                    },
                        {
                            y: 3
                        },
                        {
                            y: 2
                        },
                        {
                            y: 4
                        }
                    ],
                    allowPointSelect: true,
                    dataLabels: {
                        enabled: true
                    },
                }, {
                        name: "Interviuri",
                        type: 'line',
                        data: [{
                            y: totalInterviuri,
                        },
                            {
                                y: 6
                            },
                            {
                                y: 7
                            },
                            {
                                y: 5
                            },
                        ]
                    }],
                rangeSelector: {
                    allButtonsEnabled: true,
                    selected: 2

                },

            });

        });

    }
})
2

That is a convenience for time-series data (which is mainly what highstock is about). If you check the API docs for those: http://api.highcharts.com/highstock/rangeSelector.buttons, you will see that they are all time related:

Defined the time span for the button. Can be one of “millisecond”, “second”, “minute”, “day”, “week”, “month”, “ytd”, “all”.

If you look at the jsfiddle provided and look at the data they are using (from this url) you can see the time values at the left of each data point).

Your code does not seem to provide any timestamp data for these buttons to work on - the code may be clever enough to omit them if it doesn’t see a time-series chart.

As above - this is a convenience to filter time-series data. As long as you provide that, I’m sure this will work out of the box.

1 Like
3

The first time i read your answer (on the train) i thought i understand something, and the solution is just adding the buttons: [{ }] option. But that doesn’t work of course.

Looking at the jsfiddle and the url you provided i don’t understand how HighCharts is reading that file and how could it be used with the Meteor database.