Order Flow Sankey

Example for blog post https://davidpallmann.blogspot.com/2018/12/visualizing-workflow-activitty-with.html

by davidpallmann

HTML

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

<div id="container"></div>

CSS

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

<div id="container"></div>

JavaScript

Highcharts.chart('container', {

    title: {
        text: 'Order Flow'
    },

    series: [{
        keys: ['from', 'to', 'weight'],
        data: [
            ['Online Order', 'Shopping Cart Active', 25 ],
            ['Online Order', 'Order Submitted', 30 ],
            ['Phone Order', 'Order Submitted', 5 ],
            ['Order Submitted', 'Payment Verification', 35 ],
            ['Payment Verification', 'Credit Review', 7 ],
            ['Payment Verification', 'Credit Approved', 12 ],
            ['Payment Verification', 'Credit Denied', 7 ],
            ['Payment Verification', 'Processing Payment', 1 ],
            ['Payment Verification', 'Order Prepaid', 8 ],
            ['Payment Verification', 'Payment Denied', 1 ],
            ['Credit Approved', 'Order Fulfillment', 12 ],
            ['Order Prepaid', 'Order Fulfillment', 3 ],
            ['Order Fulfillment', 'Not Started', 7 ],
            ['Order Fulfillment', 'Gathering SKUs from Warehouse', 10 ],
            ['Order Fulfillment', 'Gift Wrapping', 3 ],
            ['Order Fulfillment', 'Order Assembled', 7 ],
            ['Order Assembled', 'Shipping', 1 ],
            ['Shipping', 'Packaging Order', 1 ],
            ['Shipping', 'On Delivery Dock', 3 ],
            ['Shipping', 'Order Picked up by Carrier', 1 ],
            ['Shipping', 'Order Rejected by Carrier', 1 ],
            ['Shipping', 'Order Delivered', 1 ]
         ],
        type: 'sankey',
        name: 'Order Flow'
    }]
});