CoolRoadmap

1 Column Example • 2 Column Example • 3 Column Example • 4 Column Example • 10 Column Example

Getting started

Getting started demos are in the demo folder. The ex4.htm is probably the best example to get started with. Tests can be conducted via the demo/test.htm file.

Add dist/CoolRoadmap.min.js and dist/CoolRoadmap.min.css to your project and your html file and create a new roadmap with some columns and milestones.

<link rel="stylesheet" href="CoolRoadmap.min.css">
<script src='CoolRoadmap.min.js'></script>

<script>
    var myroadmap = new roadmap('CoolRoadmapWrapper');

    myroadmap.columns([
        'Column 1',
        'Column 2'
    ])

    myroadmap.milestones([
        {
            title: 'Rank 0 - col 1',
            descriptionHTML: 'Discriptive text',
            belongsToColumn: 1,
            rank: 0
        },
        {
            title: 'Rank 0 - col 2',
            descriptionHTML: 'Discriptive text',
            belongsToColumn: 2,
            forwardConnect: [1, 1],
            rank: 1
        }
    ])
</script>

API

var myroadmap = new roadmap('idForWrapperDiv');

roadmap.columns(columns)

Create the columns for the roadmap. The columns argument if an array of string column titles.

myroadmap.columns([
    'Column 1',
    'Column 2'
])

roadmap.milestones(milestones)

Create the columns for the roadmap. The milestones argument is an object containing the data for the milestone. The object structure is defined as:

{
    title: // Milestone title
    descriptionHTML: // Milestone descriptive text/HTML to be shown on click
    belongsToColumn: // The column number that the milestone belongs to (starts at 1)
    forwardConnect: [
        // The column of the node this node connects to,
        // The milestone rank of the node this node connects to
    ]
    rank: // The order in which this node should appear in the column (0 is the bottom and lowest rank)
    difficult: // The amount of which this milestone contributes to the percent complete
    status: // If defined as "complete" this milestone is marked as complete
}

myroadmap.milestones([
    {
        title: 'Rank 0 - col 1',
        descriptionHTML: '<strong>HTML is even supported</strong>',
        belongsToColumn: 1,
        rank: 0,
        difficulty: 10
    }
])

roadmap.style(columnColors)

Define the colors for the nodes in each column. The columnColors argument is an array of strings containing the color (hex or rgb) for each defined column.

myroadmap.columnColors(['#6a4bcc', '#04a2fa', '#e7327d', '#662b6b'])

roadmap.markComplete(milestonesComplete)

Define which milestones are complete to drive the percent complete of the column. The milestonesComplete argument is an array of arrays of integers of which are the ranks that are complete for each column.

myroadmap.columnColors([
    [0, 3], // Column 1 - Rank 0 and 3
    [2] // Column 2 - Rank 2
])

Features

• Create a nice roadmap to show for yourn projects
• Connect roadmap items across columns
• Simple to style each node
• Overall progress bar

Donate

Bitcoin: 1J5KSzvYa3cD2nP3CrZpFwv4eanMdYqeF5

Ether: 0xed7dBeb7998Ec79D99379dA81c4b54f74abc69d4