Highcharts Demo

author(s): Paweł Fus

by jeffgw

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/parallel-coordinates.js"></script>
<div id="summary"></div>
<div id="details"></div>

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

.highcharts-series-hover path {
  stroke: rgb(255, 66, 66);
  stroke-width: 2px;
}

JavaScript

details = [[1,95,44,76,45,47,73,60,68],[2,33,76,44,69,89,87,40,62],[3,24,46,96,56,45,36,68,63],[4,92,73,60,63,93,89,78,87],[5,33,53,32,60,25,72,28,39],[6,47,52,88,36,39,28,79,43],[7,55,75,80,80,91,47,42,82],[8,20,82,45,93,71,22,80,84],[9,55,92,44,61,64,52,80,91],[10,85,68,27,23,76,86,47,30]];

facility = 'AHC FOX-REDSTONE ARSENAL';

    Highcharts.chart('details', {
        chart: {
            type: 'spline',
            parallelCoordinates: true,
            parallelAxes: {
                lineWidth: 2
            }
        },
        title: {
            text: 'PTSD Outcomes Detail'
        },
        subtitle: {
        	text: facility
        },
        plotOptions: {
            series: {
                animation: false,
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                },
                states: {
                    hover: {
                        halo: {
                            size: 0
                        }
                    }
                },
                events: {
                    mouseOver: function () {
                        this.group.toFront();
                    }
                }
            }
        },
        credits: {
        	enabled:false
        },
        tooltip: {
            pointFormat: '<span style="color:{point.color}">\u25CF</span>' +
                '{series.name}: <b>{point.formattedValue} %</b><br/>'
        },
        xAxis: {
            categories: ["Date","PTSD Illness Burden Change","PTDS Cohort Size Change","BHDP Provider Input","BHDP Adoption AD","BHDP Adoption Non-AD","Therapeutic Alliance","PTSD EBT Rate","PTSD Dosage"],
            offset: 10
        },
        yAxis:[{
        	categories:[]
        }],
        colors: ['#79DAEB'],
        series: details.map(function (set, i) {
            return {
               ...