Risk Map

Joined 4 charts Together

by Amit Sinha

HTML

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

<div id="container" style="min-width: 510px; height: 600px; max-width: 600px; margin: 0 auto"></div>

JavaScript

$(function () {

var data1 = [
           {name: 'Strategic Risks',   y: 20, color: 'rgba(147,206,37,0.7)'},
           {name : 'Financial Risks',  y: 20, color: 'rgba(147,206,37,0.7)'},
           {name: 'Operatonal Risks',  y: 20, color: 'rgba(147,206,37,0.7)'},
           {name: 'IT and Systems Risks', y: 20, color: 'rgba(147,206,37,0.7)'},
           {name: 'Legal and Compliance Risks', y:  20, color: 'rgba(147,206,37,0.7)' }
            ],
data2 = [
           {name: 'Strategic Risks',   y: 20, color: 'rgba(31,129,209,0.7)'},
           {name : 'Financial Risks',  y: 20, color: 'rgba(31,129,209,0.7)'},
           {name: 'Operatonal Risks',  y: 20, color: 'rgba(31,129,209,0.7)'},
           {name: 'IT and Systems Risks', y: 20, color: 'rgba(31,129,209,0.7)'},
           {name: 'Legal and Compliance Risks', y:  20, color: 'rgba(31,129,209,0.7)' }
            ],
data3 = [
{name: 'Strategic Risks',   y: 20, color: 'rgba(255,0,0,0.7)', 'risks':["3","2","4","2","3"]},{'name' : 'Financial Risks',  y: 20, color: 'rgba(255,0,0,0.7)'},
           {name: 'Operatonal Risks',  y: 20, color: 'rgba(255,0,0,0.7)'},
           {name: 'IT and Systems Risks', y: 20, color: 'rgba(255,0,0,0.7)'},
           {name: 'Legal and Compliance Risks', y:  20, color: 'rgba(255,0,0,0.7)' }
            ],
borderWidth= 1,
borderColor='#fff';
    $('#container').highcharts({
        chart: {
       // polar: true,
            plotBackgroundColor: '#ccc',
            plotBorderWidth: 0,//null,
            //plotShadow: false,
        },
        title: {
            text: 'Risk Roadmap'
        },
        tooltip: {
            pointFormat: 'Score: <b>{point.y:.1f}</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: false,
                cursor: 'pointer'
            },
            scatter: {
                allowPointSelect: false,
                cursor: 'pointer',
                size: '80%',
            innerSize: '65%',
            }
        },
   ...