Fork me on GitHub

Project Notes

Using Highcharts with Bower

Demonstrate the process of installing and packaging Highcharts with bower.

demo

Notes

Bower is a package manager for web components that may contain HTML, CSS, JavaScript, fonts or even image files.

HighCharts is one of the leading Javascript charting packages.

Now dance!

Installation

Install Bower

Requires npm, then install bower globally:

npm install -g bower

Highcharts Installation

bower install highcharts

Or to install and add highcharts to bower.json

bower install highcharts --save

Installing from bower.json

With bower.json prepared, install all the dependencies (including highcharts)

bower install

Compiling for Distribution

The highcharts sources installed in bower_components are not actually checked-in the repo or included in the distribution. While you could do that, the approach I’ll use here is to compile javascript dependencies for distribution.

For that I’ll use grunt with the grunt-bower-concat to generate app/compiled.js.

Install npm dependencies:

npm install -g grunt
npm install -g grunt-cli
npm install # from package.json

Then compile the bower components:

$ cat Gruntfile.coffee
module.exports = (grunt)->

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    bower_concat: {
      all: {
        dest: 'app/compiled.js',
        bowerOptions: {
          relative: false
        }
      }
    }
  })

  grunt.loadNpmTasks('grunt-bower-concat')

  grunt.registerTask('default', ['bower_concat'])

$ grunt
Running "bower_concat:all" (bower_concat) task
File app/compiled.js created.

Done.

Example

The example in example.html is an adaptation of the HighCharts ‘First Chart’ example.

Or run the demo live from GitHub Pages.

Credits and References

About LCK#39 Javascript
Project Source on GitHub Return to the Project Catalog

This page is a web-friendly rendering of my project notes shared in the LittleCodingKata GitHub repository.

LittleCodingKata is my collection of programming exercises, research and code toys broadly spanning things that relate to programming and software development (languages, frameworks and tools).

These range from the trivial to the complex and serious. Many are inspired by existing work and I'll note credits and references where applicable. The focus is quite scattered, as I variously work on things new and important in the moment, or go back to revisit things from the past.

This is primarily a personal collection for my own edification and learning, but anyone who stumbles by is welcome to borrow, steal or reference the work here. And if you spot errors or issues I'd really appreciate some feedback - create an issue, send me an email or even send a pull-request.