Adding a Meteor Chart to an existing Kinetic.JS app

Question

I'm building a game with kinetic.js and I want to display some line charts using Meteor Charts within it. The chart needs to scale with the game canvas and be positioned correctly. Can I embed the chart directly in an existing layer within the app?

Answer 1

You have several options:

1) layer the MeteorCharts visualization on top of the KineticJS stage like this

<div id="kineticjs-container"></div>
<div id="meteorcharts-container"></div>

2) if you don't need interactivity, you could convert the MeteorCharts data viz into a KineticJS image and then add it to your KineticJS layer like this

lineChart.stage.toImage({
    callback: function(img) {
        kineticLayer.add(new Kinetic.Image({
            image: img
        });
    }
);

3) if you need interactivity, you should also be able to move the MeteorCharts layers into your KineticJS stage, something like this:

lineChart.stage.getChildren().each(function(layer) {
    // remove the layer from the MeteorCharts KineticJS stage
    layer.remove();

    // add the layer to your own KineticJS stage
    kineticStage.add(layer);
});

I haven't tested this, but it should work. Whenever MeteorCharts updates its layers, it will actually be updating the layers on your stage since objects are modified by reference in JavaScript

Answer 2

I ended up copying the individual nodes from each Meteor layer to an existing group within my Kinetic.JS stage.

 var group = new Kinetic.Group();
 lineChart.stage.getChildren().each(function(layer, index) {
   layer.getChildren().each(function( node ) {
     group.add( node );
   });
 });

This results in the chart being positioned correctly however none of the events for interactivity work. Are the events attached to the Meteor Stage?