pablojim / highcharts-ng Goto Github PK

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.

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.

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!

The yAxis property doesn't work.

http://jsfiddle.net/cSek7/5/

The y axis should labled "Y Axis title" instead of "Values"

Hi,

why there is no unit tests around the highcharts directive ?
Could you please add the tests around it ?

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;
}
...
}

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

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"
}
}

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. :(

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.

When i pass dates to the data, it doesn't reads them as dates

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);

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.

Probably got there by mistake. See line 1.

https://github.com/pablojim/highcharts-ng/blob/master/dist/highcharts-ng.min.js#L1

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

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);
}
}

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.

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.

Hello,

IE8 doesn't seem to be supported despite highcharts and angularjs are.

Is there a plan to support it in a future release ?

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 ?

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)

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?

I want to trigger a function when clicking a highchart. I tried this in two different ways:

• Using ng-click on highchart directive
• Using highchart's click event
  Neither of these to work, check out this fiddle (both approaches included):
  http://jsfiddle.net/47m46/1/

Any idea what the problem may be?

This is awesome.

Would it be difficult to support highstock as well? Currently the candlestick chart type doesn't work.

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"
}
}

See highcharts-ng.min.js line 1

The 'foo' causes a JS parser syntax error.

Commit 95d8602 added this somehow.

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.

Hi, it's me again :p

How can I make the width of the chart fit the parent's element's width?

jsfiddle example

The docs says it'll fit automatically, but it doesn't seem to happen.

in favor of automatic bower parsers

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?

I use highstock and customized selectorButtons. After try to select one of them there are a lot of JS-Errors

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

when I change tooltip configuration, it doesn't affect the instance of a highchart.

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" ??

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

None of the legend config options seem to be passed through: http://jsfiddle.net/mKfzu/

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.

Problem

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.

File Versions

jQuery 2.0.3
AngularJS 1.2.9
HighCharts 3.0.9
highcharts-ng 0.0.3

Code

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();

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.

• Add tests for initialisation
• Add test to make sure chart update methods are only called when needed. Currently they are called more than is needed
• Prioritise existing issues for resolution

Other possibilities:

• Change the attribute binding to use expressions?
• Move the more dynamic parts of config into their own attributes. e.g.
  <highchart options="options" series="series" loading="hasLoaded"/>

Any others? What else could be improved?

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 :)

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

Something in highcharts must have changed which caused the Add Series button to break. http://jsfiddle.net/pablojim/7cAq3/

Hi pablojim,
My problem about "Polar Highcharts":

http://jsbin.com/UQutIPov/1/

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

Example here:
http://jsfiddle.net/BnnVN/

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