Change the bars size

35 views
Skip to first unread message

Luis Serrano

unread,
Aug 9, 2018, 9:33:07 AM8/9/18
to Google Visualization API
Hello Community, im new on google charts and may be my question will be really dumb. But here it is:

I have this code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Nombre', 'campo1', 'campo2'],
          
          ['Campo1 / Campo2', 50000, 20000]

          /*['Enviados / Devueltos', 8000,7000],
          ['Enviados / Reenviados', 5600,3200],
          ['Enviados / Alcanzados', 4500,2600],
          ['Enviados / Devueltos', 1500,2500],*/
        ]);

        var options = {
          width: 700,
          height: 400,
          chart: {
            title: 'Estado de las campañas',
            subtitle: 'Estado de la campaña: '
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'brightness' }, // Bind series 0 to an axis named 'distance'. cambiado bright por brightness
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'Estado de las campañas'} // Top x-axis.
            }
          }

        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div"></div>
  </body>
</html>



And all that i want is redice the width of the bars, if i add more data the width will be small, but i want an smaller bar with only 2 bars.
Any help will be aprreciated.

PD: Sorry for my apprentice

Ponni Mano

unread,
Aug 13, 2018, 12:53:35 AM8/13/18
to google-visua...@googlegroups.com
hi,
Can U try this
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['bar']});
      google.charts.setOnLoadCallback(drawStuff);

      function drawStuff() {
        var data = new google.visualization.arrayToDataTable([
          ['Nombre', 'campo1', 'campo2'],
          
          ['Campo1 / Campo2', 50000, 20000]

          /*['Enviados / Devueltos', 8000,7000],
          ['Enviados / Reenviados', 5600,3200],
          ['Enviados / Alcanzados', 4500,2600],
          ['Enviados / Devueltos', 1500,2500],*/
        ]);

        var options = {
          width: 700,

          height: 400,bar: {groupWidth: "95%"},          chart: {
            title: 'Estado de las campañas',
            subtitle: 'Estado de la campaña: '
          },
          bars: 'horizontal', // Required for Material Bar Charts.
          series: {
            0: { axis: 'brightness' }, // Bind series 0 to an axis named 'distance'. cambiado bright por brightness
            1: { axis: 'brightness' } // Bind series 1 to an axis named 'brightness'.
          },
          axes: {
            x: {
              distance: {label: 'parsecs'}, // Bottom x-axis.
              brightness: {side: 'top', label: 'Estado de las campañas'} // Top x-axis.
            }
          }

        };

      var chart = new google.charts.Bar(document.getElementById('dual_x_div'));
      chart.draw(data, options);
    };
    </script>
  </head>
  <body>
    <div id="dual_x_div"></div>
  </body>
</html>


Thanks & Regards

K. Ponni



--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e1b5f455-78a3-4b37-86f3-1831cfc42703%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Ponni Mano

unread,
Aug 13, 2018, 12:55:29 AM8/13/18
to google-visua...@googlegroups.com

Thanks & Regards

K. Ponni



To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

Luis Serrano

unread,
Aug 13, 2018, 10:23:24 AM8/13/18
to google-visua...@googlegroups.com
Hi K.Ponni,


I copy/paste your code and still dont work, i think that just cant be doit.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/e1b5f455-78a3-4b37-86f3-1831cfc42703%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAKdjpwiSVN%2BR7OuoLzEOuAE8Y%3DbE%2BB8NffpAPgsFbRcrsk-4xA%40mail.gmail.com.

Ponni Mano

unread,
Aug 14, 2018, 3:00:13 AM8/14/18
to google-visua...@googlegroups.com
Hi,
 Can U try this
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
     <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
     var data = new google.visualization.arrayToDataTable([
          ['Nombre', 'campo1', 'campo2'],
          
          ['Campo1 / Campo2', 50000, 20000]

          /*['Enviados / Devueltos', 8000,7000],
          ['Enviados / Reenviados', 5600,3200],
          ['Enviados / Alcanzados', 4500,2600],
          ['Enviados / Devueltos', 1500,2500],*/
        ]);


      var view = new google.visualization.DataView(data);
      view.setColumns([0, 1,
                       { calc: "stringify",
                         sourceColumn: 1,
                         type: "string",
                         role: "annotation" },
                       2]);

      var options = {
        title: "Density of Precious Metals, in g/cm^3",
        width: 600,
        height: 400,
        bar: {groupWidth: "50%"},
        legend: { position: "none" },
      };
      var chart = new google.visualization.BarChart(document.getElementById("barchart_values"));
      chart.draw(view, options);
  }
  </script>
<div id="barchart_values" style="width: 900px; height: 300px;"></div>
  </head>
  <body>
    <div id="dual_x_div"></div>
  </body>
</html>

Thanks & Regards

K. Ponni



To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAKdjpwiSVN%2BR7OuoLzEOuAE8Y%3DbE%2BB8NffpAPgsFbRcrsk-4xA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CALntadiVUW6eS4U7%3DJRG5Ly-AXv-5-9N9x9B8Q1CBK7T%3Dsu-rw%40mail.gmail.com.

Ponni Mano

unread,
Aug 14, 2018, 3:33:24 AM8/14/18
to google-visua...@googlegroups.com
Hi,

You Will Change groupWidth value %

Thanks & Regards

K. Ponni



To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.

Luis Serrano

unread,
Aug 14, 2018, 10:10:01 AM8/14/18
to google-visua...@googlegroups.com
Thanks for your help K. Ponni, I really appreciated

I want to do something like this

graficos.png

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAKdjpwiL8Dv7_v-q3PXS5vBb6-2GbQdShFkFLvVG79WBnKURpg%40mail.gmail.com.

Ponni Mano

unread,
Aug 14, 2018, 12:19:17 PM8/14/18
to google-visua...@googlegroups.com
Hi,
Is it working? Is this help for u?


  </body><span style="color:#000" class="m_4005105509448179348m_8845308626545965092m_-6874478282455255992m_-6268538708451114396m_-4484076160850917218styled-b
Reply all
Reply to author
Forward
0 new messages