График

Google Charts

by Denis Tverdokhlebov

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

JavaScript

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

function drawBasic() {

  var data = new google.visualization.DataTable();
  data.addColumn('number', '');
  data.addColumn('number', '');

  data.addRows([
    [2, 10],
    [5, 10],
    [8, 10],
    [10, 10],
    [11, 10],
    [14, 10],
    [17, 10],
    [18, 10],
    [22, 10],
    [25, 10],
    [27, 5],
    [28, 90],
    [29, 80],
    [30, 80],
  ]);

  var options = {
    colors: ['#263285'],
    pointSize: 7,
    dataOpacity: 1,
    pointShape: 'square',
    chartArea: {
      left: 30,
      top: 0,
      bottom: 20,
      width: '100%',
      height: '100%'
    },

    curveType: 'function',
    pointsVisible: true,
    tooltip: {
      trigger: 'selection'
    },
    legend: {
      position: 'none'
    },
    height: 250,
    hAxis: {
      gridlines: {
        color: 'transparent'
      }
    },
    vAxis: {
    ticks: [0,10,20,30,40,50,60,70,80,90,100],
      gridlines: {
        count: 10,
        color: '#d4d6e7'
      }
    },
    backgroundColor: 'transparent',

  };

  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));


  chart.draw(data, options);
}