crontrol the space between the search box and the chart

35 views
Skip to first unread message

Brian Flieck

unread,
Apr 23, 2018, 11:58:54 AM4/23/18
to Google Visualization API

how do i make it so the search bar doesn't take up so much room at the top of my page?



<html>
  <head>

    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

google.charts.load('current', {'packages':['corechart', 'controls', 'bar']});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {

 var data = new google.visualization.arrayToDataTable([
['folder', 'ready', 'not sent off shore', 'not ready', 'freelanced', 'ready to QA' , 'placeholder' ],
['Christopher_Banks/post/CB_instock/2' , 0,  0, 11, 0, 0, 0],
['Christopher_Banks/post/CB_instock/8' , 0,  0, 40, 0, 0, 0],
['Christopher_Banks/post/CB_instock/10' , 0,  0, 13, 0, 0, 0],
['Christopher_Banks/post/CB_instock/14' , 0,  0, 22, 0, 0, 0],
['Christopher_Banks/post/CB_instock/15' , 0,  0, 17, 0, 0, 0],
['Christopher_Banks/post/CB_instock/19' , 0,  0, 12, 0, 0, 0],
['Aeropostale/post/instock/0' , 0,  0, 0, 86, 0, 0],
['Aeropostale/post/instock/10' , 0,  0, 0, 153, 0, 0],
['Aeropostale/post/instock/13' , 0,  1, 1, 0, 0, 0],
['Tumi/post/instock/' , 14,  43, 0, 0, 0, 0],
['Maurices/Post/instock/RUSH' , 50,  0, 3, 0, 0, 0],
['Maurices/Post/instock/3' , 11,  0, 0, 0, 0, 0],
['Maurices/Post/instock/5' , 14,  0, 0, 0, 0, 0],
['Maurices/Post/instock/7' , 17,  0, 0, 0, 0, 0],
['Maurices/Post/instock/8' , 17,  0, 0, 0, 0, 0],
['Maurices/Post/instock/9' , 0,  0, 23, 0, 0, 0],
['Maurices/Post/instock/LIGHTBOXCALLOUTS' , 0,  4, 0, 0, 0, 0],
['Dress_Barn/Post/instock/RUSH' , 32,  0, 49, 0, 0, 0],
['Dress_Barn/Post/instock/0' , 0,  0, 2, 0, 0, 0],
['Dress_Barn/Post/instock/1' , 9,  0, 9, 0, 0, 0],
['Dress_Barn/Post/instock/2' , 66,  0, 2, 0, 0, 0],
['Dress_Barn/Post/instock/3' , 46,  0, 0, 0, 0, 0],
['Dress_Barn/Post/instock/4' , 86,  0, 0, 0, 0, 0],
['Dress_Barn/Post/instock/5' , 21,  0, 2, 0, 0, 0],
['Dress_Barn/Post/instock/7' , 14,  0, 1, 0, 0, 0],
['Dress_Barn/Post/instock/8' , 20,  0, 0, 0, 0, 0],
['Dress_Barn/Post/instock/9' , 0,  0, 8, 0, 0, 0],
['Dress_Barn/Post/instock/10' , 0,  0, 8, 0, 0, 0],
['NYCompany/post/instock/RUSH' , 6,  0, 10, 0, 0, 0],
['NYCompany/post/instock/1' , 2,  0, 52, 0, 0, 0],
['NYCompany/post/instock/2' , 13,  0, 0, 0, 0, 0],
['NYCompany/post/instock/3' , 0,  0, 1, 0, 0, 0],
['NYCompany/post/instock/4' , 149,  0, 48, 0, 0, 0],
['NYCompany/post/instock/5' , 37,  0, 37, 0, 0, 0],
['NYCompany/post/instock/6' , 0,  0, 81, 0, 0, 0],
['HenriBendel/post/instock/0' , 11,  0, 1, 0, 0, 0],
['HenriBendel/post/instock/1' , 12,  1, 0, 0, 0, 0],
['HenriBendel/post/instock/2' , 4,  0, 0, 0, 0, 0],
['HenriBendel/post/instock/6' , 0,  0, 14, 0, 0, 0],
['LuckyBrand/Post/Instock/0' , 0,  0, 3, 0, 0, 0],
['LuckyBrand/Post/Instock/3' , 137,  0, 0, 0, 0, 0],
['LuckyBrand/Post/Instock/4' , 112,  0, 0, 0, 0, 0],
['LuckyBrand/Post/Instock/6' , 115,  0, 3, 0, 0, 0],
['LuckyBrand/Post/Instock/7' , 0,  0, 2, 0, 0, 0],
['LuckyBrand/Post/Instock/9' , 0,  0, 3, 0, 0, 0],
['LuLuLemon/Post/instock/0' , 0,  0, 0, 0, 0, 2],
['LuLuLemon/Post/instock/1' , 0,  0, 0, 200, 0, 0],
['LuLuLemon/Post/instock/2' , 0,  0, 0, 150, 0, 0],
['LuLuLemon/Post/instock/3' , 400,  0, 0, 0, 0, 0],
['LuLuLemon/Post/instock/5' , 104,  0, 0, 0, 0, 6],
['LuLuLemon/Post/instock/6' , 0,  0, 0, 0, 0, 204],
['Uniqlo/Post/instock/8' , 0,  0, 74, 0, 0, 0],
['Uniqlo/Post/instock/9' , 0,  0, 175, 0, 0, 0],
['CliqueMedia/instock/4' , 0,  0, 12, 0, 0, 0],
]);

        // Create a dashboard.
        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        // Create a range slider, passing some options
        var folderfilter = new google.visualization.ControlWrapper({
          chartArea:{left:"30%",top:"5%",width:"60%",height:"50%"},
          'controlType': 'StringFilter',
          'containerId': 'filter_div',
          'options': {
           width: '100%',
           height: '100%',
          'filterColumnLabel': 'folder'
          }
        });

        // Create a pie chart, passing some options
        var barChart = new google.visualization.ChartWrapper({
            chartArea:{left:"30%",top:"5%",width:"60%",height:"50%"},
          'chartType': 'BarChart',
          'containerId': 'chart_div',
          'options': {
              width: 1500,
              height: 1800,
              colors: ['#00a591', '#ECDB54', '808080', '#6B5B95', '3645b5', '000000'],
              isStacked: true,
              fontSize: 11,
              title: 'Folder Count 04-23-18 11:40:01'
          }
        });
       
       
        dashboard.bind(folderfilter, barChart);
        dashboard.draw(data);
      }
    </script>
  </head>

  <body>
  <div>
      <div id="filter_div"></div>
      <div id="chart_div"></div>
    </div>
  </body>
