Bind collection data with chart data

[mitulgolakiya]

Hi,

I am a newbie to meteor and I just want to know is there any way to bind collection data with chart data ?

I tried something like this, chart is rendered fine first time, but chart is not updated realtime when data is inserted into collection.

<template name="home">
    <button class="btn btn-primary">Insert</button>
    {{> highchartsHelper chartId="test" chartWidth="100%" charHeight="100%" chartObject=testPieChart}}
</template>

if(Meteor.isClient)
{
    Template.home.helpers({
        testPieChart: function () {
            return {
                chart: {
                    plotBackgroundColor: null,
                    plotBorderWidth: null,
                    plotShadow: false
                },
                title: {
                    text: "Test Pie Chart"
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        dataLabels: {
                            enabled: true,
                            style: {
                                color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                            },
                            connectorColor: 'silver'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'genre',
                    data: Categories.find({}).fetch()
                }]
            };
        }
    });

    Template.home.events({
        'click .btn-primary': function () {
            console.log(this.categories);
            console.log("inserting task");
            Categories.insert({
                name: "Category",
                y: 24,
                color: "#ddddd"
            });
        }
    });
}

[MaazAli]

If you've already got a reactive data source, then most of the time all you really need to do is throw that into an autorun and have it re-render for you whenever the underlying data changes. Take a look at this part of the documentation that explains it a bit further: http://docs.meteor.com/#/basic/Tracker-autorun.

You also want to take a look at the examples provided here: http://highcharts-demo.meteor.com/ and their source here: https://github.com/jhuenges/highcharts-demo/tree/master/client/demos

More specifically, you want to look at this .js file: https://github.com/jhuenges/highcharts-demo/blob/master/client/demos/gaugeReactiveDemo.js

[mitulgolakiya]

Thanks, I solved the problem and made it real time.

Here is the code. I am not sure, I did it in best way, but I accomplished it.

<template name="home">
    <button class="btn btn-primary">Insert</button>
    <div id="pieChart" style="width: 100%; height: 100%">
    </div>
</template>

function buildPie() {
    return new Highcharts.Chart({
        chart: {
            renderTo: 'pieChart',
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: "Test Pie Chart"
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    },
                    connectorColor: 'silver'
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'genre',
            data: Categories.find().fetch()
        }]
    });
}

if(Meteor.isClient)
{
    Template.home.helpers({
        currUserName: function () {
            return Meteor.user().profile.firstName + " " + Meteor.user().profile.lastName;
        }
    });
    Template.home.rendered = function () {
        var chart = buildPie();
        this.autorun(function () {
            chart.series[0].setData(Categories.find({}).fetch());
        });
    };
    Template.home.events({
        'click .btn-primary': function () {
            Categories.insert({
                name: "Category",
                y: 24,
                color: "#ddddd"
            });
        }
    });
}

Once again, Thanks :)

[MaazAli]

Glad you got it working.

[jhuenges]

Thats actually a pretty nice way.

[VeilleurTrytoFix]

@MaazAli can you host your app ? i'm trying to use meteor + mongodb collection + hightchart and I can not find a valid example ::/

Thanks in advance

[jhuenges]

@keepthefaya what app do you mean? The readme mentions a set of demos. But since meteor stopped there free hosting the site is down. So for now there is only the source code available.

As a side note, I ll get to your app on friday :)

[VeilleurTrytoFix]

trying to use: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/dynamic-update/

meteor + higthcharts :$

data from mongodb collections

json data example

{ "_id" : "mu85zXyG2eA5d8ue5", "name" : "buyhistory", "createdAt" : ISODate("2016-04-05T15:38:05.640Z"), "volume" : [ "1041" ], "avg" : [ "804539361.10" ], "max" : [ "1048100000.00" ], "min" : [ "2300000.00" ], "ddev" : null, "median" : [ "1007005000.18" ], "percentile" : [ "1047882428.57" ] }