CODEWITHSUNDEEP
google-visualization
Wasif Khalil
Wasif Khalil

Reputation: 2247

Google Line Charts, place circle on annotation

i am new to google charts i want to make a graph for cricket rate rate and wicket that should look something like this

enter image description here

i have searched google and found out that i might do it with the help of annotations and i have written this code:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
          var data = new google.visualization.DataTable();
          data.addColumn('number', 'Overs');
          data.addColumn('number', 'Run-rate');
          data.addColumn({type: 'string', role:'annotation'});
          data.addColumn({type: 'string', role:'annotationText'});
          data.addRows([
            [1,   6, null, null],
            [2,   6, null, null],
            [10,   2, null, null],
            [20,   3.2, null, 'Shoaib Malik'],
            [21,   3, '2', 'Shahid Afridi'],
            [30,   4, null, null],
            [40,   5, 'B', 'This is Point B'],
            [50,   6, null, null],
          ]);



            var options = {
                  title: 'Run Rate',
                  pointSize:0,
                  hAxis: {
                      gridlines: {
                          color: 'transparent'
                      }
                  },
            };

          new google.visualization.LineChart(document.getElementById('chart_div')).
            draw(data, options);
        }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

and this is the output of the code:

enter image description here

now the problem is that i want to show circle like the first image instead of text 2,B i cant do it using pointSize because i want circle where wicket falls, not where the over ends... can any1 tell me how to do this ? either i can replace text with circle or any other way out

Upvotes: 1

Views: 2649

Answers (1)

asgallant
asgallant

Reputation: 26340

You can't replace the text if you want to use the annotation functionality (as the text is what is generated by the annotations). You could use an overlapping data series to show only certain points. Here's an example that shows an overlapping series (I removed the annotations for simplicity, but you can still use them if you want to):

function drawVisualization() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Overs');
    data.addColumn('number', 'Run-rate');
    data.addColumn('boolean', 'Wicket falls');
    data.addRows([
        [1, 6, false],
        [2, 6, false],
        [10, 2, true],
        [20, 3.2, false],
        [21, 3, true],
        [30, 4, true],
        [40, 5, false],
        [50, 6, false]
    ]);

    // create a DataView that duplicates points on the "Run Rate" series where "Wicket falls" is true
    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
        type: 'number',
        label: data.getColumnLabel(2),
        calc: function (dt, row) {
            // return the value in column 1 when column 2 is true
            return (dt.getValue(row, 2)) ? dt.getValue(row, 1) : null;
        }
    }]);

    var options = {
        title: 'Run Rate',
        pointSize:0,
        hAxis: {
            gridlines: {
                color: 'transparent'
            }
        },
        series: {
            0: {
                // put any options pertaining to series 0 ("Run-rate") here
            },
            1: {
                // put any options pertaining to series 1 ("Wicket Falls") here
                pointSize: 6,
                lineWidth: 0
            }
        }
    };

    new google.visualization.LineChart(document.getElementById('chart_div')).
    // use the view instead of the DataTable to draw the chart
    draw(view, options);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawVisualization});

See working example here: http://jsfiddle.net/asgallant/saTWj/

Upvotes: 3

Related Questions