ahmadsoe / ember-highcharts Goto Github PK
View Code? Open in Web Editor NEWA Highcharts, HighStock and HighMaps component for ember cli
Home Page: https://ahmadsoe.github.io/ember-highcharts/
License: MIT License
A Highcharts, HighStock and HighMaps component for ember cli
Home Page: https://ahmadsoe.github.io/ember-highcharts/
License: MIT License
https://github.com/ahmadsoe/ember-highcharts/blob/master/addon/components/high-charts.js#L57
Should add line
var toRemove chart.series.length - this.get('content').length
while (toRemove > 0) {
chart.series[chart.series.length-1].remove(); //smth line this
toRemove -= 1;
}
Maybe highchart already have method for this.
I think it would be beneficial if we added blueprints to help with sub-classing the default high-charts component (e.g., if I wanted to create a re-usable pie-chart component). It could be something like:
ember generate chart pie-chart
Thoughts? If it seems like a good idea, I'll create a PR for the feature.
Hey highchart ninjas,
Thanks again for help me last time!
This time, I might found a bug:
For highmaps, if you only put series to highchart component (as how you use highchart) using content=<your content>
, it doesn't work. It only works if you put it inside chartConfig
(as how you use a pure js highchart) for the init one-time render.
However another problem comes when data is dynamic, reason is the changing of chartConfig
file doesn't trigger highmap's re-render, Thus you have to also put the content into content=<your content>
.
Conclusion: by putting chart data in both places (content
and chartConfig
), your dynamic map will fully works.
I suspect this is a bug. Any ideas?
Thanks!
I feel bad to bother you with my beginner question, but I badly need to have your awesome ember-highcharts to be dynamically updated. Maybe my question will help others.
I update to the version 1.3 with the command: ember installs ember-highcharts
I created a component: ember g component dynamic-high-charts
In the component, I pasted:
import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
export default EmberHighChartsComponent.extend({
contentDidChange: Ember.observer('[email protected]', function() {
// add redraw logic here. ex:
var chart = this.get('chart');
var seriesName = this.get('content')[0].name;
chart.series[0].update({ name: seriesName, data: this.get('content')[0].data }, false);
//chart.setTitle(null, { text: seriesName }, false);
chart.redraw();
})
});
In a "parent" component template I put:
{{dynamic-high-charts content=radialChartData chartOptions=radialChartOptions}}
However, when I run my app I got this error: Uncaught TypeError: Cannot read property 'series' of null.
The error is caused because this.get('chart');
return Null. Now, if I understand this right, by extending EmberHighChartsComponent, the dynamic-high-charts component should have access to the object "chart"? But it seems not. What's wrong with my approach?
Hi,
I need to have about 8 different solid gauge charts on a page to display various pieces of data. I have created a service to store the default options for the chart then added a method to that service that accepts the unique data pertaining to each gauge, overwrites the copy of the default options and returns the new array of chart options. This data that is overwritten is the yAxis.title.text, yAxis.min, and yAxis.max.
Then I made a component called gauge-chart that is given the chartOptions array and also the value for the gauge. My plan is to add an .on('init') method in the components/gauge-chart.js to take the value and add it to the chartData array and update the chart.
My problem is that each chart is using 1 title. it seems to be whichever chartOptions is set last in the controller.
Am I completely missing how to have multiple charts on a page and keep them updated when data values change?
I thought I would ask the authors of this addon before scrapping and trying a different chart addon.
Thanks for the addon and any help you can give!
First thanks for the repo this addon is very nice to work with. In my app I had need for the solid gauge which isn't included in your module.
I made some adjustments and was able to get in in my app and working would you be willing / interested in me doing a PR to add this module to your repo or which you prefer that I forked the repo and just published my own NPM addon for the app I'm working with?
I have this error using the default setup as provided in this repo
highmaps.src.js:995 Uncaught TypeError: Highcharts[constr] is not a function
I use the ember packages below and I get the error #16. I use only HighCharts, not HighStock or HighMaps.
I also tried this settings but it does not work:
emberHighCharts: {
includeHighCharts: true,
includeHighStock: false
}
"broccoli-asset-rev": "^2.4.5",
"ember-ajax": "^2.4.1",
"ember-cli": "2.11.1",
"ember-cli-app-version": "^2.0.0",
"ember-cli-babel": "^5.1.7",
"ember-cli-dependency-checker": "^1.3.0",
"ember-cli-htmlbars": "^1.1.1",
"ember-cli-htmlbars-inline-precompile": "^0.3.6",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-jshint": "^2.0.1",
"ember-cli-qunit": "^3.0.1",
"ember-cli-release": "^0.2.9",
"ember-cli-shims": "^1.0.2",
"ember-cli-sri": "^2.1.0",
"ember-cli-test-loader": "^1.1.0",
"ember-cli-uglify": "^1.2.0",
"ember-data": "^2.11.0",
"ember-export-application-global": "^1.0.5",
"ember-highcharts": "0.5.2",
"ember-load-initializers": "^0.6.0",
"ember-resolver": "^2.0.3",
"ember-source": "~2.11.0",
"ember-welcome-page": "^2.0.2",
"highcharts": "^5.0.7",
"loader.js": "^4.0.10"
Additional test coverage for the different chart modes, making sure each can handle several different changes in data.
Need to check for a chart before calling destroy. Otherwise we can get the following error:
Uncaught TypeError: Cannot read property 'destroy' of null
The
ember-highcharts
addon could not be found at<project_path>/node_modules/ember-highcharts
.
To reproduce:
ember-highcharts
entry from package.json
.ember-highcharts
subfolder from the node_modules
folder.npm cache clean
.npm install --save-dev ember-highcharts
, which would install version 0.0.7
as of 2015-03-11.ember s
.You'll see the error and Ember will not start.
I can see that node_modules/ember-highcharts
lacks an index.js
.
At the same time, when i use 0.0.5
or git://github.com/lolmaus/ember-highcharts.git
(my fork for #9) as ember-highcharts
version, Ember runs fine.
Hi seems like this.container to getOwner change has not made it to version 0.3.0. Installing the addon still gives me the old code.
Highcharts gives error when you import highcharts-3d before boost module (http://jsfiddle.net/bq4cjxsb/)
To be able to use both features please import boost module before highcharts3d
Uncaught TypeError: Parent is not a function
I tried many combinations of config but did not work.
Currently using this config:
emberHighCharts: {
includeHighCharts: true,
includeModules: ['solid-gauge']
}
Let me preface this by saying I'm still quite new to Ember, though I have prior experience with HighCharts, so this may seem like an easy question to solve (it may not even be specific to HighCharts). I was able to get the example code working just fine. Now I am trying to figure out the best approach to what I'm trying to do.
I have a bunch of chart data. When the page first renders, there won't be any charts rendered. I want to render a chart based on the user's selection (eg. from a dropdown or elsewhere on the page). I don't need to go back and load more data; the data is already loaded. How should I extend high-charts to render a new chart based on what's selected?
In other words, I basically want
{{my-high-charts allChartData=allChartData selectedChart=selectedChart chartOptions=chartOptions}}
Where initially the bound property selectedChart
is null. When selectedChart
is updated, I'll know what data in allChartData
to use, and then I can instantiate a HighCharts. And if selectedChart
changes again, it replaces the old chart either by updating it or destroying/recreating the chart (whichever makes more sense). So what is the best way to go about this?
The software that this plugin depends on isnt free (not in all cases). There should be some mention of this in a licensing section on the README.
I updated my ember-cli to 0.2.0 and tried to reinstall highcharts 0.1.0 but got the following error when running ember server. My ember-cli app path is /Users/hiyang/me-share/test-app.
ENOENT, no such file or directory '/Users/hiyang/me-share/test-app/node_modules/ember-highcharts/bower_components/'
Error: ENOENT, no such file or directory '/Users/hiyang/me-share/test-app/node_modules/ember-highcharts/bower_components/'
at Error (native)
at Object.fs.readdirSync (fs.js:765:18)
at /Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:32:21
at Array.map (native)
at mergeRelativePath (/Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:30:29)
at /Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/broccoli-merge-trees/index.js:23:5
at lib$rsvp$$internal$$tryCatch (/Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (/Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:501:17)
at lib$rsvp$$internal$$publish (/Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:472:11)
at lib$rsvp$asap$$flush (/Users/hiyang/me-share/test-app/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1290:9)
I installed by using "ember install:addon ember-highcharts", any ideas of how to resolve this?
@ahmadsoe I think we should cut a new release of this addon. Perhaps we should bump the version to 0.4.0 since moving the highcharts dependency to npm is a major change.
Let me know your thoughts.
Setting the drilldown data inside a chart component directly (like in the test/dummy app) works, but if the drilldown property is set from outside (e.g. data loaded from the server) clicking on the column does not drill down to show the detailed data.
still using old babel https://github.com/ahmadsoe/ember-highcharts/blob/v0.1.3/package.json although master is correct
Are there any plans to add highcharts 5 support in the near future? Some tests still seem to fail when using highcharts 5.0.0 instead of 4.2.7.
Hello ember ninjas,
Recently I am trying to show highmaps in the a ember page which already has multiple highcharts. However after setting up the ember-cli-build.js according to the official guide. like(enabling highcharts and highmaps at the same time):
emberHighCharts: { includeHighCharts: true, includeHighMaps: true }
I got error in the browser console(latest chrome) says:
highmaps.src.js:115Uncaught Error: Highcharts error #16: www.highcharts.com/errors/16
loader.js:171 Uncaught Error: Could not find module "ember-resolver" imported from "my-app/resolver"
My versions: highcharts: 4.2.1, ember-cli: 2.3.0, ember: ~2.3.1, ember-highcharts: 0.4.3
Any ideas? Thank you so much!
Additional Clue
If you set includeHighCharts: false, includeHighMaps: true
, it displays something.
PS: How to reproduce:
ember new my-app
to create an empty projectember install ember-highcharts
{{high-charts mode='Map' content=chartData chartOptions=chartOptions}}
Since Highcharts is now available on NPM, we could import Highcharts source from node_modules
instead of bundling sources on vendor directory.
Do you have a useable example using ember-cli? It would be nice to see how this plugs in exactly as I have just spent 2 hours attempting to do just that with no progress.
This repository is compatible with ember 2.5.x? I ask this because I saw the documentation example Bar Chart and there exemplifies the use of a controller. I must use the controller or component to generate the graphics? I do not know if I was clear on the question ... anyway, thank you.
This is just a thought, but are most of the default options really needed? I think stuff like setting the timezoneOffset and turning credits off are useful, but all the color options and font-related things are a bit thematic and should be the responsibility of the user and not the add-on.
By leaving them in, we also increase file-weight and a good portion of which has the potential of being overwritten by the user.
Plus, Highcharts looks pretty good with few options passed in.
I'm thinking of submitting a PR to reduce the number of default styles and probably move them to a separate (and optional) theme file. Thoughts?
It looks like the default height for highcharts is 400px, http://api.highcharts.com/highcharts#chart.height, but I'd like to specify different heights. {{high-charts data=data options=options height=200}}
. Is there another way to do this?
The highcharts-more.js file is required for rendering certain chart types like the waterfall chart: http://www.highcharts.com/demo/waterfall. Here's the highcharts download page that shows this highcharts-more.js file: http://code.highcharts.com/
Would you be open to adding an additional config option for this? Ex:
var app = new EmberApp({
emberHighCharts: {
includeHighCharts: false,
// new config option
includeHighChartsMore: true,
includeHighStock: true,
includeHighMaps: false
}
});
If so, I can send a PR to add this includeHighChartsMore
option.
I tried to create a solid gauge:
Added the solidgauge option to ember-cli-build.js:
var app = new EmberApp(defaults, {
// Add options here
emberHighCharts: {
includeHighCharts: false,
includeHighStock: true,
includeHighMaps: false,
includeHighChartsMore: true,
includeHighCharts3D: false,
includeModules: ['solid-gauge', 'canvas-tools']
}
});
Added a controller with code from highcharts solid gauge example:
import Ember from 'ember';
import defaultTheme from '../themes/default-theme';
export default Ember.Controller.extend({
chartMode: 'StockChart', // Available options: a falsy value, 'StockChart', 'Map'.
// If mode
is not provided or is a falsy value, the chart is initialized in Charts mode.
// If mode
is a string, it is passed to Highcharts as the first argument.
// When Highcharts introduces a new mode, you will be able to use it here right away.
chartOptions: {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickPixelInterval: 400,
tickWidth: 0,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
},
theme: defaultTheme
}
});
but am getting:
Uncaught Highcharts error #16: www.highcharts.com/errors/16error @ highstock.src.js:701(anonymous function) @ highstock.src.js:108(anonymous function) @ highstock.src.js:23760
loader.js:110
Uncaught Error: Could not find module ember-cli-app-version/initializer-factory
imported from dali-gauge/initializers/app-version
It is probably a configuration issue but the documentation covers only the simplest charts and the error code is not explicit enough to help.
I am happy to contribute a solution with a little guidance.
Thanks
Chris
It would be amazing if this Ember-CLI addon included Highmaps too. Are there any plans to include maps? Thanks!
It seems no public API to change the default global theme, like color, font. Or do I miss anything?
I'm still debugging but maybe someone has a clue already. I upgraded to ember-cli 0.1.15 and ran ember install:addon ember-highcharts
Afterwards I tried to build
the project which fails. Without ember-highcharts everything works fine.
$ ember build
version: 0.1.15
Could not find watchman, falling back to NodeWatcher for file system events
Build failed.
File: ember-highcharts/components/high-charts
Unexpected token (6:5)
SyntaxError: Unexpected token (6:5)
at raise (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:333:15)
at unexpected (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:1366:5)
at parseIdent (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:2471:7)
at parsePropertyName (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:2250:78)
at parseObj (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:2225:9)
at parseExprAtom (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:2136:14)
at parseVar (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:1875:57)
at parseVarStatement (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:1763:5)
at parseStatement (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:1569:47)
at parseTopLevel (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:1526:18)
at Object.exports.parse (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/node_modules/acorn/acorn.js:48:12)
at getStandaloneModule (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/dist/esperanto.js:503:14)
at Class.toFormat (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/esperanto/dist/esperanto.js:2538:9)
at Class.module.exports.CachingWriter.extend._transpileThroughCache (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/index.js:230:22)
at Class.module.exports.CachingWriter.extend._handleFile (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/index.js:202:22)
at Class.<anonymous> (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/index.js:185:16)
at Array.forEach (native)
at Class.module.exports.CachingWriter.extend._updateEachFile (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/index.js:183:8)
at Class.module.exports.CachingWriter.extend.updateCache (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/index.js:141:74)
at /home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/broccoli-es6modules/node_modules/broccoli-caching-writer/index.js:92:34
at lib$rsvp$$internal$$tryCatch (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:489:16)
at lib$rsvp$$internal$$invokeCallback (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:501:17)
at lib$rsvp$$internal$$publish (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:472:11)
at Object.lib$rsvp$asap$$flush [as _onImmediate] (/home/mike/projects/remerge/ui/node_modules/ember-cli/node_modules/promise-map-series/node_modules/rsvp/dist/rsvp.js:1290:9)
at processImmediate [as _immediateCallback] (timers.js:345:15)
@ahmadsoe , I wonder if there is a convenient way for end-user to attach callback functions? If not, it's potentially can be done by extending the current 'options' with a callback parameter like this
In the draw() function:
let options = [ get(this, 'buildOptions'), get(this, 'callbacks') ];
We could rename 'options' here accordingly.
If you think this is a good approach, I will submit a PR for it.
I tried extending the high-charts component to make a dynamic version like the example, but when I try to use it I get the error "Cannot read property high-charts of undefined". I copy-pasted the example dynamic-high-charts component exactly. This is ember 2.8
I am new to this component and just trying it out. My understanding is that after running:
ember install:addon ember-highcharts
I should have a themes folder, however there is none. As such importing the theme in a controller fails with the error 'could not find module ../themes/default-theme.
Hi, when I tried to use highcharts export modules, it is not compatible under StockChart. In order to fix, we need to selectively import modules either from highcharts-release or highstock-release based on whether includeHighStock is enabled--Highstock version 2.1.10 now comes with its own modules folder.
Thanks!
I'm new to ember-highcharts
. I'm guessing whether the code snippet in buildOptions
property of high-charts
component is necessary or not?
let chartContent = get(this, 'content.length') ? get(this, 'content') : [{
id: 'noData',
data: 0,
color: '#aaaaaa'
}];
When the content
is empty, we will automatically add a fake
series. However if we don't include the no-data-to-display
module of high-charts
library, the chart wouldn't show the options.lang.noData
message anyhow, even we added a 'fake' series. On the other side, if we included the no-data-to-display
module, we don't have to to the same thing neither because that module will automatically add one too.
Another big difference between the above solution and no-data-display
module is that, I can't hide the x-axis and y-axis anyhow, even I set options.plotOptions.yAxis/xAxis.showEmpty
to false
, however if we remove the above code and use no-data-display
module, the x-axis and y-axis will disappear and only a clear noData
message is visible.
Is it possible to evaluate the two solutions? and do we have a solution to only show noData
message without x-axis and y-axis?
Currently ember-highcharts doesn't seem to have a way of updating in response to any change in chart options. We're sorting our data on the client side and would like to update the labels correspondingly. When we change the chart options content, for instance the axis labels, they don't update. If I drill down to the component via Ember Inspector and call .draw() on the component after the labels are updated, the new labels are drawn.
Given that chartOptions are usually a quite complex nested object, implementing observers on all properties is probably out. Do you think passing in a flag to the component that calls draw() when observed would be a reasonable solution? It would then be a matter of flipping the flag on the controller side to trigger the draw in the component. Or is there something I'm missing?
Hi!
Wondering where do you get the theme from, in the sample provided when you import it?
import defaultTheme from '../themes/default-theme';
Using this simple pie chart the legend is rendered 0 x 0, so you cannot see it. If you change the type to 'line' then you can see the legend. Not sure if this is a bug with ember-highcharts or with highcharts itself.
chartOptions: {
chart: {
type: 'pie'
},
title: {
text: 'Total weight of gear in each category'
},
legend: {
align: 'right',
verticalAlign: 'top',
layout: 'vertical',
x: 0,
y: 100
},
},
chartData: [{
data: [
{y: 10, name: 'Test1'},
{y: 12, name: 'Test2'},
{y: 40, name: 'Test3'}
]
}],
This issue was discovered on the ember-cli slack channel, when someone reported having difficulty importing the high-charts
component. The chart blueprint has an incorrect path for importing the high-charts
component.
The import path should not include addon
since the contents of the addon folder are exported under the addon's namespace (ember-highcharts
in this case). The correct path would be ember-highcharts/components/high-charts
.
I'm trying to make a drilldown chart, and the drilldown module does not seem to be part of the highcharts source.
I created my own chart component like this:
import Highcharts from 'ember-highcharts/components/high-charts';
export default Highcharts.extend({
chartOptions: {
chart: {
zoomType: 'x'
},
xAxis: {
events : {
afterSetExtremes: (event) => {
console.log(this);
}
}
}
}
});
so I can reload more data when the user zooms in (like here: http://www.highcharts.com/stock/demo/lazy-loading)
In the example above, this
seems to be the context of the ES6 module, and when using a normal JavaScript function
afterSetExtremes(event) {
console.log(this);
}
this
refers to the Highcharts-Object itself.
Preferably I would like to call an action on the component (e.g. this.attrs.onZoom(event)
), but it seems impossible due to this
not being the context of the component.
Is there another way to achieve reloading of more data using Ember Data?
Hey! First off, I love this addon and use it quite a bit now.
I've noticed a big problem when using Highcharts and Highmaps together, just enabling both in EmberApp options, you'll receive the Highcharts error #16 when the page loads.
Turns out when you have already loaded highcharts.js
, you're supposed to just load modules/map.js
instead of adding highmaps.js
as well (real intuitive, right?) I'm not positive if this applies to every Highwhatever, so I don't feel comfortable submitting a pull request (I also am fairly new to Ember and making addons for it), but here's my code:
index.js around line 20
if (options.includeHighMaps) {
if (options.includeHighCharts) {
app.import(app.bowerDirectory + '/highcharts/modules/map.src.js');
} else {
app.import(app.bowerDirectory + '/highcharts/highmaps.src.js');
}
}
This resolves getting Highcharts error #16 every time the page loads. And to reiterate, I am only using Highcharts and Highmaps, so I don't know what other requirements there are to get multiple things working together.
container.optionsForType was removed in Ember 2.1.0. The initializer is throwing an error because of that. I guess it should be changed to container.registerOptionsForType
A highcharts drilldown chart requires additional data besides what is passed to series
. Currently this addon's content
parameter only passes data to series
: https://github.com/ahmadsoe/ember-highcharts/blob/master/addon/components/high-charts.js#L34. The drilldown functionality requires an API like so:
{
...
series: seriesArray,
drilldown: drilldownArray,
...
}
Ex: http://www.highcharts.com/demo/column-drilldown
I tried to implement a drilldown chart on my fork but got caught up on this issue: https://github.com/gregjopa/ember-highcharts/blob/drilldown/tests/dummy/app/components/chart-column-drilldown.js
To fix this issue we could add a check to see if the content
argument is an array. If it's an array we assign it to series
. If it's an object then we merge in the object as is. We could also throw an error if this content
object is missing the series
key. This way we could ensure backward compatibility and keep the API flexible for other highcharts modules.
What are your thoughts on how to add support for drilldown functionality?
I tried upgrading from 0.2.1 to 0.4.0 but get a build error which I narrowed it down to including the highcharts-more addon.
% ember build
DEPRECATION: Node v0.10.40 is no longer supported by Ember CLI. Please update to a more recent version of Node
undefined
version: 1.13.15
Build failed.
ENOENT, no such file or directory '/home/denchen/git/dashboard/tmp/concat_with_maps-input_base_path-5vvK3bT3.tmp/0/vendor/highcharts/highcharts/highcharts-more.src.js'
Error: ENOENT, no such file or directory '/home/denchen/git/dashboard/tmp/concat_with_maps-input_base_path-5vvK3bT3.tmp/0/vendor/highcharts/highcharts/highcharts-more.src.js'
at Object.fs.statSync (fs.js:696:18)
at ConcatWithMaps.keyForFile (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:90:20)
at Array.map (native)
at ConcatWithMaps.CachingWriter._conditionalBuild (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/index.js:112:65)
at /home/denchen/git/dashboard/node_modules/ember-cli/node_modules/broccoli-sourcemap-concat/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/read_compat.js:61:34
at lib$rsvp$$internal$$tryCatch (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:493:16)
at lib$rsvp$$internal$$invokeCallback (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:505:17)
at lib$rsvp$$internal$$publish (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:476:11)
at Object.lib$rsvp$asap$$flush [as _onImmediate] (/home/denchen/git/dashboard/node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:1198:9)
at processImmediate [as _immediateCallback] (timers.js:363:15)
HighCharts in Ember works just fine if I don't include highcharts-more
. Unfortunately, I do need that package as I'm using boxplots, which are defined in highcharts-more
I haven't had time to debug why, but when I run highstock
at version 4.2.3
my app crawls but using version 2.1.7
it runs fine. It would be great if in the ember-cli-build.js
if I could specify which version of each highcharts library to use. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.