Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="https://code.highcharts.com/highcharts.src.js"></script>
<script src="https://code.highcharts.com/modules/data.src.js"></script>
  <div id="masterDiv">
    <h2>Design Objectives</h2> 
    <div id="tabs">
        <ul>
            <li>
                <a href="#tab-1">Line Graph</a>
            </li>
            <li>
                <a href="#tab-2">Bar Graph</a>    
            </li>
            <li>
                <a href="#tab-3">Objective View</a>
            </li>
        </ul>
        <div id="tab-1">
            <div id="objective_line">    
            </div>
        </div>
        <div id="tab-2">
            <div id="objective_bar"></div>
        </div>
        <div id="tab-3">
            <div id="obj_view"></div>    
        </div>
        </div>
<br>
<br>
<div class="selector">
    <div id="exiting" class="category on">
        <h3>Design Cost Breakdown</h3>
    </div>
    <div id="entering" class="category off">
     <h3>Parameter Variations</h3>
    </div>  
    </div>    
<div id="containerBar" style="min-width: 310px; height: 450px; margin: 0 auto"></div>
<div id="table_div" style="min-width: 310px; height: 450px; margin: 0 auto"></div>

JavaScript

$(document).ready(function() {
    $("#table_div").hide();
});

$("#entering").click(function(){
    $("#containerBar").hide();
    $("#table_div").show();
    $(this).removeClass("off").addClass("on");
    $("#exiting").removeClass("on").addClass("off");
 }); 

$("#exiting").click(function(){
    $("#table_div").hide();
    $("#containerBar").show();
    $(this).removeClass("off").addClass("on");
    $("#entering").removeClass("on").addClass("off");
});

$( function() {
    $( "#tabs" ).tabs();
  } );

$(function () {
    
    Highcharts.chart('obj_view', {
        
        chart: {
            type: 'column'
    },

        title: {
            text: 'Objective Breakdown'
    },

    
        xAxis: {
            tickmarkPlacement: 'on',
            title: {
                text: 'Design Iterations'
            }
    },
        
        yAxis:{
            min: 0,
            title: {
                text: 'Cost in $ Millions',
                align: 'low'
                },
            labels: {
                overflow: 'justify'
                }
            },
        
    tooltip: {
        valueSuffix: ' millions',
        shared: true
    },
        
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true
            }
        }
    },
        
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        y: 20,
        floating: true
    }, 
        
    data: {
        googleSpreadsheetKey: '1DsSVLzwRE3p1trqynO4O2LRwwxnvfkBK9xOGzLHAY4Q',
        switchRowsAndColumns: true
    }
        
    })
});


$(function () {
    
    Highcharts.chart('objective_line', {
        
        chart: {
            type: 'line'
    },

        title: {
            text: 'Overall Design Objective Comparisons'
    },

    
        xAxis: {
            tickmarkPlacement: 'on',
            title: {
                text: 'Design Objectives'
            }
    },
        
        yAxis:{
           ...