Parallel Coordinates

by jlbriggs

HTML

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

<div id="container" style="width:1000px;height:600px;margin:.5em;"></div>

<script>
var d          = new Date();
var pointStart = d.getTime();
Highcharts.setOptions({
    global: {
        useUTC:false
    },
    colors: [
        'rgba( 0,   154, 253, 0.9 )', //bright blue
        'rgba( 253, 99,  0,   0.9 )', //bright orange
        'rgba( 40,  40,  56,  0.9 )', //dark
        'rgba( 253, 0,   154, 0.9 )', //bright pink
        'rgba( 154, 253, 0,   0.9 )', //bright green
        'rgba( 145, 44,  138, 0.9 )', //mid purple
        'rgba( 45,  47,  238, 0.9 )', //mid blue
        'rgba( 177, 69,  0,   0.9 )', //dark orange
        'rgba( 140, 140, 156, 0.9 )', //mid
        'rgba( 238, 46,  47,  0.9 )', //mid red
        'rgba( 44,  145, 51,  0.9 )', //mid green
        'rgba( 103, 16,  192, 0.9 )'  //dark purple
    ],
    chart: {
        alignTicks:false,
        type:'',
        margin:[80,25,50,25],
        //borderRadius:10,
        //borderWidth:1,
        //borderColor:'rgba(156,156,156,.25)',
        //backgroundColor:'rgba(204,204,204,.25)',
        //plotBackgroundColor:'rgba(255,255,255,1)',
        style: {
            fontFamily: 'Abel,serif'
        },        
    events:{
            load: function() {
                this.credits.element.onclick = function() {
                    window.open(
                      'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
                    );
                 }
            }
        }           
    },
    credits: {
        text : 'http://stackoverflow.com/users/1011544/jlbriggs',
        href : 'http://stackoverflow.com/users/1011544/jlbriggs?tab=profile'
    },
    title: {
        text:'Test Chart Title',
        align:'left',
        margin:10,
        x: 10,
        style: {
   ...

CSS

@import url(https://fonts.googleapis.com/css?family=Changa+One|Loved+by+the+King|Fredericka+the+Great|Droid+Serif:400,700,400italic|Abel|Oswald:400,300,700);

body {
    font-family:Abel, Calibri, Helvetica, sans-serif;
    font-size:95%;
}

JavaScript

var chart;
var cData   = getCarData(cars);
var carData = cData.carData;
var catsTop = cData.catsTop;
var catsBot = cData.catsBot;
$(function() {
    $('#container').highcharts({
        chart       : { type    : 'line', alignTicks: false },
        title       : { text: 'Parallel Coordindates' },
        subtitle    : { text: 'Proof of Concept Using the classic \'cars\' data set' },
        legend      : { enabled : false },
        tooltip     : { enabled : false },
    plotOptions : { 
			series : {
				color : 'rgba(204,204,204,.25)',
                events: {
                    mouseOver: function() {                      
                        this.graph.attr('stroke', 'rgba(0,156,255,1)');
                        this.group.toFront();
                    },
                    mouseOut: function() {
                        this.graph.attr('stroke', 'rgba(204,204,204,0.25)');
                    }
                }
			}
		},
		xAxis  : [{
			opposite: true,
			tickInterval:1,
			lineWidth:0,
			tickWidth:0,
			gridLineWidth:1,
			gridLineColor:'rgba(0,0,0,0.5)',
			gridZIndex: 5,
			labels: {
				y:-17,	
				formatter: function() {
					return catsTop[this.value];
				},
				style: {
					fontWeight:'bold'
				}
			}
		},{
			linkedTo:0,
			lineWidth:0,
			tickWidth:0,
			gridLineWidth:0,
			labels: {
                y:10,	
				formatter: function() {
					return catsBot[this.value];
				},
				style: {
					fontWeight:'bold'
				}
			}
		}],
		yAxis  : {
			min:0,
			max:100,
			gridLineWidth:0,
            tickWidth:0,
			lineWidth:0,
			labels: {
				enabled: false
			}
		},
       	series : carData
	});	
    chart = $('#container').highcharts();
})

function getCarData(cars) {
    var mpgs 	= [];
	var cyls 	= [];
	var dsps 	= [];
	var hps 	= [];
	var lbss 	= [];
	var accs 	= [];
	var years 	= [];
	var mins 	= {};
	var maxs 	= {};
	var ranks 	= {};
	var pData 	= {};
	
	var mpg;
	var cyl;
	var dsp;
	var hp;
	var lbs;
	var acc;
	var year;
	       ...