scriptjs based loader breaks working

[suecom]

0.1.8 worked (jQuery based loader), 0.2.2 gives 'Table has no columns' (no user code changes).

The given datatable is identical, but replacing the contents of the GoogleChartLoader.js component with the jQuery version in 0.1.8 operation is restored.

My project is using React 15.1, jQuery 2.2.4, and is delivered as a single .js bundle using browserify, transform, babelify, and bundle. No errors on the browsers console.

[rakannimer]

Hello,

Could you please try again with version 1.0.0 ?
If it doesn't work please provide me with some code I can run to help you debug it.

[suecom]

Slightly different behaviour, the “Table has no column” has “Rendering Chart…” below it now:

Even worse, now exchanging the (entire) contents of GoogleChartLoader.js from 0.1.8 does NOT fix the problem. 1.0.0. is seriously broken :-(

BTW, did you know a react-google-chart (no ’s’) package exists in the npm repository (easily confused).

Sorry not to bring better news (reverting to 0.1.8)

Allister
ΠΟωaττ - saving more than you think
+44 77 29 175634
Visit The NoWatt Blog http://www.nowatt.com/blog.aspx
http://www.nowatt.com http://www.nowatt.com/

On 25 May 2016, at 12:32, Rakan Nimer notifications@github.com wrote:

Hello,

Could you please try again with version 1.0.0 ?
If it doesn't work please provide me with some code I can run to help you debug it.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub #46 (comment)

[rakannimer]

You can't just replace the google chart loader code. Please read the code
in the demo folder that is powering :
rakannimer.github.io/react-google-charts

On Wed, May 25, 2016, 9:24 PM suecom notifications@github.com wrote:

Slightly different behaviour, the “Table has no column” has “Rendering
Chart…” below it now:

Even worse, now exchanging the (entire) contents of GoogleChartLoader.js
from 0.1.8 does NOT fix the problem. 1.0.0. is seriously broken :-(

BTW, did you know a react-google-chart (no ’s’) package exists in the npm
repository (easily confused).

Sorry not to bring better news (reverting to 0.1.8)

Allister
ΠΟωaττ - saving more than you think
+44 77 29 175634
Visit The NoWatt Blog http://www.nowatt.com/blog.aspx
http://www.nowatt.com http://www.nowatt.com/

On 25 May 2016, at 12:32, Rakan Nimer notifications@github.com wrote:

Hello,

Could you please try again with version 1.0.0 ?
If it doesn't work please provide me with some code I can run to help
you debug it.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub <
#46 (comment)

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#46 (comment)

[suecom]

I can see why swapping the old loader in now doesn’t work; you switched to using bluebird promises - yuk :-) That is, the old loader returns the wrong sort of promise.

So, now I can’t get 1.0.0 to work at all (least with the old loader 0.2.2 worked). All I get is:

As mentioned, this code works fine with the 0.1.8 release.

The is very simplified skeleton:

var Chart = require('react-google-charts').Chart;

var ColChart = React.createClass({
populate: function(fromp, top, nodes)
// Set the DataTable up
...
// Load data
var l = 'used/' + this.props.userid + '/' + nodes[i].key +
'?from=' + fromx.format('YYYY-MM-DDTHH:mm:ss') + '&to=' + tox.format('YYYY-MM-DDTHH:mm:ss') +
'&resolution=' + resolution;

$.ajax({
      url: l,
      dataType: "json",
      cache: true
})
.done(function(col, data) {
   if(data.consumed.length > 0) {
      for(var j = 0; j < data.consumed.length; j++) {
        if(null != data.consumed[j].FromX && data.consumed[j].Used != -1000.00)     
            dt.addRow();
            dt.setValue(dt.getNumberOfRows()-1, 0, new Date(data.consumed[j].FromX));
            dt.setValue(dt.getNumberOfRows()-1, col, Number(data.consumed[j].Used));
          }
        }
      }
      this.setState({
        options: colchartoptions,
        data: dt
      })
    }
  }.bind(this)
}

},
getInitialState: function() {
var dt = new google.visualization.DataTable();

return {options: colchartoptions, data: dt};

},
componentWillReceiveProps: function(nextProps) {
this.populate(nextProps.fromx, nextProps.tox,
nextProps.nodes);
},
render: function() {
// The datatable looks great here!
return (

<Chart chartType={'ComboChart'}
data={this.state.data}
options={this.state.options}
graph_id={"col_chart_id"}
/>

);
}
});

This is all babelified and put in a single bundle.js file. I guess the usage of your package changed after 0.2.2. Unable to follow the demo - sorry

Thanks for any help,

Allister
ΠΟωaττ - saving more than you think
+44 77 29 175634
Visit The NoWatt Blog http://www.nowatt.com/blog.aspx
http://www.nowatt.com http://www.nowatt.com/

On 25 May 2016, at 20:29, Rakan Nimer notifications@github.com wrote:

You can't just replace the google chart loader code. Please read the code
in the demo folder that is powering :
rakannimer.github.io/react-google-charts

On Wed, May 25, 2016, 9:24 PM suecom notifications@github.com wrote:

Slightly different behaviour, the “Table has no column” has “Rendering
Chart…” below it now:

Even worse, now exchanging the (entire) contents of GoogleChartLoader.js
from 0.1.8 does NOT fix the problem. 1.0.0. is seriously broken :-(

BTW, did you know a react-google-chart (no ’s’) package exists in the npm
repository (easily confused).

Sorry not to bring better news (reverting to 0.1.8)

Allister
ΠΟωaττ - saving more than you think
+44 77 29 175634
Visit The NoWatt Blog http://www.nowatt.com/blog.aspx
http://www.nowatt.com http://www.nowatt.com/

On 25 May 2016, at 12:32, Rakan Nimer notifications@github.com wrote:

Hello,

Could you please try again with version 1.0.0 ?
If it doesn't work please provide me with some code I can run to help
you debug it.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub <
#46 (comment)

—
You are receiving this because you commented.

Reply to this email directly or view it on GitHub
#46 (comment)

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub #46 (comment)

[rakannimer]

Yeah the problem is that you're passing a Google Visualization API DataTable new google.visualization.DataTable()

If you check the documentation you'll see that you need to pass an array of arrays for the data prop. Or alternatively you can use the convenience rows and columns props.

Please read this to see examples of valid data to pass to the library.

Closing this issue.

[suecom]

I noticed your examples used that data format, but there was no mention of datatables no longer being supported (as they’re native to Googles visualisation!).

Why did you stop them? How can you do dashboards, filtering, roles, annotations, etc. without them? It greatly reduces the ease/flexibility of using Googles Charts :-(

Allister
ΠΟωaττ - saving more than you think
+44 77 29 175634
Visit The NoWatt Blog http://www.nowatt.com/blog.aspx
http://www.nowatt.com http://www.nowatt.com/

On 26 May 2016, at 10:19, Rakan Nimer notifications@github.com wrote:

Yeah the problem is that you're passing a Google Visualization API DataTable new google.visualization.DataTable()

If you check the documentation you'll see that you need to pass an array of arrays for the data prop. Or alternatively you can use the convenience rows and columns props.

Please read this https://github.com/RakanNimer/react-google-charts/blob/master/src/constants/SAMPLE_DATA.js to see examples of valid data to pass to the library.

Closing this issue.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub #46 (comment)