CODEWITHSUNDEEP
javascriptgoogle-visualization
nik the lion
nik the lion

Reputation: 458

Barchart with several values per day (Google Visualization API)

I do have the issue that I have several events in one year, which I want to group.

function drawVisualization() {
// Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
  ['Year', 'Austria'],
  ['2003',  1336060],
  ['2004',  1538156],
  ['2005',  1576579],
  ['2006',  1600652],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2007',  1968113],
  ['2008',  1901067]
]);


// Create and draw the visualization.
new google.visualization.BarChart(document.getElementById('visualization')).
    draw(data,
         {title:"Yearly Coffee Consumption by Country",
          width:600, height:400,
          vAxis: {title: "Year"},
          hAxis: {title: "Cups"}}
    );
}

Result of this code is this:

enter image description here

Is it possible customize this to get this result?

enter image description here

If i can't get this result with Google Visualization API is there an JS-Framework which has this ability?

Upvotes: 0

Views: 117

Answers (2)

Jeremy Faller
Jeremy Faller

Reputation: 1394

You're looking for a column chart. Here's a fiddle that does what you want, I think.

http://jsfiddle.net/98vT7/

var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'New Zealand', 'New Guinea'],
    ['2003',  1336060,0,0],
    ['2004',  1538156,0,0],
    ['2005',  1576579,0,0],
    ['2006',  1600652,0,0],
    ['2007',  1968113,1968113,1968113],
    ['2008',  1901067,0,0]]);

var options = {
    width: 600,
    height: 400,
    legend: { position: 'top', maxLines: 3 },
    bar: { groupWidth: '75%' },
    isStacked: true,
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);

Upvotes: 2

Gordon Mohrin
Gordon Mohrin

Reputation: 609

Try this:

var data = google.visualization.arrayToDataTable([
['Year', 'Austria'],
['2003',  '', '', '1336060'],
['2004',  '', '', '1538156'],
['2005',  '', '', '1576579'],
['2006',  '', '', '1600652'],
['2007',  '1968113', '1968113', '1968113'],
['2008',  '', '', 1901067]
]);

Upvotes: 2

Related Questions