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.

https://app.zingsoft.com/demos/embed/0GA9UMMX
https://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 */
}
https://app.zingsoft.com/demos/embed/9TOUPZGL
https://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 */
}
https://app.zingsoft.com/demos/embed/WNRXX4RY
https://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 */
}
https://app.zingsoft.com/demos/embed/8F3O91ZD
https://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 */
}
https://app.zingsoft.com/demos/embed/JXEM1RZU
https://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 */
}
https://app.zingsoft.com/demos/embed/HVI1BSU6
https://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 */
}
https://app.zingsoft.com/demos/embed/Q1XZX8PR
https://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 */
}
https://app.zingsoft.com/demos/embed/NQ87TCEI
https://app.zingsoft.com/demos/embed/NQ87TCEI

Item Overall

{
  type: "rankflow",
  options: {
    style: {
      'item-overall': {
        color: "yellow"
      }
    }
  },
  /* Code omitted for brevity */
}
https://app.zingsoft.com/demos/embed/85E6I485
https://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 */
}
https://app.zingsoft.com/demos/embed/W1TLVUQ3
https://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 */
}
https://app.zingsoft.com/demos/embed/K0R697HO
https://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 */
}
https://app.zingsoft.com/demos/embed/AYIE355C
https://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.