8

Does anyone know how to create a line chart with a smooth line instead of a jagged line?

I think my chart would present much better to end users with a smooth line.

Here's an example URL:

http://chart.apis.google.com/chart?chxr=0,0,46&chxt=y&chs=300x225&cht=lc&chco=3D7930&chd=s:MNPRSYVUSSMNQRVfXXSPPM&chg=14.3,-1,1,1&chls=2,4,0&chm=B,C5D4B5BB,0,0,0

Prince
  • 20,353
  • 6
  • 39
  • 59
fishbone
  • 83
  • 1
  • 3

3 Answers3

9

From Google Chart API docs:

You can smooth the lines by setting the curveType option to function

In code:

var options = {
      title: 'Company Performance',
      curveType: 'function',
      legend: { position: 'bottom' }
    };
Prince
  • 20,353
  • 6
  • 39
  • 59
8

I simply used

var options = {smoothLine: true,}

  var chart = new google.visualization.LineChart(document.getElementById('some_id'));
  chart.draw(data, options);

Disclaimer: if you have very sharp corners the rounding/smoothing can be misleading (for ex. if your curve goes quickly to f(x) = 0 it can become negative to fit the corner.

Massagran
  • 1,781
  • 1
  • 20
  • 29
  • 4
    Google changed this in the "new core charts" (released May 18, 2010). smoothLine:true was the old option; the new equivalent is curveType:'function'. See: http://archive.is/uXGhh#selection-8133.0-8203.77 – Dave Burton Sep 12 '16 at 13:51
  • 1
    It seems this sharp dip still occurs (as you say, it becomes negative to fit the corner), is there a way around this? to smooth the lines without the dip? – Xavier Dass Sep 27 '16 at 08:15
  • Indeed, I also notice that the smoothed line goes beyond the range of valid values, in my case even dipping below zero. It'd be nice if the smoothing function was swappable with a custom one (that you could define yourself). Alas - it does not seem possible yet. – Jochem Schulenklopper Nov 21 '20 at 13:21
1

If you are using a line graph, you can always use curveType: 'function' in your series options and that will make the "series" smooth.

user2936213
  • 1,021
  • 1
  • 8
  • 19
veetrag
  • 11
  • 1