JSFiddle - React, Tailwind, and code Playground

by christauff

HTML

<script src="http://www.eia.gov/global/scripts/jquery/eia_utils.js"></script>
<script src="http://www.eia.gov/global/scripts/jquery/jquery-1.7.1.min.js"></script>
<script src="http://www.eia.gov/global/scripts/jquery/highcharts/js/highcharts.2.2.0r.js"></script>
<script src="http://www.eia.gov/global/scripts/jquery/highcharts/js/eia-theme.js"></script>
<script src="http://www.eia.gov/global/scripts/JQuery/highcharts/js/modules/captions.js"></script>
<script>
    $("#get_pettop_total").fancybox();
</script>

<div id="fig1" style="height: 400px"></div>
<p><a id="get_pettop_total" href="##inline_highchart2">get_pettop_total</a></p>
<p><a id="get_petcop_total" href="##inline_highchart2">get_petcop_total</a></p>

<div style="display:none">
    <div id="inline_highchart2">
        <div id="fig2"></div>
    </div>
</div>

JavaScript

$(function () {
    var chart = new Highcharts.Chart({
      chart: {
        renderTo: 'fig2'
        },
        series: [{
            data: []        
        }]
    });
    
    
    // click on sparkline and load new series data
    $('#get_pettop_total').click(function() {
      chart.series[0].setData([129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 100.6, 54.4, 29.9, 71.5, 106.4]);
      chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
      chart.setTitle({ text: 'get_pettop_total'});
      });
    
    $('#get_petcop_total').click(function() {
      chart.series[0].setData([29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]);
	  chart.xAxis[0].setCategories(['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D']);
      chart.setTitle({ text: 'get_petcop_total'});
      chart.yAxis[0].setTitle({ text: '#petroleum_std_unit#' });
        chart.series[0].name='#petroleum_std_unit#';
      });
});