Percentage area

author(s): Torstein Hønsi

by ncapito

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 420px;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

//var myData = getDataByMinute();
var myData = getDataBySecond();
Highcharts.chart('container', {
    chart: {
        type: 'funnel3d',
      options3d: {
        enabled: true,
        alpha: 10,
        depth: 50,
        viewDistance: 50
      }
    },
    title: {
        text: 'WPM'
    },
   	colors:['black', 'green','red'],
    xAxis: {
    		allowDecimals: false,
        tickmarkPlacement: 'off',
        title: {
            enabled: false
        },
       
    },
    
    
    series: myData.series
});

function getDataByMinute(){
  var paceData = theData();
  //categories
		//data 
		let categories = [];
		let data = {
			'Slow': [],
			'Average':[],
			'Fast':[]
		};
		
	 	paceData.Instances.forEach((p)=>{
			if(p.TotalSpeechTime < 12){
				//skip this the data point is too small for WPM
				return;
			}
			categories.push(p.StartingMinute);
			data[p.Value].push(p.WordsPerMinute);
			
			if(p.Value != 'Slow'){
				data['Slow'].push(null)
			}
			if(p.Value != 'Average'){
				data['Average'].push(null)
			}
			if(p.Value != 'Fast'){
				data['Fast'].push(null)
			}
		});
		return {
			categories: categories,
			series: [
				{
					name: 'Slow',
					data: data['Slow']
				},
				{
					name: 'Average',
					data: data['Average']
				},
				{
					name: 'Fast',
					data: data['Fast']
				}
			]
		}

}


function getDataBySecond(){
  var paceData = theData();
  //categories
		//data 
		let categories = [];
		let data = {
			'Slow': [],
			'Average':[],
			'Fast':[]
		};
		let time = 0;
	 	paceData.Instances.forEach((p)=>{
    
    	p.Instances.forEach((c)=>{
         
        categories.push(time);
        time+=c.TotalSpeechTime;
        data[c.Value].push(p.WordsPerMinute);

        if(c.Value != 'Slow'){
          data['Slow'].push(null)
        }
        if(c.Value != 'Average'){
          data['Average'].push(null)
        }
        if(c.Value != 'Fast'){
          data['Fast'].push(null)
        }
      });
		
		});
		return {
			categories:...