Highcharts Demo

author(s): Torstein Hønsi

by Kesav Telaprolu

HTML

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

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

JavaScript

(input =>{
var markerColors,symbol;
var dataSeries=[
[66.5,57.5,49,52.5,59,48,41,48.5,65,86,97,54],//seansonalMilk
[72.86432161,81.90954774,58.29145729,49.74874372,39.1959799,48.74371859,60.8040201,39.1959799,78,88,56,97],//LessPlastic
[50.24875622,64.67661692,48.75621891,54.22885572,48.75621891,48.25870647,45.27363184,44.7761194,76,98,35,67],//FrameFreshMilk
[58.58585859,43.43434343,48.98989899,51.01010101,58.58585859,54.54545455,43.43434343,41.41414141,76,87,98,56],//LessProcessedMoreGoodness
[60,43.41463415,54.14634146,41.95121951,31.70731707,36.58536585,38.04878049,30.24390244,78,45,65,77],//easyOpenSeal
[65,74.5,57.5,64.5,58.5,51,45,51.5,76,34,54,67],//piakaMilk
[12,23,45,65,87,29,84,63,98,65,77,88], //concept 7
[93,54,66,73,60,29,45,65,56,78,98,70] //concept 8
];
for(var item = 0; item< input.conceptLabels.length; item++){
	if(item == 0){
  	markerColors = 'rgb(62,177,204)';
    symbol = 'square';
  }else if(item == 1){
  	markerColors = 'rgb(122,34,128)';
    symbol = 'diamond';
  }else if(item == 2){
  	markerColors = 'rgb(239,82,5)';
    symbol = 'url(http://i68.tinypic.com/a2cadu.png)';
  }else if(item == 3){
  	markerColors = 'RGB(197,0,23)';
    symbol = 'circle';
  }else if(item == 4){
  	markerColors = 'RGB(62,155,44)';
    symbol = 'url(http://i68.tinypic.com/1547vx1.png)';
  }else if(item == 5){
  	markerColors = 'RGB(19,26,105)';
    symbol = 'url(http://i67.tinypic.com/2rzc2fm.png)';
  }else if(item == 6){
  	markerColors = 'RGB(62,155,44)';
    symbol = 'triangle-down';
  }else if(item == 7){
  	markerColors = 'RGB(19,26,105)';
    symbol = 'circle';
  }
  
  dataSeries[item] ={
        name:input.conceptLabels[item].name,
        color: markerColors,
        data:input.conceptLabels[item].value,
        marker: {
            symbol: symbol,
            radius: 7
        }
    }
}

var chart = new Highcharts.chart('container', {
    chart: {
    		width: 900,
      	height: 500,
        marginTop:100,
        marginRight:20,
       ...