Area chart - various presentation questions

[Ran Tavory]

I started using the area chart component and am trying to get to an output set by my graphic designer.

See here:  http://skitch.com/rantav/nfxm3/outbrain-account-dashboard

The one on the left is a real chart. The one on the right was created by a graphic designer.

There are a few diffs I'm trying to solve:

1. The y axis numbers (0, 5, 10, ...), I'd like them to be more spread out, e.g. only 0, 10, 20. How do I do that?

2. How do I control the color of the numbers 0, 5, 10, 15...? 

3. I'd like to show less horizontal lines, only for 0, 10, 20. how do I do that?

Here's my code:

  var area = new google.visualization.AreaChart($('#traffic_chart')[0]);

  area.draw(dataView, {width: 342, height: 94, legend: 'none', showCategories: false, lineSize: 0,

                       pointSize: 0, axisColor: '#f2f2f2',

                       colors: [{stroke: null, fill: '#d9ecf6', strokeSize: 0}]

Thanks!

[VizWiz]

Hi,

You can't do it with areachart, but try the image version of areachart (http://code.google.com/apis/visualization/documentation/gallery/imageareachart.html).

Cheers,
VizWiz

[Ran]

Hi VizWiz, I've had a look at the image version of area chart, but it
doesn't seem to have those specific configuration options.
It has colors, height, legend, max, min, showCategoryLabels
(boolean), showValueLabels (boolean), title, width.

But no control over density of the horizontal bars.

On Nov 1, 3:11 pm, VizWiz <viz...@google.com> wrote:
> Hi,
>

> You can't do it with areachart, but try the image version of areachart (http://code.google.com/apis/visualization/documentation/gallery/image...
> ).

[VizWiz]

Hi Ran,

In google Charts API, you can do it like this:

http://chart.apis.google.com/chart?cht=lc&chs=400x150&chd=s:rantav&chxt=x,y&chxs=0,aa0000,12,0,l|1,ff00ff,10,1,t&chxl=0:|Jul1|Jul2||1:|0|10|20&chxtc=1,-500&chls=000000&chm=B,3333FFaa,0,0,0

Using Google Visualization API, you can do it like this:

function drawVisualization() {
      var options = {};
      // Chart API chart type 'rs' is radar chart
      options.cht = 'lc';

      // set the line colors
      options.colors = ['#00FF00' , '#FF00FF'];

      // fill the area under the lines
      options.fill = true;

      options.chxt = 'x,y';
      options.chxs = '0,aa0000,12,0,l|1,ff00ff,10,1,t';
      options.chxl = '0:|Jul1|Jul2|1:|0|10|20';
      options.chxtc= '1,-500';
      options.chls = '000000';
      options.chm = 'B,3333FFaa,0,0,0';
  
      dataTable = new google.visualization.DataTable();
      dataTable.addColumn('number');
      dataTable.addRows(8);

      dataTable.setCell(0, 0, 50);
      dataTable.setCell(1, 0, 20);
      dataTable.setCell(2, 0, 40);
      dataTable.setCell(3, 0, 30);
      dataTable.setCell(4, 0, 10);
      dataTable.setCell(5, 0, 40);
      dataTable.setCell(6, 0, 20);
      dataTable.setCell(7, 0, 40);
           
      var chart = new google.visualization.ImageChart(document.getElementById('visualization'));
      chart.draw(dataTable, options);
}

Cheers,
VizWiz

[Ran]

Thanks for the detailed reply.
I'll try this code, but in general my concern is - Does the ImageChart
look and behave the same as AreaChart?
Since the image version is a static image v/s the area version which
uses vml/svg I'd expect the svg version to be superior. Can you share
any insights on that?
Thanks again!

On Nov 9, 12:56 pm, VizWiz <viz...@google.com> wrote:
> Hi Ran,
>
> In google Charts API, you can do it like this:
>

> http://chart.apis.google.com/chart?cht=lc&chs=400x150&chd=s:rantav&ch...1,ff00ff,10,1,t&chxl=0:|Jul1|Jul2||1:|0|10|20&chxtc=1,-500&chls=000000&chm= B,3333FFaa,0,0,0<http://chart.apis.google.com/chart?cht=lc&chs=400x150&chd=s:rantav&ch...>

[MC Get Vizzy]

On Mon, Nov 9, 2009 at 2:34 PM, Ran <ran...@gmail.com> wrote:

Thanks for the detailed reply.
I'll try this code, but in general my concern is - Does the ImageChart
look and behave the same as AreaChart?

no.  the ImageChart doesn't "behave" per se -- it is not interactive.  also in terms of look the two are different.  I don't have a side-by-side comparison, but if you read the documentation, many of the differences will become apparent.  there may also be subtle differences which are not obvious from the documentation.

one thing to note about the ImageChart is that it does not support area charts with "stacking".
 

Since the image version is a static image v/s the area version which
uses vml/svg I'd expect the svg version to be superior.

superior in what way?

[Ran]

hmm stacking and "interactivity" at some levels are definitely a
requirement for me...
so I suppose I'll just have to stay with the AreaChart and live with
it's few drawbacks.

On Nov 9, 3:30 pm, MC Get Vizzy <getvi...@google.com> wrote:
> On Mon, Nov 9, 2009 at 2:34 PM, Ran <ran...@gmail.com> wrote:
>
> > Thanks for the detailed reply.
> > I'll try this code, but in general my concern is - Does the ImageChart
> > look and behave the same as AreaChart?
>
> no.  the ImageChart doesn't "behave" per se -- it is not interactive.  also
> in terms of look the two are different.  I don't have a side-by-side
> comparison, but if you read the documentation, many of the differences will
> become apparent.  there may also be subtle differences which are not obvious
> from the documentation.
>
> one thing to note about the ImageChart is that it does not support area
> charts with "stacking".
>
> > Since the image version is a static image v/s the area version which
> > uses vml/svg I'd expect the svg version to be superior.
>
> superior in what way?
>
>
>
> > Can you share
> > any insights on that?
> > Thanks again!
>
> > On Nov 9, 12:56 pm, VizWiz <viz...@google.com> wrote:
> > > Hi Ran,
>
> > > In google Charts API, you can do it like this:
>

> >http://chart.apis.google.com/chart?cht=lc&chs=400x150&chd=s:rantav&ch...Jul1|Jul2||1:|0|10|20&chxtc=1,-500&chls=000000&chm=<http://chart.apis.google.com/chart?cht=lc&chs=400x150&chd=s:rantav&ch...>B,3333FFaa,0,0,0<