sir-dunxalot / ember-google-charts Goto Github PK

Receiving the following on Ember 2.5.0:

ember.debug.js:6249 DEPRECATION: When calling `Ember.warn` you must provide an `options` hash
as the third parameter.  `options` should include an `id` property.
[deprecation id: ember-debug.warn-options-missing]
See http://emberjs.com/deprecations/v2.x/#toc_ember-debug-function-options for more details.

which is in reference to this line:

Ember.warn('You did not specify a chart type', type);

I'd send a PR myself, but I'm unsure as to exactly what id to use in the options property.

currently my code looks roughly like this:

var dataTable = window.google.visualization.arrayToDataTable(data);

var fmt = new window.google.visualization.DateFormat({
    pattern: 'LLL d, yyyy',
});
fmt.format(dataTable, 0);

chart.draw(dataTable, options);

I would like to use this library, but it seems that the components expect the raw data instead of the dataTable and I have no chance of applying the DateFormat class after it gets converted by the lib.

How can I avoid an error "l.arrayToDataTable is not a function"? It occurs sometimes
when I load page with line-chart component. Chart isn't rendered

Given all the chart APIs are lazy loaded when the chart component is rendered, we can include all chart types as components without creating much overhead.

Is this of interest to people?

how to pass data from a json file?

route Js file:-

import Ember from 'ember':
export default Ember.Route.extend({
model(){
return Ember.$.get('/dashboardstore/employee-country.json');
}
});

template hbs file:

{{log model}}

