Is there any way to make chart realtime?

[radiegtya]

Hi There,

Is there any way to make chart realtime? Because I am trying everything and the chart not working real time.

Any idea? thanks

[MaazAli]

@radiegtya Have you tried updating the data in the object you are passing? Highcharts has it's own api for updating points on the graph using ajax calls. You should look into that?

[radiegtya]

I don't think ajax is the solution. But if you have example about using it, I am very grateful.

Thanks, Ega

[MaazAli]

Have you tried updating the object you are passing?

[radiegtya]

yes I did and still not working. the data is reactive but the highchart not reactive.

[FickleLife]

Unfortunately not reactive here either....

[MaazAli]

You guys could try doing this without using the helper and see if you can get anywhere.

[radzhome]

I ran into the same problem. If there was some way to destroy the object and re-draw it that would work. Here is my repo if you want to see the implementation: https://github.com/radlws/meteor-ratings-app

[jhuenges]

In an old project I achieved reactivity in the following way:

function builtChart() {

    var data = new Array();
    var countLvl0 = Question.find({level: 0}).count();
    var countLvl1 = Question.find({level: 1}).count();
    var countLvl2 = Question.find({level: 2}).count();

    data.push({
        name: 'Level 0',
        y: countLvl0,
        color: '#5cb85c'
    });

    data.push({
        name: 'Level 1',
        y: countLvl1,
        color: '#f0ad4e'
    });

    data.push({
        name: 'Level 2',
        y: countLvl2,
        color: '#d9534f'
    });

    $('#adminChartLevel').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: ''
        },
        credits: {
            enabled: false
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: false
                },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Anteil',
            data: data
        }]
    });
}

Template.adminChartLevel.helpers({

});

Template.adminChartLevel.rendered = function() {    
    this.autorun(function (c) {
        builtChart();
    });
}

I don`t know if this still works, so feedback would be great.

[radzhome]

Cool, what did your template look like?

[jhuenges]

I only had a <div id="adminChartLevel"></div> to draw the chart into. But I used my own implementation of Highcharts. I dont know if this still works with this package and the helper it provides (yet!). I ll look into it at the weekend.

Oh and maybe it would be useful to stop the autorun at some point.

[radzhome]

Yeah thats probably the way to do it then, instead of using that helper..

On Mon, Oct 27, 2014 at 8:43 AM, jhuenges notifications@github.com wrote:

I only had a

to draw the chart into. But I used my own implementation of Highcharts. I dont know if this still works with this package and the helper it provides (yet!). I ll look into it at the weekend.

— Reply to this email directly or view it on GitHub https://github.com/MaazAli/Meteor-HighCharts/issues/3#issuecomment-60586648 .

[jhuenges]

I had some ideas if this doesn`t work. I ll make pull request for #1 and test it. If it works, I ll deliver a short example

[jhuenges]

Seems to work. My pull request is on its way. I ll upload a demo when its accepted and published

[jhuenges]

Examples

To show reactivity I used a session variable, but I m sure it will work with collections.

[MaazAli]

I'm closing the issue, but discussion can still continue.

[MaazAli]

Refer to the solution in this issue for anyone having trouble getting it to work with collections: https://github.com/MaazAli/Meteor-HighCharts/issues/9