Highroadmap is a simple roadmap graphs generator based on Highcharts library, with zooming, filtering and highlighting capabilities.

• jQuery
• Highcharts
• Highcharts more

See it live on JSFiddle

1. Download Highroadmap and make it accessible in your assets directory.

2. Include jQuery, Highcharts, Highcharts more and Highroadmap in your page:

   <script src="jquery.js"></script>
   <script src="highcharts.js"></script>
   <script src="highcharts-more.js"></script>	
   <script src="highroadmap.js"></script>

3. Highroadmap default language is English. If needed, you can also include a language pack in order to get your content translated:

   <script src="highroadmap/lang/fr.js"></script>

4. Declare your roadmap items:

   var items_list = [
       {
           name: "Find a guitar",
           begin_date: new Date(2014, 0, 10),
           end_date: new Date(2014, 0, 20)
       },
       {
           name: "Learn chords",
           begin_date: new Date(2014, 0, 20),
           end_date: new Date(2014, 5, 30)
       },
       {
           name: "Learn scales",
           begin_date: new Date(2014, 3, 1),
           end_date: new Date(2014, 6, 30)
       },
       {
           name: "Plan a gig",
           begin_date: new Date(2014, 6, 1),
           end_date: new Date(2014, 6, 15)
       }
   ];

5. Generate your roadmap (see it live on JSFiddle):

   $(function () {
       $('#my-roadmap').highroadmap({
           items: items_list
       });	
   });

A couple of optional settings are available.

###Roadmap items customization

####Component name

The item component name is a string. If provided, the component's name is displayed in item tooltip.

{
    name: "Learn chords",
    begin_date: new Date(2014, 0, 20),
    end_date: new Date(2014, 5, 30),
    component: "Apprenticeship"
}

####Status

The item status is a string. If provided, the item status is displayed in item tooltip, and may be used to filter the displayed item.

Possible values: "To do", "In progress", "On hold", "Done"

{
    name: "Learn chords",
    begin_date: new Date(2014, 0, 20),
    end_date: new Date(2014, 5, 30),
    status: "Done"
}

####URL

A destination URL where the user should be redirected when clicking on an item bar in the roadmap.

{
    name: "Learn chords",
    begin_date: new Date(2014, 0, 20),
    end_date: new Date(2014, 5, 30),
    url: "http://www.apprendre-guitare.e-musicien.fr/apprendre-accords.html"
}

###Plugin options

Options can be passed to the plugin using a dictionnary:

$('#my_roadmap').highroadmap({
	option_1: 'value',
	option_2: 'other value',
	...
});

The available options are listed in the table bellow:

Even if Bootstrap front-end framework is not required to run Highroadmap, it integrates well with it. If you use Bootstrap on your pages, your roadmaps should look quite sweet without writing extra CSS.