pablojim / highcharts-ng Goto Github PK
View Code? Open in Web Editor NEWAngularJS directive for Highcharts
License: MIT License
AngularJS directive for Highcharts
License: MIT License
I'm having redraw issues with the column chart when using the highchart standalone-framework.
We have an Angular project which does not reference jQuery so we've instead included the highcharts standalone-framework. Unfortunately when updating the config.series property in a controller the redraw animation occurs twice for the column chart.
I've created a simple JSFiddle that demonstrates the issue.
Would be great to have this looked at.
Something in highcharts must have changed which caused the Add Series button to break. http://jsfiddle.net/pablojim/7cAq3/
None of the legend config options seem to be passed through: http://jsfiddle.net/mKfzu/
Hi, it's me again :p
How can I make the width of the chart fit the parent's element's width?
The docs says it'll fit automatically, but it doesn't seem to happen.
if we have attributes in the config object that are not title, loading, xAxis, they are not added to the mergedOptions object.
So I propose to replace
if(config.xAxis) {
mergedOptions.xAxis = angular.copy(config.xAxis)
}
if(config.title) {
mergedOptions.title = config.title
}
by
for (var k in config) {
if (!(k in ['options', 'loading'])) {
mergedOptions[k] = angular.copy(config[k]);
}
}
So all attributes will be transfered to mergedOp^tions
I want to trigger a function when clicking a highchart. I tried this in two different ways:
Any idea what the problem may be?
See highcharts-ng.min.js line 1
The 'foo' causes a JS parser syntax error.
Commit 95d8602 added this somehow.
The loop affects the array it loops through.
Example:
// from highcharts
function erase(arr, item) {
var i = arr.length;
while (i--) {
if (arr[i] === item) {
arr.splice(i, 1);
break;
}
}
//return arr;
}
var a = [1, 2, 2, 3, 4, 4, 4];
a.forEach(function(elm) {
if (elm % 2 == 0)
erase(a, elm);
});
console.log(a);
This example does should not log 2 or 4. It does.
Fix for code: change
chart.series.forEach(function (s) {
if (ids.indexOf(s.options.id) < 0) {
s.remove(false);
}
});
To:
for(var i = chart.series.length - 1; i >= 0; i--)
var s = chart.series[i];
if (ids.indexOf(s.options.id) < 0) {
s.remove(false);
}
}
Hi,
why there is no unit tests around the highcharts directive ?
Could you please add the tests around it ?
I use highstock and customized selectorButtons. After try to select one of them there are a lot of JS-Errors
http://jsfiddle.net/pablojim/Hjdnw/
The demo only shows the redraw animation after swapChartType(). No animation after addSeries() or addPoints().
Is there any chart object in the $scope that I can trigger the redraw animation by myself?
Hi pablojim,
My problem about "Polar Highcharts":
I can't get this type of chart with the directive, in other example with jquery i show results that I need but is not the best solution for my project.
Any idea?
Thanks
Hey
I have been trying to implement a speed dial with this directive, but for some reason it is not showing the yAxis and related coloring that I want the dial to have. I picked up a standard speed dial example from the highcharts demos given http://jsfiddle.net/highcharts/kbvC3/light/
The description of the directive says that I can give it any number of highcharts options in the config.options and it will render fine and that is exactly what I have done. Please have a look at my fiddle [http://jsfiddle.net/uma1rkhan/Eu7NX/1/], for now I will override your directive methods by passing a flag to skip mergeOptions and processSeries and pass the options on the Highcharts directly to receive the charts object.
If I put more than one directive in a view, there is some state pollution that happens - specifically on the axes.
The issue seems to be in the getMergedOptions function. You are calling deepExtend passing in the defaultOptions, which is effectively a global across all charts in a scope.
Here is a simple diff for how I made it work:
Line 63:
var getMergedOptions = function(scope, element, config) {
// OG 2013-10-04
//var mergedOptions = {};
var mergedOptions = angular.copy(defaultOptions);
if (config.options) {
// OG 2013-10-04
//mergedOptions = deepExtend(defaultOptions, config.options);
mergedOptions = deepExtend(mergedOptions, config.options);
} else {
// OG 2013-10-04
//mergedOptions = defaultOptions;
}
Thanks,
Omri.
when I change tooltip configuration, it doesn't affect the instance of a highchart.
PS: I don't know how else to reach you except via issue :p
I'm trying to add a highstock directive; but the rangeSelector doesn't appear to get picked up or rendered.
https://github.com/Tjorriemorrie/highcharts-ng/blob/master/src/directives/highcharts-ng.js#L130
There is an example page in the repo; any help appreciated :)
Hello, I noticed today I introduced a bug!
To test:
Change app.js as follows:
diff --git a/src/app.js b/src/app.js
index d9f46fb..e0f0f8b 100644
--- a/src/app.js
+++ b/src/app.js
@@ -45,7 +45,8 @@ myapp.controller('myctrl', function ($scope) {
$scope.addPoints = function () {
var seriesArray = $scope.chartConfig.series;
var rndIdx = Math.floor(Math.random() * seriesArray.length);
- seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
+ //seriesArray[rndIdx].data = seriesArray[rndIdx].data.concat([1, 10, 20])
+ seriesArray[rndIdx].data.push(5);
};
$scope.addSeries = function () {
Open example.html, press "Add Points to Random Series".
Expected behaviour: chart changes
Actual behaviour: chart doesn't change (because series.options.data === seriesArray[rndIdx].data)
Hello,
I am trying to show a highcharts inside a carousel. First chart looks fine. But when i move the slide to 2nd one. The width of the chart is squeezed.
<carousel> <slide ng-repeat="slide in slides"> <div ng-if="slide.type == 'chart'" > <highchart id="chart{{$index}}" config="slide.chartConfig"></highchart> </div> </slide> </carousel>
JS:
var slides = $scope.slides = [];
slides.push({text: 'Slide 1', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 15, 12, 8, 7]}],
title: {text: 'Hello 1'},
loading: false
}});
slides.push({text: 'Slide 2', type: "text"});
slides.push({text: 'Slide 3', type: "chart", chartConfig : {
options: {chart: {type: 'bar'}},
series: [{data: [10, 35, 52, 8, 7]}],
title: {text: 'Hello 2'},
loading: false
}});
Am i missing some thing here?
Kind Regards
Kay
Is there a way to autoscale charts to their container, more specifically automatically scale when the container resizes (without window.resize())
?
Hello,
The title attribute in the <highchart ...> tag has a side affect : like title tag in other tags, it displays a popup with it's content in the browser... This is purely cosmetic but ugly :-)
Perhaps it could be changed to "chart-title" ??
When a tooltip is showing and starts to fade away, if you navigate to a different route then a script error occurs. This script occurs in a timeout loop and thus the same script error occurs every X milliseconds.
I'm assuming this is due to the fade-out animation trying to continue to fade after the angular routing has already removed the toolbar element from the dom.
I've made a JS Fiddle that demonstrates this.
To see whether this was a highcharts issue or a highcharts-ng issue, I removed the directive and used the typical Highcharts.chart() function and this error did not occur. It seems that perhaps highcharts-ng might need to handle this scenario.
If you need more info, please ask. The JS Fiddle has some reproduction steps.
Hi there, this is not an issue but simply a proposal for a nice feature to have. It would be nice that the directive had an optional attribute "resize" that tells the directive to watch for the main browser window resize events and trigger a redraw of the chart when a certain width threashold of the old value is exceeded e.g. "resize=20px" that would make the chart redraw to refit the new width
i don't checked the reason, but bower known latest version (0.0.2) did not work with default config in README . but master branch is ok
Hello,
IE8 doesn't seem to be supported despite highcharts
and angularjs
are.
Is there a plan to support it in a future release ?
I get this exception the 1st time the chart is drown in a new fragment page
TypeError: Cannot call method 'forEach' of undefined
at ensureIds (http://localhost:63342/MyAngular/js/highcharts-ng.js:7:20)
at Object.fn (http://localhost:63342/MyAngular/js/highcharts-ng.js:47:25)
I solved the problem in your directive with this fix, see if it make sense to you:
....
scope.$watch("series", function (newSeries, oldSeries) {
if (newSeries) { <--- FIX FOR UNDEFINED
ensureIds(newSeries);
var ids = []
//Find series to add or update
newSeries.forEach(function (s) {
ids.push(s.id)
var chartSeries = chart.get(s.id);
if (chartSeries) {
chartSeries.update(angular.copy(s), false);
} else {
chart.addSeries(angular.copy(s), false)
}
});
//Now remove any missing series
chart.series.forEach(function (s) {
if (ids.indexOf(s.options.id) < 0) {
s.remove(false);
}
});
chart.redraw();
}
}, true);
Probably got there by mistake. See line 1.
https://github.com/pablojim/highcharts-ng/blob/master/dist/highcharts-ng.min.js#L1
Not sure how to quite explain this one. But if you change the series, and at the same time attempt to update the currentMin/Max on the axes, the axes won't update.
Reproduce: http://jsfiddle.net/LhLAJ/
1.) Change the currentMin/Max
2.) Press Change Data & Scale
3.) Notice how CurrentMin/Max doesn't scale despite what is listed in changeD
function.
Currently, I've "fixed" this by changed
84. scope.config[axisName].currentMin = this[axisName][0].min || scope.config[axisName].currentMin;
85. scope.config[axisName].currentMax = this[axisName][0].max || scope.config[axisName].currentMax;
to
84. scope.config[axisName].currentMin = scope.config[axisName].currentMin || this[axisName][0].min;
85. scope.config[axisName].currentMax = scope.config[axisName].currentMax || this[axisName][0].max;
However I'm not sure if this fix is correct, as I'm not entirely familiar with the library.
The yAxis property doesn't work.
The y axis should labled "Y Axis title" instead of "Values"
This is awesome.
Would it be difficult to support highstock as well? Currently the candlestick chart type doesn't work.
Is there a way to get back the instance of the highcharts so we can call functions like Chart.hideLoading()
and Chart.showLoading()
?
Great job with this directive btw!
I'm noticing that when I use highcharts-ng with routing, when i switch to a new route/view that has highcharts-ng, the animation is not shown to user perhaps because it has already happened right after view was loaded. Is there a way to delay loading until after view is loaded?
When I have two or more charts with totaly differents options, the defaultOptions object is merging all configuration objects (from each chart). So I see all my charts in the same way.
This happen because the defaultOptions object is declared as a module variable, so it is keeping the old values.
My solution:
I moved the definition of the defaultOptions object inside the function getMergedOptions
So it looks like this:
var getMergedOptions = function (scope, element, config) {
var mergedOptions = {};
var defaultOptions = {
chart: {
events: {}
},
title: {},
series: [],
navigator: {enabled: false}
};
if (config.options) {
mergedOptions = deepExtend(defaultOptions, config.options);
} else {
mergedOptions = defaultOptions;
}
...
}
Example with issue present: http://jsfiddle.net/Cp73s/103/
If the chart starts out hidden then it defaults to 600x400. If you hit the Toggle hide button it is shown at 600x400, once you cause the chart to be redrawn (by pressing any of the other buttons) it will take up the full width. If you hide the graph and cause it to redraw then it will default to 600x400 again.
Is there any simple fix for this?
I found this in Highchart's FAQ: http://www.highcharts.com/docs/frequently-asked-questions#jquery-ui-tab, and then by looking at ngHide: http://docs.angularjs.org/api/ng.directive:ngHide They suggest changing the ng-hide class to:
.ng-hide {
display:block!important;
position:absolute;
top:-9999px;
left:-9999px;
}
However, after attempting this, it still doesn't work, and still renders initially at 600x400. :(
Hi,
Unfortunately, it seems setting the zoomType option in the $scope.chart config object is not effective.
If I set it as a default option in highcharts-ng.js, it works:
var getMergedOptions = function (scope, element, config) {
var mergedOptions = {};
var defaultOptions = {
chart: {
zoomType: 'x',
events: {}
},
...
Could this be related to some creation only parameter ?
At the moment of take care of the options "xAxis" and "yAxis" generates an infinite loop, this is the "breaking code":
$scope.chart = {
options: {
chart: {
type : 'area',
width: 970,
height: 230,
marginLeft: 50,
marginTop: 50
},
navigator: {
enabled: true,
series:{
data: [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8]]
}
},
//From here
xAxis: {
categories: [],
type: 'datetime',
ordinal : false,
minRange : 60 * 60 * 1000, // one min
},
yAxis: {
title: { text: '' },
labels: {
align: 'left',
x: -15,
y: 0
},
}
//To here
},
series: [{
data: [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8]]
}],
title: {
text: "Title"
}
}
I've been trying to do it through the configuration of the chart, but without success.
I found this fiddle where hiding the zoom buttons is achieved, but I'm not sure how to get this done using this highcharts-ng
If you add something like (above) to your options object, this gets into an infinite loop::
$scope.chart = {
options: {
chart: {
type : 'area',
width: 970,
height: 230,
marginLeft: 50,
marginTop: 50
},
navigator: {
enabled: true,
series:{
data: [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8]]
}
},
//From here
xAxis: {
categories: [],
type: 'datetime',
ordinal : false,
minRange : 60 * 60 * 1000, // one min
},
yAxis: {
title: { text: '' },
labels: {
align: 'left',
x: -15,
y: 0
},
}
//To here
},
series: [{
data: [[1,1],[2,2],[3,3],[4,4],[5,5],[6,6],[7,7],[8,8]]
}],
title: {
text: "Title"
}
}
in favor of automatic bower parsers
I can't get the navigator working for dynamic series. As soon as additional data is added the navigator gets emptied and shows no data. Chrome console is showing an error in http://code.highcharts.com/stock/highstock.src.js line 18844:44, the value this.chart.scroller.series.xData is undefined, but i couldn't figure out why. I created two JSfiddles to show the problem:
y-data only without xAxis adjusting: http://jsfiddle.net/YT5gf/2/
xy-data with xAxis zoom: http://jsfiddle.net/NRqBF/4/
I'm using highcharts-ng for my bachelor thesis and would really appreciate your help.
Example here:
http://jsfiddle.net/BnnVN/
I have a angular $timeout function being called that updates the chartOptions value and adds a data point but it does not update the chart.
When console logging the data, it is adding a new point to the options each time. So I know the actual function of adding the point is working.
jQuery 2.0.3
AngularJS 1.2.9
HighCharts 3.0.9
highcharts-ng 0.0.3
html
<highchart id="default-chart-1" config="chartOptions"></highchart>
javascript
$scope.chartOptions = {
useHighStocks: false,
options: {
chart: {
type: 'spline',
zoomType: 'x'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'First Chart'
},
xAxis: {currentMin: 0, currentMax: 10, minRange: 1},
loading: false
};
function addPoint() {
var randomPoint = Math.floor((Math.random()*10)+1) + 8;
console.log('Random Point: ' + randomPoint, $scope.chartOptions);
$scope.chartOptions.series[0].data.push(randomPoint);
$timeout(addPoint, 1000);
};
addPoint();
Is there any way to get an example where the data is loaded in with $http? I'm trying this but keep getting following error:
TypeError: Object # has no method 'forEach'
at ensureIds (http://localhost:3000/js/highcharts-ng.js:7:20)
at Object.fn (http://localhost:3000/js/highcharts-ng.js:51:25)
at Object.Scope.$digest (http://code.angularjs.org/1.1.0/angular.js:7705:27)
at Object.Scope.$apply (http://code.angularjs.org/1.1.0/angular.js:7899:24)
at done (http://code.angularjs.org/1.1.0/angular.js:8891:20)
at completeRequest (http://code.angularjs.org/1.1.0/angular.js:9035:7)
at XMLHttpRequest.xhr.onreadystatechange (http://code.angularjs.org/1.1.0/angular.js:9001:11)
I'm new to angular so it's likely it's something I'm doing wrong but I can't seem to figure it out myself.
I've recently added a build process. This should help add us add tests and keep the coding style consistent.
I'd like to make a release 1.0.0 over the next few weeks and this is a placeholder issue for what should be in it. Add your thoughts in the comments.
Other possibilities:
<highchart options="options" series="series" loading="hasLoaded"/>
Any others? What else could be improved?
Hello! I forked your repository and is making extended demo of your cool directive ( https://github.com/crusat/highcharts-ng ). If you want, can merge them.
When I am trying to customize the tooltip information, as shown in (http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/scatter/ ) , it didn't work as expected. In the tooltip window, it shows in the format:
title
x:21
y:12
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.