HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <div id="point"> </div> <script> google.charts.load("current", {packages:["calendar"]}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn({ type: 'date', id: 'Date' }); data.addColumn({ type: 'number', id: 'Custom' }); data.addRows([ [ new Date(2019, 2, 1), -50 ], [ new Date(2019, 2, 5), -100 ], [ new Date(2019, 2, 9), 85 ], [ new Date(2019, 2, 17), -160], [ new Date(2019, 2, 24), 120 ], // Many rows omitted for brevity. [ new Date(2020, 3, 4), -120 ], [ new Date(2020, 3, 5), 152 ], [ new Date(2020, 3, 12), 75 ], [ new Date(2020, 3, 13), -110 ], [ new Date(2020, 3, 19), 95], [ new Date(2020, 3, 23), 79 ], [ new Date(2020, 3, 24), 100 ], [ new Date(2020, 3, 30), -150 ] ]); var chart = new google.visualization.Calendar(document.getElementById('point')); var options = { title: "Public Holidays", height: 400, noDataPattern: { backgroundColor: '#76a7fa', color: '#a0c3ff' } }; chart.draw(data, options); } </script> </body> </html>
OUTPUT
×

Save as Private