github.com/diadata-org/diadata@v1.4.593/frontend/derivatives/VIX.js (about) 1 var chartCVI; 2 3 IndexInfo = { 4 name: 'Crypto Volatility Index', 5 symbol: 'CVI', 6 timeInterval: 30000, 7 timeUpdate: 10000 8 } 9 10 let now = Math.round(Date.now()/1000); 11 let beforeNow = (now - IndexInfo.timeInterval).toString(); 12 now = now.toString() 13 14 getApi = { 15 prefill: 'https://api.diadata.org/v1/cviIndex?starttime=1&endtime=' + beforeNow, 16 update: 'https://api.diadata.org/v1/cviIndex?starttime=' + beforeNow + '&endtime=' + now, 17 } 18 19 // ------------------------------------------------------------------------------------------------ 20 // Prefill with data 21 // ------------------------------------------------------------------------------------------------ 22 23 function getHistoric(url, callback) { 24 var request = new XMLHttpRequest() 25 request.open('GET', url, true) 26 27 request.onload = function() { 28 var data = JSON.parse(this.response) 29 if(this.status == 200) { 30 if (typeof callback === "function") { 31 callback(data) 32 } 33 } else if(this.status == 404) { 34 console.log('Not found error') 35 } 36 } 37 request.onerror = function() { 38 console.log('Request error.') 39 } 40 request.send() 41 } 42 43 44 // Fill chart with data upon loading screen 45 getHistoric(getApi.prefill, function(obj) { 46 console.log("prefill"); 47 prefillArray = [] 48 for(i = 0; i < obj.length; i++) { 49 prefillArray.push([Date.parse(obj[i].Timestamp), obj[i].Value]); 50 } 51 chartCVI.series[0].setData(prefillArray); 52 }); 53 54 55 // ------------------------------------------------------------------------------------------------ 56 // As soon as chart is loaded update asynchonously 57 // ------------------------------------------------------------------------------------------------ 58 59 function requestData() { 60 let now = Math.round(Date.now()/1000); 61 let beforeNow = (now - IndexInfo.timeInterval).toString(); 62 $.ajax({ 63 cache: true, 64 url: 'https://api.diadata.org/v1/cviIndex?starttime=' + beforeNow + '&endtime=' + now, 65 type: 'GET', 66 67 success: function(points) { 68 if(points.length > 1) { 69 var point = points[points.length-1]; 70 } else { 71 var point = points; 72 } 73 var date = Date.parse(point.Timestamp); 74 console.log(point) 75 76 L = chartCVI.series[0].xData.length; 77 if(L == 0) { 78 chartCVI.series[0].addPoint([date, point.Value]); 79 console.log("Initial fill: " + point.Timestamp) 80 } else if(L > 0 && date != chartCVI.series[0].xData[L-1]){ 81 chartCVI.series[0].addPoint([date, point.Value]); 82 console.log("Updated point at: " + point.Timestamp) 83 } 84 85 setTimeout(requestData, IndexInfo.timeUpdate); 86 }, 87 }); 88 } 89 90 // ------------------------------------------------------------------------------------------------ 91 // Draw chart 92 // ------------------------------------------------------------------------------------------------ 93 94 document.addEventListener('DOMContentLoaded', function() { 95 96 chartCVI = Highcharts.stockChart('container', { 97 chart: { 98 type: 'spline', 99 events: { 100 load: requestData, 101 } 102 }, 103 credits: { 104 text: 'DIAdata', 105 href: 'https://diadata.org' 106 }, 107 title: { 108 text: IndexInfo.name, 109 }, 110 xAxis: { 111 tickPixelInterval: 150, 112 maxZoom: 20 * 1000, 113 title: { 114 margin: 10, 115 } 116 }, 117 yAxis: { 118 minPadding: 0.2, 119 maxPadding: 0.2, 120 title: { 121 text: 'Index value', 122 margin: 80 123 } 124 }, 125 series: [ 126 { 127 name: IndexInfo.symbol, 128 data: [] 129 }, 130 ] 131 }); 132 }); 133