< html>
< head>
< script src = " https://cdn.anychart.com/releases/v8/js/anychart-base.min.js" > </ script>
< script src = " https://cdn.anychart.com/releases/v8/js/anychart-ui.min.js" > </ script>
< script src = " https://cdn.anychart.com/releases/v8/js/anychart-exports.min.js" > </ script>
< script src = " https://cdn.anychart.com/releases/v8/js/anychart-calendar.min.js" > </ script>
< script src = " https://cdn.anychart.com/releases/v8/js/anychart-data-adapter.min.js" > </ script>
< link href = " https://cdn.anychart.com/releases/v8/css/anychart-ui.min.css" type = " text/css" rel = " stylesheet" >
< link href = " https://cdn.anychart.com/releases/v8/fonts/css/anychart-font.min.css" type = " text/css" rel = " stylesheet" >
< style type = " text/css" >
html, body, #container {
width : 100%;
margin : 0;
padding : 0;
}
.anychart-tooltip {
background : #fff;
color : #333;
box-shadow : 0 0 3px #333;
}
.anychart-tooltip div {
font-size : 10px;
min-width : 350px;
}
.anychart-tooltip td {
padding : 0 5px;
}
</ style>
</ head>
< body>
< div id = " container" > </ div>
< script>
function tooltipFormatter ( ctx ) {
var events = ctx. getData ( 'events' ) ;
var tooltip = document. createElement ( 'div' ) ;
var table = document. createElement ( 'table' ) ;
var thead = table. createTHead ( ) ;
thead. style. fontWeight = 'bold' ;
var tr = thead. insertRow ( ) ;
var cell = tr. insertCell ( ) ;
cell. textContent = 'Time' ;
cell = tr. insertCell ( ) ;
cell. textContent = 'Event' ;
cell = tr. insertCell ( ) ;
cell. textContent = 'Volatility Level' ;
var tbody = table. createTBody ( ) ;
for ( var i = 0 ; i < events. length; i++ ) {
var row = tbody. insertRow ( ) ;
Object. values ( events[ i] ) . forEach ( function ( value ) {
cell = row. insertCell ( ) ;
cell. textContent = value;
} ) ;
}
tooltip. appendChild ( table) ;
return tooltip. innerHTML;
}
anychart. onDocumentReady ( function ( ) {
anychart. data. loadJsonFile (
'https://cdn.anychart.com/samples/calendar-chart/economic-calendar/data.json' ,
function ( data ) {
var dataset = anychart. data. set ( data) ;
var mapping = dataset. mapAs ( {
x: 'timestamp' ,
value: 'averageVolatility'
} ) ;
var chart = anychart. calendar ( mapping) ;
var customColorScale = anychart. scales. linearColor ( ) ;
customColorScale. colors ( [ '#f1ad37' , '#db340a' ] ) ;
chart. colorScale ( customColorScale) ;
chart. tooltip ( )
. useHtml ( true )
. hideDelay ( 3000 )
. format ( tooltipFormatter) ;
chart. listen ( 'chartDraw' , function ( ) {
document. getElementById ( 'container' ) . style. height = chart. getActualHeight ( ) + 'px' ;
} ) ;
chart. container ( 'container' ) ;
chart. draw ( ) ;
}
) ;
} ) ;
</ script>
</ body>
</ html>
Copy