Time Spread

author(s): Torstein Hønsi

by Ying Chor Ding

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div class="time-spread">
  <div class="row">
    <div class="col-md-3">
      <div class="time-spread-port">
        <select class="port_name" id="time-spread-port-name">
          <option value="">Pls Select Port</option>
          <option value="Fujairah">Fujairah</option>
          <option value="Hongkong">Hongkong</option>
          <option value="Houston">Houston</option>
          <option value="Rotterdam">Rotterdam</option>
          <option value="Shanghai">Shanghai</option>
          <option value="Shenzhen">Shenzhen</option>
          <option value="Singapore">Singapore</option>
          <option value="Zhoushan">Zhoushan</option>
        </select>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="time-spread-grade">
        <select class="grade_name" id="time-spread-grade-name" disabled>
          <option value="">Pls Select Grade</option>
          <option value="RMG380">RMG380</option>
        </select>
      </div>
    </div>
    
    <div class="col-md-3">
      <div class="time-spread-month">
        <select class="month_code" id="time-spread-month-code" disabled>
          <option value="">Pls Select Months</option>
          <option value="2017-11">Oct-2017/Nov-2017</option>
          <option value="2017-12">Nov-2017/Dec-2017</option>
          <option value="2018-01">Dec-2017/Jan-2018</option>
          <option value="2018-02">Jan-2018/Feb-2018</option>
          <option value="2018-03">Feb-2018/Mar-2018</option>
  ...

JavaScript

$(document).ready(function() {
  var $selectPort = $('#time-spread-port-name');
  var $selectGrade = $('#time-spread-grade-name');
  var $selectMonths = $('#time-spread-month-code');
  var $selectChart = $('#container').hide();
  

  $selectPort.change(function(){
  	$selectGrade.attr('disabled', false);
  });
  $selectGrade.change(function(){
    $selectMonths.attr('disabled', false);
  });
  
  $('.btn-submit').on('click', function(){
  if( $('#time-spread-port-name').val() === '' ){
  	 alert("Please select Port");
  }else if($('#time-spread-grade-name').val() === '' ){
      alert("Please select Grade");
  }else if($('#time-spread-month-code').val() === '' ){
      alert("Please select Months");
  }else {
      alert('submitted');
      $selectChart.show();
    }
  
    
    //$selectChart.show();
  });
});//end



$(function() {
  Highcharts.setOptions({
    //colors: ['#3ca1cc', '#055f7d']
  });

  $('#container').highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Latest Historical Price'
    },
    subtitle: {
      text: ''
    },
    xAxis: {
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
    },
    yAxis: {
      title: {
        text: ''
      }
    },
    tooltip: {
      crosshairs: true,
      shared: true
    },
    plotOptions: {
      series: {
        events: {
          legendItemClick: function(event) {
            var thisSeries = this,
              chart = this.chart;

            if (this.visible === true) {
              this.hide();
            } else {
              this.show();
              chart.series.forEach(function(el, inx) {
                if (el !== thisSeries) {
                  el.hide();
                }
              });
            }
            event.preventDefault();
          }
        }
      },
      spline: {
        marker: {
          radius: 4,
          lineColor: '#666666',
          lineWidth: 1
        }
      }
    },
   ...