Numtel:mysql and webix:webix

help
1

Firstly, thanks to both @numtel and @dandv for putting me onto your respective entries / news on Github.

I’ll try to explain this the best I can, being a newbie :smile:

I have a Mysql database that I need to report on, and Webix looks really good for what I need.

However, using @numtel (Ben’s) mysql package, I had to do this to set the data: parameter of the webix piechart:

ubr = collection of the users_by_region table, set by:

ubr = new MysqlSubscription(“ubr”);
which is:

    Meteor.publish('ubr', function(){
          return liveDb.select(
        "SELECT * from users_by_region order by the_count desc limit 0,5",
        [ { table: 'users_by_region' } ]
      );
    });

And then I have this in Meteor.dashboard.onRendered

    ubr.depend();
    ubrJson = "";
    ubr.forEach( function( item ) {
        // console.log(JSON.stringify(item));
        if ( ubrJson.length > 0) {
            ubrJson += ',';
        }
        ubrJson += JSON.stringify(item);
    });

    ubrJson = "[" + ubrJson + "]";
    console.log(ubrJson);

And the ubrJson variable seems to work ok when I do:

    var piechart = {
        view: 'chart',
        type: 'pie',
        value: '#the_count#',
        label: '#region_code#',
        // data: [{region_code:"KZ",the_count:10},{region_code:"RU",the_count:5}],
        data: ubrJson
    }

And then, I use the piechart object here:

webixContainer = webix.ui({
        container: 'webix-container',
        view: 'layout',
        rows: [
            {
                cols: [ piechart ]
            }
        ]

    });

And this works - sometimes…

If I set the data: to the ubrJson object, my pie chart is blank, most of the time.
Sometimes it works, but not all the time.

If I set the data: to the string:
[{region_code:“KZ”,the_count:10},{region_code:“RU”,the_count:5}]

the webix chart component renders every time.

@numtel - is it possible to update your mysql package to return the same result set as a normal MongoDB collection? One of the params to the Webix piechart is this:

url: webix.proxy(‘meteor’,ubr)

which takes a normal Meteor MongoDB collection (in my case, the “ubr” collection)

I’ve not yet tried to replicate this with a MongoDB collection, but I will do that tomorrow and reply back here with my findings.

Sorry if this seems an odd post, but I’m at a loss as to how to get this working, every single time. I see the chart sometimes (< oh, 5%).

And while I can do:

{{#each ubr}}
    <span>{{region_code}} - {{the_count}}</span></br>
{{/each}}

in my template (which shows me that the ubr collection is definitely filled with data) why does the ubr collection, when I want to reference it to populate the Webix piechart, have nothing in it?

My apologies to the community for singling out one (or two) developers, but I would really like to get this resolved.

Thanks, and apologies in advance for my newbie-ness.

2

Caveat: I’ve not used webix (it does look good). I have used numtel:mysql and rendered gauge data with tunguska:gauge, so our use cases may be similar. I assume you will want to reactively re-render the chart if the data changes?

This is what I would do (based on my working code applied to your example).

ubr = new MysqlSubscription("ubr");

In Template.dashboard.onRendered:

Template.dashboard.OnRendered(function() {
  var self = this;
  self.subscribe('ubr', function() {
    self.autorun(function() {
      ubrJson = "";
      ubr.find().forEach(function(item) {
        if (ubrJson.length > 0) {
          ubrJson += ',';
        }
        ubrJson += JSON.stringify(item);
        ubrJson = "[" + ubrJson + "]";

        var piechart = {
          view: 'chart',
          type: 'pie',
          value: '#the_count#',
          label: '#region_code#',
          data: ubrJson
        }
        webixContainer = webix.ui({
          container: 'webix-container',
          view: 'layout',
          rows: [{
            cols: [piechart]
          }]
        });
      });
    });
  });
});

As I say, I don’t know webix and that may not be the right place for the chart instantiation code (webixContainer = webix.ui( ...), but it’s essentially where I would put the code to (re)render a gauge.

EDIT: sorry, I missed some code in the translation and seem to have forgotten to explain what I think is going on in your code and why this fixes it.

Basically, you have a “one shot” onRendered method. It fires, runs the code and stops. That’s it. If your data’s ready you see it, if not, you don’t.

What I do here, with self.autorun is force a reactive recomputation each time the data changes (which includes a change from not available to available).

3

It looks like the meteor Webix proxy does only support Mongo collections.

Because numtel:mysql's subscriptions are more like arrays, you will probably want to write a custom proxy or custom handler for the built-in cache proxy.

http://docs.webix.com/desktop__server_proxy.html#usingmethodsofbuiltinproxyobjects

I’ve never used webix so that’s about all I can tell you without building an app with it myself. Extending numtel:mysql to make the output as a Mongo collection is not something that I would do but there is no reason why a separate package couldn’t be created that would convert a MysqlSubscription into a Minimongo collection that could be used with the meteor proxy in @dandv’s package.

4

Thanks guys!

I got it to work with your self.autorun code @robfallows !! Brilliant - thank you.

As you pointed out, it may not be the best place to put the chart instantiation code, but for this app, that’s good enough for me. :smile: