Blog Help & Support Contact About Login

 Show Nav

JavaScript Rankflow Charts


Overview

JavaScript Rankflow charts are great for displaying comparisons and hierarchies of multiple data sets. They are especially useful for leaderboards or as a standalone chart.

Loading...
Result
HTML
JavaScript
CSS
A beautiful chart
{
  "type":"rankflow",
  "scale-x":{
    "labels":["ON-TIME","BAGGAGE","PASSENGERS"],
    "values":["ON-TIME","BAGGAGE","PASSENGERS"]
  },
  "series":[
    {
      "text":"Air West",
      "ranks":[3,4,1],
      "rank":3
    },
    {
      "text":"Braniff",
      "ranks":[1,1,5],
      "rank":1
    },
    {
      "text":"Capital",
      "ranks":[5,2,4],
      "rank":4
    },
    {
      "text":"Eastern",
      "ranks":[2,3,2],
      "rank":2
    },
    {
      "text":"Galaxy",
      "ranks":[4,5,3],
      "rank":5
    }
  ]
}

Data Format

Ranks Array

Create a "series" object array with more than one object. Each object should contain "text", "ranks", and "rank" properties. The value of "text" should be a string, and will be displayed in the rankflow label objects. The "ranks" value array sets the rank for that item across each category. The "rank" attribute, a single value, sets the overall rank for that item.

{
  "type":"rankflow",
  "series":[ // Length N array of objects
    {
      "text":(Item1), // String
      "ranks":[rank1, rank2, ..., rankN], // Length N array of numbers (1 to N)
      "rank":(Overall Rank) // Number (from 1 to N)
    },
    {
      "text":(Item2),
      "ranks":[rank1, rank2, ..., rankN],
      "rank":(Overall Rank)
    },
      ...,
    {
      "text":(ItemN),
      "ranks":[rank1, rank2, ..., rankN],
      "rank":(Overall Rank)
    }
  ]
}

Rankflow-specific Properties

JavaScript Rankflow charts include a number of unique chart-specific properties that allow you to manipulate the appearance and behaviors of your HTML5 rankflow chart. They can be implemented into your chart by placing them within the "options" object.


Column Space

The "col-space" attribute sets (forces) the size of the spacing between flow columns.

{
  "type":"rankflow",
  "options":{
      "col-space":0
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Row Space

The "row-space" attribute sets (forces) the size of the spacing between flow rows.

{
  "type":"rankflow",
  "options":{
      "row-space":0
  },
  /* Code omitted for brevity */
}

Separation Space

The "sep-space" attribute sets (forces) the size of the spacing between the overall section and the flow section.

{
  "type":"rankflow",
  "options":{
      "sep-space":0
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Flat

The "flat" attribute sets whether the main labels are active or not, allowing for one or more flow selection.

{
  "type":"rankflow",
  "options":{
      "flat":true
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Styling

JavaScript rankflow charts also include a number of global stylings that allow you to manipulate the appearance and behaviors of your rankflow chart. They can be implemented into your chart by placing them within the "options" object.

Style

The "style" attribute defines global styling for rankflow elements.


Color Type

The "color-type" attribute sets the color algorithm used to color the items.


Color

The "color" attribute sets the color of the flow sections when "color-type" is set to "color".

{
  "type":"rankflow",
  "options":{
      "color-type":"color",
      "color":"#f90"
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Palette

The "palette" attribute defines a custom palette used by the rankflow if "color-type" is set to "palette".

{
  "type":"rankflow",
  "options":{
    "color-type":"palette",
    "palette":["red","orange","green","blue","purple"]
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Flow

The "flow" attribute allows you to change the appearance of the individual flow sections.

{
  "type":"rankflow",
  "options":{
    "style":{
      "flow":{
        "border-color":"black",
        "border-width":2
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Item

The "item-flow" and "item-overall" attributes allow you to change the appearance of the item names.

Item Flow

{
  "type":"rankflow",
  "options":{
    "style":{
      "item-flow":{
        "color":"yellow"
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Item Overall

{
  "type":"rankflow",
  "options":{
    "style":{
      "item-overall":{
        "color":"yellow"
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Label

The "label-overall" attribute allows you to change the appearance of the main label section header.

Label Overall

{
  "type":"rankflow",
  "options":{
    "style":{
      "label-overall":{
        "text":"My Custom Label"
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Rank

The "rank-left", "rank-right", and "rank-overall" attributes allow you to change the appearance of the rank markers on the left side of the chart, right side of the chart, and the main label section of the chart.

{
  "type":"rankflow",
  "options": {
    "style": {
      "rank-overall": {
        "background-color": "yellow",
        "color": "black"
      },
      "rank-left": {
        "background-color": "black"
      },
      "rank-right": {
        "background-color": "white",
        "color": "black"
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Tooltips

The "tooltip" attribute allows you to change the appearance of the tooltip that appears upon hovering over a flow selection.

{
  "type":"rankflow",
  "options": {
    "style": {
      "tooltip": {
        "text": "%text: #%rank for %scale-value"
      }
    }
  },
  /* Code omitted for brevity */
}
Loading...
Result
HTML
JavaScript
CSS
A beautiful chart

Summary

Got a question about how rankflow charts work? We are happy to help. Email support@zingchart.com or start a chat right here on this page for help.