title: How to plot scatter plot and line graph on same graph using google charts
body: <p>I have some stock data like so</p>
  <pre><code>index=[1,2,3,4,5]
  price=[10,11,12,13,14]
  </code></pre>
  <p>I have to plot a line graph of this data using google-Visualization and highlight (or scatter) some points on the line. the points are for example:</p>
  <pre><code>index=[1,3]
  value=[11,13]
  </code></pre>
  <p>I have the following code rightnow</p>
  <pre><code>function drawChart() {
  
  // Create the data table.
  var data = new google.visualization.DataTable();
  data.addColumn('number',&quot;index&quot;);
  data.addColumn(&quot;number&quot;,'price')
  data.addRows([
    [1, 10],
    [2, 11],
    [3, 12],
    [4, 13],
    [5, 14]
  ]);
  
  // Set chart options
  var options = {'title':'How Much Pizza I Ate Last Night',
                 'width':1200,
                 'height':300, hAxis: {title: 'Year',  titleTextStyle: {color: '#333'},
                 slantedText:true, slantedTextAngle:80},
        vAxis: {minValue: 0},
        explorer: { 
          actions: ['dragToZoom', 'rightClickToReset'],
          axis: 'horizontal',
          keepInBounds: true,
          maxZoomIn: 4.0},
        colors: ['#D44E41'],};
  
  // Instantiate and draw our chart, passing in some options.
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
  
  //Initailization
  google.charts.load('current', {
        callback: drawChart,
        packages:['corechart']
      });
  </code></pre>
  <p>example image of result I want (the graph is not plotted on the values in the question)<a href="https://i.stack.imgur.com/OkbXn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OkbXn.png" alt="enter image description here" /></a></p>