Highcharts Demo

author(s): Torstein Hønsi

by jeffgw

HTML

<script src="https://code.highcharts.com/highcharts.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.jquery.com/jquery-3.3.1.slim.min.js"
  integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
  crossorigin="anonymous"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<button id="help_one">
Help me with Encs/day
</button>

<p id="help_one_text" style="display:none">
Help text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget ex eu est tincidunt tristique. Cras ac lacus sed sem dignissim accumsan id sed magna. Etiam et risus condimentum purus semper posuere in a elit. Cras eget aliquam leo, non vehicula massa. Aenean vel odio faucibus, efficitur ipsum ut, aliquet neque. 
</p>

JavaScript

var chart = Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    credits: {
    	enabled: false
    },
    title: {
        text: 'Productivity Indicators'
    },
    xAxis: [{
        categories: ['Provider A', 'Provider B', 'Provider C', 'Provider D']
    }],
    yAxis: [{
        min: 0,
        title: {
            text: null
        }
    },{
    		labels: {
            enabled: false
        },
        title: {
            text: null
        }
    },{
    	labels: {
            enabled: false
        },
        title: {
            text: null
        }
    }],
    plotOptions: {
        column: {
            stacking: 'normal'
        }
    },
    series: [{
        name: 'E&M wRVU/enc',
        data: [0.5,0.3,0.6, 0.7],
        color:'blue'
    }, {
        name: 'Proc1 wRVU/enc',
        data: [0.3, 0.4, 0.2, 0.2],
        color:'red'
    }, {
        name: 'Proc2 wRVU/enc',
        data: [0.3, 0.1, 0.1, 0.2],
        color:'green'
    },{
        name: 'Encs/day',
        yAxis:1,
        type:'spline',
        color:'#f1e41d',
        lineWidth:2,
        zIndes:-1,
        data: [10,4,6,7]
        
    },{
        name: '% Days gen wrklod',
        yAxis:2,
        type:'spline',
        color:'black',
        zIndes:-1,
        data: [100,121,132,150]
        
    }]
});


// the button action
$('#help_one').click(function () {
		$('#help_one_text').show();
		setInterval(function() {
 				 chart.series[3].update({lineWidth:10}, false);
         chart.series[3].update({color:'yellow'}, false);
    		chart.redraw();
		}, 800);
    setInterval(function() {
 				 chart.series[3].update({lineWidth:2}, false);
         chart.series[3].update({color:'#f1e41d'}, false);
    		chart.redraw();
		}, 1800);
});