Comments (19)
@ahmadsoe thanks for merging my PR. I think this issue can be closed since there is now a recommended approach for dynamic options documented in the readme. Also, here's an example ember app that shows how to extend this plugin: https://github.com/gregjopa/ember-reporting-example.
from ember-highcharts.
We don't need to re-draw the entire chart to change the chart options. Highcharts have internal API for dynamically modifying the chart including the options after rendering.
Maybe you could setup the itemController
directly in the template and call the API depending on your need.
from ember-highcharts.
Not sure I understand your comment about setting up the itemController
in the template? I see the API, which looks useful, but wouldn't exposing the internals of the Highcharts component go against the princple of encapsulation that components are based on?
from ember-highcharts.
It seems this is fairly simple to implement.
The only thing that i struggle to figure out is which Highcharts initialization options correspond to which Highcharts instance methods and their arguments.
from ember-highcharts.
@martinstannard please ignore my last comment about the itemController
. Have you found the good solution for this issue? maybe you could share your experience on this with us, as i have not tried it yet.
@lolmaus if we can "observers" on those options then we can just redraw the charts.
from ember-highcharts.
@ahmadsoe here's my simple implementation - martinstannard@16e2d85 and martinstannard@5a76c20.
Basically I've setup a flag which I observe and call drawLater whenever it changes. The main drawback is I have to manually toggle the flag within my app, but that keeps the implementation very simple.
from ember-highcharts.
@martinstannard: uhm, why don't you observe chartOptions
directly? Just make sure to update it via this.set
, then you don't need a weird custom property whose content does not reflect state.
from ember-highcharts.
As an aside, you can redraw the chart which should avoid any potential DOM thrashing:
get(this, 'chart').redraw();
from ember-highcharts.
@lolmaus I could observe chartOptions
but if I then only change one of values within the options, the observer will not fire. AFAIK there is no easy way within Ember to observe all the attributes of a object without up an observer for each attribute. Hence my admittedly ugly workaround.
@poteto - thanks for pointing out the redraw
method. Looks like I should just call that instead of this hackery...
from ember-highcharts.
var newObject = Ember.copy(this.get('somePlainObject'));
newObject.foo = 'bar';
this.set('somePlainObject', newObject);
I would suggest propertyDidChange
instead of cloning the object, but it doesn't work for some reason. :(
from ember-highcharts.
@martinstannard, did you settle on a solution? Did "get(this, 'chart').redraw();" worked for you? The title of my chart is "undefined" at initial rendering. I'm trying to redraw the chart after the title has been defined with no success.
from ember-highcharts.
@20v100 Sorry, I didn't mention that .redraw()
(from the Highcharts API) only redraws when "changes have been done to the data or axis extremes", i.e. updating the title isn't a "redrawable" event. You will probably have to directly use get(this, 'chart').setTitle(...)
instead
from ember-highcharts.
@poteto You are fantastic! Worked like a charm.
from ember-highcharts.
We have a similar use case where the chart subtitle and series name need to be dynamic. Is there a way to extend this component to call setTitle()
when the content changes? @20v100 did you fork this repo to get setTitle() to work or were you able to extend this component?
I've tried the extending approach but it never changes the chart title. Here's my code:
import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
export default EmberHighChartsComponent.extend({
dynamicContent: Ember.computed('content', function () {
if (this.get('chart')) {
var name = this.get('content')[0].name;
this.get('chart').setTitle({ subtitle: name });
}
return this.get('content');
})
});
Here's a simple demo of my use case that does not use ember: https://github.com/gregjopa/ember-reporting-example/tree/master/public/plain-js-app. My goal is to accomplish the same thing using ember-cli with this plugin.
from ember-highcharts.
I got this working by extending this component. Here's a working ember-cli app that dynamically updates the chart subtitle and series name with this addon: https://github.com/gregjopa/ember-reporting-example.
I took the approach of extending this component, observing changes to the model, then updating the chart titles, and redrawing the chart:
import Ember from 'ember';
import EmberHighChartsComponent from 'ember-highcharts/components/high-charts';
export default EmberHighChartsComponent.extend({
dynamicContent: Ember.computed('content', function () {
var chart = this.get('chart');
if (chart) {
// when re-rendered update the chart subtitle and series name
var repo = this.get('content')[0].name;
chart.series[0].update({ name: repo }, false);
chart.setTitle(null, { text: 'Repo: ' + repo }, false);
chart.redraw();
}
return this.get('content');
}),
dynamicChartOptions: Ember.computed('chartOptions', function () {
// when first rendered update the chart subtitle
var repo = this.get('content')[0].name;
this.get('chartOptions').subtitle.text = 'Repo: ' + repo;
return this.get('chartOptions');
})
});
However, there is a problem with this approach. I think chart.redraw() is getting called twice which screws up the chart animation. This addon redraws when the chart data changes using series.setData() and then my code also redraws to handle the title changes. Ideally we should only be redrawing once.
Should this addon be responsible for handling updates to titles/labels? If not, can a config option be added to this addon to disable redrawing when the chart data changes and instead the developer is responsible for redrawing? The developer can handle redrawing when the data changes by extending this component. I'm happy to send a PR for this. Just need some guidance on which design to go with.
from ember-highcharts.
@gregjopa I think option to disable redrawing the chart is good to go.
I'm also happy to accept your PR if you want implement handling updates to title and axis label manually with Highcharts API.
from ember-highcharts.
@ahmadsoe I've been thinking more about this and I don't think a disable redrawing method is necessary. Instead, the contentDidChange
method can be overridden by extending this addon. I sent PR #24 that adds documentation to the readme about how to use this approach.
Regarding adding logic to handle updates, I think there are quite a few use cases to handle series, axis, and title label changes. It may be best to keep this addon's codebase small and make the user override it to add custom redraw logic.
from ember-highcharts.
@gregjopa well, it seems best approach for now. I'm fine with this, as I rarely updates title or chart label on my apps :)
from ember-highcharts.
@gregjopa sure, thanks.
@martinstannard I'll close this issue for now, you could try @gregjopa 's approach for your problem.
from ember-highcharts.
Related Issues (20)
- Upgrade Hightcharts to get fix for getDistanceBetweenCirclesByOverlap logic HOT 1
- Cannot read property "forExport" of undefined HOT 3
- Build error with highcharts v7.1.2 in styled mode HOT 1
- Upgrade bootstrap to fix cross-site scripting vulnerability
- How to add support to accessibility? HOT 1
- How to pass an object to Highcharts.setOptions HOT 1
- Series with the same name (`series.name`) are "mysteriously" dropped when chart is re-rendered. HOT 1
- Changing Series changes order HOT 1
- ‘Cannot read property "forExport" of undefined’ when transitioning to a new route. HOT 1
- Replacing xAxis, and yAxis HOT 2
- [Octane] Glimmer component refactor HOT 1
- Modifier manager capabilities deprecating warning HOT 8
- I think v3.2.0 should have been a major version HOT 5
- How can one use Annotation module of highchart using ember-highcharts? HOT 1
- Getting https://assets.highcharts.com/errors/16/ error on EmberJS application HOT 2
- Replace `ember-holy-futuristic-template-namespacing-batman` with `ember-template-imports` HOT 2
- Using custom components in a chart
- Question: Can we use highchart version: 8.0.0 with ember-highchart version: 3.1.0 ? HOT 1
- Release v3.2.2 for assign polyfill deprecation HOT 2
- Error: Highcharts error #17: missingModuleFor: funnel HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ember-highcharts.