Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highcharts in AngularJs without jQuery?

Is there any directive for highcharts where you don't need the full jQuery? This ones seem's the most popular at the moment but I can't get it work without jQuery: https://github.com/pablojim/highcharts-ng

Is it possible to write a highcharts directive and only using the light version of jQuery that is included with angular?

If I do have to include the full jQuery, will it affect the loading time/performance of my app signifigantly?

like image 211
Joe Avatar asked Jan 15 '14 14:01

Joe


People also ask

Does Highcharts require jquery?

Highcharts requires that jquery is available on the window global scope (old web page global style) which makes it hard to use with a bundler like webpack.

How can I tell if Highcharts are loaded?

To determine that chart is fully loaded you can use load event, because load event is invoked when all elements are drown (API reference https://api.highcharts.com/highcharts/chart.events.load). However when you are using series animation this runs in a timeout, then load event is invoked before animation will finish.

What are Highcharts used for?

Highcharts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Highcharts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on.


1 Answers

It's not hard to build a directive that wraps the existing javascript library.

This is code for a highchart directive. It's very simple.

app.directive("highcharts", function() {
  return {
    link: function(scope, el, attrs) {
      var options = scope.$eval(attrs.highcharts);
      options.chart.renderTo = el[0];
      new Highcharts.Chart(options);
    }
  };
})

Full demo is here. http://plnkr.co/edit/iN8TAMKyHIyN4F44iJ0U?p=preview

My answer to you is, if you like https://github.com/pablojim/highcharts-ng

  • just add standalone-framework instead of full jQuery.

  • if not, like me :), build your own like the demo provided. it's not that hard.

BTW, This is the page Highcharts introduces their standalone framework.

like image 89
allenhwkim Avatar answered Sep 30 '22 17:09

allenhwkim