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" data-first-title="Pls Select Port">
    <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" data-first-title="Pls Select Grade" style="">
    <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" data-first-title="Pls Select Months" style=""><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><option value="2018-04">Mar-2018/Apr-2018</option><option value="2018-05">Apr-2018/May-2018</option><option...

CSS

Default click on submit will pop out the error message as 'Please select Port' If select

JavaScript

$(document).ready(function(){
	var selectPort = $('#time-spread-port-name');
  var selectGrade = $('#time-spread-grade-name').attr('disabled',true);
  var selectMonths = $('#time-spread-month-code').attr('disabled',true);
  var selectChart = $('#container').hide();
  
  $('.time-spread').click(function(){
  	alert('Please select Port!');
  });
});

$(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
        }
      }
    },
    series: [{
      animation: {
        duration: 7000
      },
      name: 'MGO',
      marker: {
        symbol: 'square'
      },
      data: [0, 6.9, 9.5, 15.5, 19.2, 21.5, 28.2, 2.5, 23, 18.3, 13.9, 15]
        //data: []
    }, {
      animation: {
        duration: 2000
      },
      name: 'RMG380',
      visible: false,
      marker: {
        symbol: 'circle'
      },
      data: [6.0, 7.9, 9.5, 16.5, 20.2, 21.5, 29.2, 3.5, 28, 18.3, 13.9, 20]
        //data: []
    },...