<br>
<table style="border:1px solid black">
	<tr > 
		<th style="border:1px solid black">country</th><th style="border:1px solid black">Employee count</th>
	</tr>
	{{#each model as |item|}}
			  <tr >
			  		<td style="border:1px solid black">{{item.company_location}}</td>
			  		<td style="border:1px solid black">{{item.employee_count}}</td>
			  </tr>
	{{/each}}
</table>

{{outlet}}

json file i tried to use:

[{ "company_location": "Mexico", "employee_count": 60 }, { "company_location": "Russia", "employee_count": 343 }, { "company_location": "Poland", "employee_count": 491 }, { "company_location": "United Arab Emirates", "employee_count": 85 }, { "company_location": "Philippines", "employee_count": 310 }, { "company_location": "Yemen", "employee_count": 99 }, { "company_location": "Portugal", "employee_count": 466 }, { "company_location": "Greece", "employee_count": 437 }, { "company_location": "Colombia", "employee_count": 285 }, { "company_location": "Iran", "employee_count": 306 }]

how should be model defined in the Js file so that to get output in the template

Currently, data has to be passed into charts in the Google-required format.

It would be great if one could pass an Ember model into the chart components and specify the properties to chart.

This requires compatibility with promises to render/animate the charts when the data changes.

Following the example bar chart, the data is set in the router:

import Ember from 'ember';

export default Ember.Route.extend({

  model() {
    return [
      ['Element', 'Density', { role: 'style' }],
      ['Copper', 8.94, '#b87333'],
      ['Silver', 10.49, 'silver'],
      ['Gold', 19.30, 'gold'],
      ['Platinum', 21.45, 'color: #e5e4e2'],
    ];
  },

});

Then it is passed into the bar-chart component

{{bar-chart data=model options=options}}

However, the colors are not coming through on the bar chart. Also, when I tried adding annotation data by adding a { role: 'annotation' }, it similarly is not coming through.

Thoughts?

render-classic-chart currently looks up the visualization using ${capitalizedType}Chart. This does not work for charts whose visualization does not follow this naming schema such as the timeline.

Dependency checker in [email protected] is using [email protected] and causing deprecation warning:
Deprectaion warning
An addon is trying to access project.nodeModulesPath. This is not a reliable way to discover npm modules. Instead, consider doing: require("resolve").sync(something, { basedir: project.root }).

Per @rwjblue addons should update to "ember-cli-version-check": ^2.0.0. See: ember-cli/ember-cli-version-checker#48 (comment)

Does this repo have support for creating your own custom handlers for specific events? The ones I'm most interested in are onmouseover and onmouseout as detailed in the Interacting With the Chart section of the Google docs.

I was hoping to be able to define a custom event very similar to how the React Google Charts library does it.

Wouldn't it be much easier if you could do charts easily out of store.query without needing format data as array of arrays.. I mean if data could be given also in format

[ {type: "work": amount: 12}, {...} ]

One is 1.2.0 whilst the other is 0.1.2.

I am probably doing something incorrect here, but maybe you could help? Crosshairs don't seem to be working for me:

Data:

const lineChart = [
	['Year', 'Sales'],
	['2004', 1000],
        ['2005', 1170],
	['2006', 660],
	['2007', 1030],
];

Options:

const lineOptions = {
	'crosshair': {
	'color': '#000',
		'trigger': 'selection'
	},
	'title': 'Average',
	'height': 500,
	'legend': {
		'position': 'none'
	},
	'colors': ['#00C0F4']
};

Again, I am probably doing something incorrect, but any help would be nice. Thank you!

We need to update the dummy app for #14 and #15. This is because the dummy app is built and hosted on the gh-pages branch and provides documentation for users.

Hi, I've noticed that this isn't rendering on the ember-google-charts geochart page either;
http://sir-dunxalot.github.io/ember-google-charts/chart-types/geo
Is this an issue that needs resolving or is it just something I'm missing?
Thanks,
Jo

Thank you very much for the addon. Do you consider to implement also component form column chart (https://developers.google.com/chart/interactive/docs/gallery/columnchart)? I know that it is similar to a bar chart with changed orientation but the column chart has different options, for instance slantedText (displays labels at an angle http://jsfiddle.net/56cjL9me/).

I also know it is possible to make a custom chart but I would say it would be pretty useful to have it "ready to use" as a component.

If I override the GoogleChartComponent to add default options:

import GoogleChart from 'ember-google-charts/components/google-chart';

export default GoogleChart.extend({
  defaultOptions: {
    legend: {
      position: 'none',
    },
  },
});

I would expect all chart types to inherit these options. However when I add a chart type component to my template:

{{pie-chart data=model}}

it does not inherit the options. In the example above, I would expect the pie chart to not have a legend, but the actual result renders a legend to the right of the chart.

I'm trying to make an area chart by using: {{area-chart data=myData}}

'myData' is an Ember computed property tied to several other properties. When 'myData' changes, I thought the chart was going to automatically update; it does not. Do I need to set some option explicitly to make this happen?

I recently upgraded this addon to 1.8.1 in my app and it started giving me this error everytime I resized the window:

backburner.js:389 Uncaught Error: You attempted to schedule an action in a queue (actions) for a method that doesn't exist
    at DeferredActionQueues.schedule (backburner.js:389)
    at Backburner._scheduleExpiredTimers (backburner.js:1122)
    at Backburner._runExpiredTimers (backburner.js:1095)

Debugging, I found out this error was triggered by the call to debounce within _handleResize, which is being added as event listener to the 'resize' event on window. When the event is triggered, the handler is called with window as this, so this._handlingResize is undefined and that gives the error above.

I have a rather complex app that can have several Google charts on a single page. But often, I see this in my console:

My app is rather complex, so I'm not sure how much code I would need to post for you to get a good idea of what's going on, nor am I sure I can pare my app down to a reproducible snippet, so what I'm asking is, can you think of any general reasons why this would occur? Or at least, is there a way to debug this to find the source of (most likely) my mistake? I'm currently on 1.5.0.

Hey there,

I tried to install ember-google-charts in a fresh ember app, and ran into a dependency issue with the ember-try-config package:

$ ember install ember-google-charts                          
Cannot find module 'ember-try-config'
Error: Cannot find module 'ember-try-config'
    at Function.Module._resolveFilename (module.js:325:15)
    at Function.Module._load (module.js:276:25)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/me/dev/frontend/node_modules/ember-cli/node_modules/ember-try/lib/utils/config.js:7:34)
    at Module._compile (module.js:397:26)
    at Object.Module._extensions..js (module.js:404:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)

I was able to install ember-google-charts by doing the following:

$ npm install ember-try-config
(...snip...)
$ ember install ember-google-charts

My current setup is:

• ember-cli 2.6.1
• npm 5.4.1

Anyways, not too big of a deal, and not sure if you guys know about this, but hopefully its saves someone else a few minutes. 🍻

Hi, since I've installed "ember-cli": "~3.10.1" and "ember-google-charts": "^1.7.0" and getting this error:
jQuery.Deferred exception: googlePackage is undefined renderChart
render-chart.js:18
In my component I use pie-chart:
{{pie-chart data=dailyStatus options=dailyStatusOptions responsiveResize=true}}
Do I need to update my component too, please? Maybe some more imports. But I get the same error when downloading the package and run tests/dummy (which runs Ember 3.3.2)
Thank you very much for your great package.

Now that there are a more than a couple of properties that can be passed into chart components and services, the documentation should be standardized to make it easier for a dev to understand what options can be set where with this addon.

The Gantt chart type cannot be rendered by the Material renderer so if you take the "example" code and think it will work you will get very frustrated.

The example should probably be changed to show the classic renderer and perhaps even provide a link to a place to find the list of which charts are available in the material renderer. Unfortunately that only seems available in the Release Notes by searching for 'material'.

Hi,

This module is great, but I can't use it inside with data is fulfilled after the model is ready.

I have a page that allows users to render a data set with different chart types.

{{#if showCharts}}
    <center>
        {{#if chartOptions.bar}}
            {{bar-chart data=dataForCharts.data options=dataForCharts.options}}
        {{/if}}
        {{#if chartOptions.pie}}
            {{pie-chart data=dataForCharts.data options=dataForCharts.options}}
        {{/if}}
        {{#if chartOptions.geo}}
            {{geo-chart data=dataForCharts.data options=dataForCharts.options}}
        {{/if}}
    </center>
{{/if}}

This is contained within' a larger tab selection that changes the data sent to the charts.

When the larger tab selection is changed I hide the charts showCharts then update dataForCharts and show the charts again. I do it this way so the chart component fires the destroy event and the chart can be broken down. This works great in every browser but IE11. In IE11 I get text that says Object doesn't support property or method 'contains'.

I know this has something to do with chart instances being destroyed and recreated. The suggested solution is to reuse the same chart instance, I don't see how that's a option using ember-google-charts unless I rewrite large parts of it. Any suggestions?

This addon is still using ember-cli-babel@5, which is now deprecated.
Would a pr upgrading that and other dependencies be desired?

DidRender event is fired for all charts except Geo.

When the window resizes, use chart.draw() the change the size and make the graphs responsive.

Responsiveness should probably be an optional feature that defaults to true.