Google Visualization Column Chart specify Target line as Certainty role

Question

When i put this below code i came with on visualization playground i get the Goal/Target line, but i want it to be dashed/dotted which requires certainty role as specified in the docs. Can anyone enlighten me how to do it with a array input to Google Datatable, or Datatable json string format

Code

function drawVisualization() {

  // Create and populate the data table.
 var data = google.visualization.arrayToDataTable([
    ['Year', 'Red', 'Yellow', 'Green','Target'],
    ['2003',  20,   0,      0,80],
    ['2004',  0,   55,      0,80],
    ['2005',  0,   0,       80,80],
    ['2005',  0,   0,      85,80]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"},
            legend:'none',
            colors:['red','yellow','green'],
            //isStacked: true,
            series:{
              3:{type:'steppedArea',areaOpacity:0}
            }
            //interpolateNulls: true
           }
      );
}​

Update

I got it to this level below, with the code but how do i make the line stretch graph width

function drawVisualization() {

  var data = new google.visualization.DataTable();
data.addColumn('string', 'Month'); // Implicit domain label col.
data.addColumn('number', 'Sales'); // Implicit series 1 data col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'number'});  // interval role col.
data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
data.addRows([
    ['Red',20,  0,0,  80,true],
    ['Yellow',  0, 55, 0,  80,false],
    ['Green',  0,  0,  85,  80,false]
]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            hAxis: {title: "Year"},
            legend:'none',
            colors:['red','yellow','green'],
            //isStacked: true,
            series:{
              3:{type:'line',areaOpacity:0}
            }
            //interpolateNulls: true
           }
      );
}​

PlayGround:

https://code.google.com/apis/ajax/playground/?type=visualization#column_chart

Roles Docs:

https://developers.google.com/chart/interactive/docs/roles

1. So what is the right JSON format for dashed lines?

2. Is there any, i mean anyway i can display a arrow indicator at the right corner of the Target line to visually indicate the Goal?

Answer 1

You can achieve this by creating empty columns at the beginning and end of your chart, and then setting the view window to be within the range that you actually want. The code below achieves this:

    function drawVisualization() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Month'); // Implicit domain label col.
      data.addColumn('number', 'Sales'); // Implicit series 1 data col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'number'});  // interval role col.
      data.addColumn({type:'boolean',role:'certainty'}); // certainty col.
      data.addRows([
        ['', null, null, null, 80, false],
        ['Red',20,  0,0,  80,true],
        ['Yellow',  0, 55, 0,  80,false],
        ['Green',  0,  0,  85,  80,false],
        ['', null, null, null, 80, true]
      ]);

      // Create and draw the visualization.
      new google.visualization.ColumnChart(document.getElementById('visualization')).
        draw(data,
             {title:"Yearly Coffee Consumption by Country",
              width:600, height:400,
              hAxis: {title: "Year"},
              legend:'none',
              colors:['red','yellow','green'],
              //isStacked: true,
              series:{
                3:{type:'line',areaOpacity:0}
              },
              hAxis: {
                viewWindow: {
                  min: 1,
                  max: 4
                }
              }

              //interpolateNulls: true
             }
            );
    }
    ​