Highcharts Demo

author(s): Torstein Hønsi

by Santosh Giridhara

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 800px; height: 250px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    backgroundColor: 'white',
    events: {
      load: function() {

        // Draw the flow chart
        var ren = this.renderer,
          colors = Highcharts.getOptions().colors,
          rightArrow = ['M', 75, 0, 'L', 100, 0, 'L', 95, 5, 'M', 100, 0, 'L', 95, -5],
          leftArrow = ['M', 100, 0, 'L', 0, 0, 'L', 5, 5, 'M', 0, 0, 'L', 5, -5];

        ren.label('BA', 10, 100)
          .attr({
            fill: colors[2],
            stroke: 'white',
            'stroke-width': 2,
            width: 100,
            r: 5
          })
          .css({
            color: 'white'
          })
          .add()
          .shadow(true);

        ren.path(['M', 75, 35, 'L', 100, 0, 'M', 100, 0])
          .attr({
            'stroke-width': 2,
            stroke: 'black'

          }).translate(45, 65)
          .add();

        ren.path(['M', 75, 35, 'L', 50, 0, 'M', 50, 0])
          .attr({
            'stroke-width': 2,
            stroke: 'black'

          }).translate(70,125)
          .add();

        ren.label('FA', 150, 50)
          .attr({
            r: 5,
            width: 100,
            fill: colors[1]
          })
          .css({
            color: 'white',
            fontWeight: 'bold'
          })
          .add();

        ren.path(rightArrow)
          .attr({
            'stroke-width': 2,
            stroke: colors[1]
          })
          .translate(182, 60)
          .add();

        ren.label('FC', 285, 50)
          .attr({
            r: 5,
            width: 100,
            fill: colors[1]
          })
          .css({
            color: 'white',
            fontWeight: 'bold'
          })
          .add();

        ren.path(rightArrow)
          .attr({
            'stroke-width': 2,
            stroke: colors[1]
          })
          .translate(318, 60)
          .add();

        ren.label('DC', 420, 50)
          .attr({
            r: 5,
            width: 100,
            fill:...