search

google / google-visualization-issues

288 stars 35 forks source link

Customized Stacked graph #2218

Open MLINGAD opened 8 years ago

MLINGAD commented 8 years ago

Hi All,

I have a requirement to generate a column chart for 1 value and stacked graph for 2 values in the same chart refer the below image for reference

graph

I am not getting the stacked graph as expected My code is -

``function drawVisualization() { // Create and populate the data table. var data = google.visualization.arrayToDataTable([ ['Year', 'Austria', 'Bulgaria', 'Denmark'], ['2003', 1336060, 400361, 1001582],

]);

// Create and draw the visualization. new google.visualization.ComboChart(document.getElementById('chart')). draw(data, {title:"Yearly Coffee Consumption by Country", width:600, height:400, seriesType:'bars', series: {

              1: {
              type: 'column', color: 'black', enableInteractivity: false,

             },
              2: {
              type: 'column', color: 'green', enableInteractivity: false,

             },
                 isStacked:true,

                              },

                    vAxis: {title: "Year"},
        hAxis: {title: "Cups"}}
  );

}

google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawVisualization); ``

I am getting the graph like below

issue

could anyone help me in achieving the expected graph?

MLINGAD commented 8 years ago

Hi All,

Could anyone help me?

dominhhai commented 8 years ago

@manjunathaswamy you can do this with customizing your inputed DataTable by setting the null value for un-render column. But it is hard to set your column labels in the center of your group columns in case of odd. Usually, I use the column when number of columns is even and use the bar for other cases.

You can check the code on Gist here 

<!DOCTYPE html>
<html>
<head>
  <script src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.0','packages':['corechart']}]}"></script>
  <script>
  var visual
  google.setOnLoadCallback(function () {
    visual = google.visualization
    drawChart()
  })
  function drawChart() {
    var data = visual.arrayToDataTable([
        ['year', 'Austria', 'Bulgaria', 'Denmark'],
        // 2003
        ['2003', 1336060, null, null],
        ['', null, 400361, 1001582],
        // group space
        ['', null, null, null],
        // 2004
        ['2004', 1336060, null, null],
        ['', null, 400361, 1001582]
      ])
    var options = {
      title: 'Yearly Coffe Consumption by Country',
      legend: {position: 'top'},
      bar: { groupWidth: '99%' },
      isStacked: true
    }

    var columnChart = new visual.ColumnChart(document.getElementById('chart_column'))
    columnChart.draw(data, options)

    var barChart = new visual.BarChart(document.getElementById('chart_bar'))
    barChart.draw(data, options)
  }
  </script>
</head>
<body>
  <div id="chart_column"></div>
  <div id="chart_bar"></div>
</body>
</html>