Highcharts Demo

author(s): Torstein Hønsi

by J. Albert Bowden

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
	$('#container').highcharts({
	    
	    chart: {
	        marginBottom: 120,
	        width: 500
	    },
	    
	    legend: {
            borderWidth: 0,
            layout: 'horizontal',
            verticalAlign: 'bottom',
            maxHeight: 80,
            navigation: {
            	activeColor: '#3E576F',
				animation: true,
				arrowSize: 12,
				inactiveColor: '#CCC',
				style: {
					fontWeight: 'bold',
					color: '#333',
					fontSize: '12px'	
				}
			}
	    },
	    
        series: [{
	        data: [6,4,2],
	        name: 'PES.SERV.RampaEjemploTextLargo1',
            showInLegend: true
	    }, {
	        data: [7,3,2],
	        name: 'PES.SERV.RampaEjemploTextLargo2'   
	    }, {
	        data: [9,4,8],
	        name: 'PES.SERV.RampaEjemploTextLargo3'   
	    }, {
	        data: [1,2,6],
	        name: 'PES.SERV.RampaEjemploTextLargo4'        
	    }, {
	        data: [4,6,4],
	        name: 'PES.SERV.RampaEjemploTextLargo5'        
	    }, {
	        data: [1,2,7],
	        name: 'PES.SERV.RampaEjemploTextLargo6'        
	    }, {
	        data: [4,2,5],
	        name: 'PES.SERV.RampaEjemploTextLargo7'        
	    }, {
	        data: [8,3,2],
	        name: 'PES.SERV.RampaEjemploTextLargo9'        
	    }, {
	        data: [4,5,6],
	        name: 'PES.SERV.RampaEjemploTextLargo10'        
	    },{
	        data: [6,4,2],
	        name: 'PES.SERV.RampaEjemploTextLargo1'
	    }, {
	        data: [7,3,2],
	        name: 'PES.SERV.RampaEjemploTextLargo2'   
	    }, {
	        data: [9,4,8],
	        name: 'PES.SERV.RampaEjemploTextLargo3'   
	    }, {
	        data: [1,2,6],
	        name: 'PES.SERV.RampaEjemploTextLargo4'        
	    }, {
	        data: [4,6,4],
	        name: 'PES.SERV.RampaEjemploTextLargo5'        
	    }, {
	        data: [1,2,7],
	        name: 'PES.SERV.RampaEjemploTextLargo6'        
	    }, {
	        data: [4,2,5],
	        name: 'PES.SERV.RampaEjemploTextLargo7'        
	    }, {
	        data:...