JSFiddle - React, Tailwind, and code Playground

by Bo Andersen

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
NOT COMPLETED!

<a href="#" id="download-chart" download="chart.png">
  <div id="curve_chart" style="width: 900px; height: 500px"></div>
</a>

JavaScript

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Frequency', 'TF/IDF', 'BM25'],
    ['1', 1, 0],
    ['10', 3, 0],
    ['20', 4, 0],
    ['30', 5, 0],
    ['40', 6, 0],
    ['50', 7, 0],
    ['60', 8, 0],
    ['70', 10, 0],
    ['80', 10, 0],
    ['90', 10, 0],
    ['100', 10, 0]
  ]);

  var options = {
    title: 'Relevance Scoring',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

	var el = document.getElementById('curve_chart');
  var chart = new google.visualization.LineChart(el);
  
  google.visualization.events.addListener(chart, 'ready', function() {
  	var downloadLink = document.getElementById('download-chart');
		var imageUri = chart.getImageURI();
		downloadLink.href = imageUri;
    el.innerHtml = '<img src="' + imageUri + '">';
  });
  
  chart.draw(data, options);
}