</html>


Cheryl Evans

unread,
Apr 23, 2018, 12:29:54 PM4/23/18
to google-visua...@googlegroups.com
The search bar isn't taking up too much space at the bar.  The problem is the height of your chart.  You currently have the height set to 1800.  Change that to a smaller number.

--
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/0debd4f2-05ec-4cf0-ace7-aa6bca8c40c9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Brian Flieck

unread,
Apr 23, 2018, 1:10:38 PM4/23/18
to google-visua...@googlegroups.com
i tried that but it just squeezes everything. this is 1200


​




To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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/0debd4f2-05ec-4cf0-ace7-aa6bca8c40c9%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-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/CAFyZTc-pTEa0PxAtEYED2d_xSE_DtgYsObOsEwWYFyrviF4qpw%40mail.gmail.com.

Cheryl Evans

unread,
Apr 23, 2018, 2:31:43 PM4/23/18
to google-visua...@googlegroups.com
I don't know what exactly you are looking for, but you can also change the width.  



To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFyZTc-pTEa0PxAtEYED2d_xSE_DtgYsObOsEwWYFyrviF4qpw%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/CAAna-tg-5SfKrknKkrq3%3DSXqqfkx45SqgAoyoTQdkR7c8p7omQ%40mail.gmail.com.

Cheryl Evans

unread,
Apr 23, 2018, 2:54:10 PM4/23/18
to google-visua...@googlegroups.com
https://developers.google.com/chart/interactive/docs/customizing_axes

You can also play around with the axis scales.
 
To fix Y axis labels being cut off, play around with "chartarea".


On Mon, Apr 23, 2018 at 12:10 PM, Brian Flieck <brian...@gmail.com> wrote:
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAFyZTc-pTEa0PxAtEYED2d_xSE_DtgYsObOsEwWYFyrviF4qpw%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/CAAna-tg-5SfKrknKkrq3%3DSXqqfkx45SqgAoyoTQdkR7c8p7omQ%40mail.gmail.com.

Brian Flieck

unread,
Apr 26, 2018, 5:22:48 PM4/26/18
to Google Visualization API
Thanks Cheryl, it was the chart wrapper, but it needed to come after any 'width' or 'height' statments for some odd reason. 

        var barChart = new google.visualization.ChartWrapper({
          'chartType': 'BarChart',
          'containerId': 'chart_div',
          'options': {
                  'height': 900,
                  'colors': ['#00a591', '#ECDB54', '808080', '#6B5B95', '3645b5', '000000'],
                  'isStacked': true,
                  'fontSize': 11,
                  'chartArea': {'left': 450, 'top': 20, 'right': 250, 'bottom': 50},
                  'fontSize': 11,
                  'title': 'Folder Count 04-26-18 05:10:01'
          }
        });


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-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-visualization-api+unsub...@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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Auto Generated Inline Image 1

Cheryl Evans

unread,
Apr 27, 2018, 1:08:38 PM4/27/18
to google-visua...@googlegroups.com
Glad you got it working!!  Code can be soooo frustrating and time consuming sometimes.


Sent from my iPhone
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.

For more options, visit https://groups.google.com/d/optout.
<Auto Generated Inline Image 1>
Reply all
Reply to author
Forward
0 new messages