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.

A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/0GA9UMMX

          
{
  "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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/9TOUPZGL

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/WNRXX4RY

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/8F3O91ZD

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/JXEM1RZU

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/HVI1BSU6

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/Q1XZX8PR

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/NQ87TCEI

Item Overall


          
{
  "type":"rankflow",
  "options":{
    "style":{
      "item-overall":{
        "color":"yellow"
      }
    }
  },
  /* Code omitted for brevity */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/85E6I485

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/W1TLVUQ3

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/K0R697HO

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 */
}
        
A ZingChart Embedded Demohttps://app.zingsoft.com/demos/embed/AYIE355C

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.