an phat demo

Vupham

by takiechisokai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data-2012-2022.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px; width: 100%"></div>

<div id="moment">

</div>
</diV>

JavaScript

$("#moment").html(moment().toDate());

var data = [{"TradingDate":"\/Date(1544667526000)\/","MatchPrice":940.0,"BasicPrice":1000.0,"MatchQuantity":0.0},{"TradingDate":"\/Date(1544671095000)\/","MatchPrice":945.0,"BasicPrice":1000.0,"MatchQuantity":0.0},{"TradingDate":"\/Date(1544684423000)\/","MatchPrice":930.0,"BasicPrice":1000.0,"MatchQuantity":0.0},{"TradingDate":"\/Date(1544691616000)\/","MatchPrice":930.0,"BasicPrice":1000.0,"MatchQuantity":0.0}];

var index = [],
    volume = [],
    averageLine = 0,
    featureData;
// split the data set into index and volume
var dataLength = data.length;

i = 0;
if (dataLength > 0) {
  averageLine = data[0].PriorMarketIndex;
  featureData = data[0];

  //AddDataToChartBoard(featureData, targetElement);
}
for (i; i < dataLength; i += 1) {
  index.push([
    moment(data[i].TradingDate).valueOf(), // the date
    data[i].MatchPrice // giá hiện tại
  ]);
  volume.push([
    moment(data[i].TradingDate).valueOf(), // the date
    data[i].BasicPrice // KL Khớp hiện tại
  ]);
}

Highcharts.chart('container', {
		credits:{
    	enabled: !1
    },

    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
						hour: '%H:%M',
        },
        gridLineWidth: 1,
      	tickWidth: 1,
        //startOnTick: true,
        tickInterval: 3600*1000
    },
		
    tooltip: {
        xDateFormat: '%d-%m-%Y %H:%M',
        shared: true
    },
    
    yAxis: [{
    		title: 'Index',
        tickWidth: 1,
        plotLines: [{
        	color: 'red', // Color value
          dashStyle: 'longdashdot', // Style of the plot line. Default to solid
          value: 144, // Value of where the line will appear
          width: 1 // Width of the line    
        }],
        gridLineWidth: 1
    },{
    		title: 'Volume',
        gridLineWidth: 1,
    		opposite: 1
    }],
    
    series: [{
    		yAxis: 0,
        data: index,
        //pointStart: Date.UTC(2010, 0, 1),
        //threshold: 144,
        //negativeColor:'red',
       ...