Re: Replacing sparkline with linechart

[asgallant]

Set vAxis.baselineColor to 'transparent':

vAxis: {

    textPosition: 'none', 
    gridlines: {
        color: 'transparent'
    },
    baselineColor: 'transparent'
} 

On Monday, July 16, 2012 7:46:02 PM UTC-4, billsaysthis wrote:

Given the deprecation notice we are switching our sparkline implementation to linechart. However I cannot see what option to use to remove the black horizontal line at the bottom of the chart.

To help understand what I mean, in the Visualization Playground I changed the default linechart options to these:

new google.visualization.LineChart(document.getElementById('visualization')).
    draw(data, {

        hAxis: {textPosition: 'none'},
        vAxis: {textPosition: 'none', gridlines: {color: 'transparent'}},
    });

The result is fine, except for the black line across the bottom. How do I remove it?

Thanks,

Bill

[David]

Here is an example of a basic sparkline. I couldn't find any examples on the net, so maybe this can be useful to someone. Copy and paste into playground.

function drawVisualization() {
  // Create and populate the data table.
   var data = new google.visualization.DataTable();

    data.addColumn('date', 'xAxis');

    data.addColumn('number', 'sparkline');
  data.addColumn('number', '148');

data.addRow([new Date('10/14/2012'),149,null]);
data.addRow([new Date('10/15/2012'),147,null]);
data.addRow([new Date('10/16/2012'),148,null]);
data.addRow([new Date('10/17/2012'),148,null]);
data.addRow([new Date('10/18/2012'),149,null]);
data.addRow([new Date('10/19/2012'),148,null]);
data.addRow([new Date('10/20/2012'),148,null]);
data.addRow([new Date('10/21/2012'),150,null]);
data.addRow([new Date('10/22/2012'),150,null]);
data.addRow([new Date('10/23/2012'),149,null]);
data.addRow([new Date('10/24/2012'),147,null]);
data.addRow([new Date('10/25/2012'),148,148]);

  // Create and draw the visualization.
  new google.visualization.LineChart(document.getElementById('visualization')).
      draw(data, {curveType: "function",
                  width: 100, height: 22,
                  vAxis: {maxValue: 10},
                  hAxis: {textPosition: 'none', gridlines: {color: 'transparent'}},

                  vAxis: {textPosition: 'none', gridlines: {color: 'transparent'}},

                  baselineColor: 'transparent',                
                  enableInteractivity: false,                 
                  legend: 'none',
                  series: {0:{color: 'blue', visibleInLegend: false, lineWidth:1}, 1:{color: 'red', visibleInLegend: true, lineWidth:0, pointSize:3}}
                 }       

          );
}