In the Configuration Options of the chart, specify 

    backgroundColor: { fill:&#39;transparent&#39; }

This worked for me in Chrome and Firefox.
It took me some time to [find out][1]. The [doc page][2] says you can only put in HTML color strings and I assumed &#39;transparent&#39; was not one of them.

  [1]:
http://groups.google.com/group/google-visualization-api/browse_thread/thread/d09df8bef22f49a2

  [2]: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html#Configuration_Options

**Setting a transparent background for Google Charts:**

    // Set chart options
    var options = {&#39;title&#39;:&#39;Chart Title&#39;,
    &#39;width&#39;:600,
    &#39;height&#39;:300,
    &#39;backgroundColor&#39;: &#39;transparent&#39;,
    &#39;is3D&#39;:true
    };


**[JSFIDDLE DEMO][1]**


  [1]: http://jsfiddle.net/portashqipe/kv0tujhv/22/

backgroundColor: &quot;00000000&quot; worked for me.

If nothing works for you try locating the background rectangle at the end of your drawChart() function and add the fill-opacity attribute.

     fill-opacity=&quot;0.0&quot;

Example:

    $(&#39;#mychart&#39;).find(&#39;svg rect:eq( 1 )&#39;).attr(&#39;fill-opacity&#39;,&#39;0.0&#39;);

Use the eq:() selector to select the rectangle you want to be transparent.

On the left of the cart there is a dropdown arrow - click that, and go to &quot;cop chart&quot;. 

When you paste the chart, you can still choose to link it, and it will paste with the background transparent.


Let&#39;s say I have the following documents

    Article { Comment: embedMany }
    
    Comment { Reply: embedMany }
    
    Reply { email: string, ip: string }

I want to make a query that selects distinct `Reply.ip` where `Reply.email = xxx`

Something like this, only it doesn&#39;t work..

    db.Article.find(&quot;Comment.Reply.email&quot; : &quot;xxx&quot;).distinct(&quot;Comment.Reply.ip&quot;)


----------
**JSON export:** 

    {
       &quot;_id&quot;:{
          &quot;$oid&quot;:&quot;4e71be36c6eed629c61cea2c&quot;
       },
       &quot;name&quot;:&quot;test&quot;,
       &quot;Comment&quot;:[
          {
             &quot;name&quot;:&quot;comment test&quot;,
             &quot;Reply&quot;:[
                {
                   &quot;ip&quot;:&quot;192.168.2.1&quot;,
                   &quot;email&quot;:&quot;yyy&quot;
                },
                {
                   &quot;ip&quot;:&quot;127.0.0.1&quot;,
                   &quot;email&quot;:&quot;zzz&quot;
                }
             ]
          },
          {
             &quot;name&quot;:&quot;comment 2 test&quot;,
             &quot;Reply&quot;:[
                {
                   &quot;ip&quot;:&quot;128.168.1.1&quot;,
                   &quot;email&quot;:&quot;xxx&quot;
                },
                {
                   &quot;ip&quot;:&quot;192.168.1.1&quot;,
                   &quot;email&quot;:&quot;xxx&quot;
                }
             ]
          }
       ]
    }

**I run** : `db.Article.distinct(&quot;Comment.Reply.ip&quot;,{&quot;Comment.Reply.email&quot; : &quot;xxx&quot;})`

**I expect** : `[&quot;128.168.1.1&quot;, &quot;192.168.1.1&quot;]`

**I get** : `[&quot;127.0.0.1&quot;, &quot;128.168.1.1&quot;, &quot;192.168.1.1&quot;, &quot;192.168.2.1&quot;]`

mongoDB distinct &amp; where in same query?

I&#39;d like to check the contents of an XML file at a specific point of execution while debugging in Xcode. Is it possible to view the contents of the file, either through the Organizer (I&#39;m debugging using actual hardware devices, not the simulator), or by typing in some sort of command into the output/console?

I am using Xcode 4.

Is it possible to view the contents of files in the iOS Application sandbox while debugging?

I&#39;m using the [Google Charts API](http://code.google.com/apis/chart/) to include various graphs on a webapp I&#39;m working on.  I&#39;m using the javascript chart tools (**not** the image chart tools), and am wondering if it&#39;s possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?

Google Charts (JS) - is there a way of using a transparent background on a chart?

<p>I'm using the <a href="http://code.google.com/apis/chart/" target="_blank" rel="noopener noreferrer">Google Charts API</a> to include various graphs on a webapp I'm working on.  I'm using the javascript chart tools (<strong>not</strong> the image chart tools), and am wondering if it's possible to use a transparent background on a chart (e.g. line graph, pie chart, etc.)?</p>


How do I redraw/rescale a google linechart on window resize?

Google chart redraw/scale on window resize

Well, this looks strange but I&#39;m not able to find a solution.

Why in the world does this fiddle http://jsfiddle.net/carlesso/PKkFf/ show the page content and, then when google.load occurs, the page goes blank?

It works well if the google.load is done immediately, but having it delayed does not work at all.

Here the page source for the lazier (or smarter) of you:

    &lt;!DOCTYPE html&gt;
    &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;title&gt;Ciao&lt;/title&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
        &lt;h1&gt;Test&lt;/h1&gt;
        &lt;div id=&quot;quicivanno&quot;&gt;
          &lt;p&gt;ciao&lt;/p&gt;
        &lt;/div&gt;
      &lt;/body&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
           setTimeout(function() {google.load(&#39;visualization&#39;, &#39;1.0&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});}, 2000);
      &lt;/script&gt;
    &lt;/html&gt;​

Why does google.load cause my page to go blank?



&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    // Load the Visualization API and the piechart package.
    google.load(&#39;visualization&#39;, &#39;1.0&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

    // Callback that creates and populates a data table,
    // instantiates the pie chart, passes in the data and
    // draws it.
    function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn(&#39;string&#39;, &#39;Topping&#39;);
      data.addColumn(&#39;number&#39;, &#39;Slices&#39;);

      var myData = {
        &#39;Mushrooms&#39;: 3,
        &#39;Onions&#39;: 1,
        &#39;Olives&#39;: 1,
        &#39;Zucchini&#39;: 1,
        &#39;Pepperoni&#39;: 2
      };

      var rows = [];
      for (element in myData) {
          rows.push([element + &quot; (&quot; + myData[element] + &quot;)&quot;, myData[element]])
      }
      data.addRows(rows);

      // Set chart options
      var options = {&#39;title&#39;:&#39;How Much Pizza I Ate Last Night&#39;,
                     &#39;width&#39;:450,
                     &#39;height&#39;:300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
      chart.draw(data, options);
    }

&lt;!-- language: lang-html --&gt;

    &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;

    &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;

&lt;!-- end snippet --&gt;

[Example fiddle](http://jsfiddle.net/invernizzie/T4yWz/1/)

How do I remove padding or margins in this example?

Remove padding or margins from Google Charts

I have searched a lot to find a good example for generating a Google Chart using MySQL table data as the data source. I searched for a couple of days and realised that there are few examples available for generating a Google Chart (pie, bar, column, table) using a combination of PHP and MySQL. I finally managed to get one example working.

I have previously received a lot of help from StackOverflow, so this time I will return some.

I have two examples; one uses Ajax and the other does not. Today, I will only show the non-Ajax example.

**Usage:**
&lt;pre&gt;
    Requirements: PHP, Apache and MySQL
    
    Installation:
    
      --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
      --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make 
          sure table has only two columns as I have used two columns. However, 
          you can use more than 2 columns if you like but you have to change the 
          code a little bit for that
      --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
      --- Insert some data into the table
      --- For the percentage column only use a number
    
          ---------------------------------
          example data: Table (googlechart)
          ---------------------------------
    
          weekly_task     percentage
          -----------     ----------
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20    
 
&lt;/pre&gt;

&lt;br/&gt;

**PHP-MySQL-JSON-Google Chart  Example:** 

        &lt;?php
    $con=mysql_connect(&quot;localhost&quot;,&quot;Username&quot;,&quot;Password&quot;) or die(&quot;Failed to connect with database!!!!&quot;);
    mysql_select_db(&quot;Database Name&quot;, $con); 
    // The Chart table contains two fields: weekly_task and percentage
    // This example will display a pie chart. If you need other charts such as a Bar chart, you will need to modify the code a little to make it work with bar chart and other charts
    $sth = mysql_query(&quot;SELECT * FROM chart&quot;);
    
    /*
    ---------------------------
    example data: Table (Chart)
    --------------------------
    weekly_task		percentage
    Sleep			30
    Watching Movie	40
    work			44
    */

    //flag is not needed
    $flag = true;
    $table = array();
    $table[&#39;cols&#39;] = array(
        
    	// Labels for your chart, these represent the column titles
    	// Note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format as pie chart only required &quot;numbers&quot; for calculating percentage and string will be used for column title
    	array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
    	array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
    	
    );
    
    $rows = array();
    while($r = mysql_fetch_assoc($sth)) {
        $temp = array();
    	// the following line will be used to slice the Pie chart
    	$temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;Weekly_task&#39;]); 
    	
    	// Values of each slice
    	$temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
    	$rows[] = array(&#39;c&#39; =&gt; $temp);
    }
    
    $table[&#39;rows&#39;] = $rows;
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    ?&gt;

    &lt;html&gt;
      &lt;head&gt;
        &lt;!--Load the Ajax API--&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
        
        // Load the Visualization API and the piechart package.
        google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
          
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
          
        function drawChart() {
          
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
    	  var options = {
               title: &#39;My Weekly Plan&#39;,
    		  is3D: &#39;true&#39;,
    		  width: 800,
    		  height: 600
            };
          // Instantiate and draw our chart, passing in some options.
    	  // Do not forget to check your div ID
          var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
          chart.draw(data, options);
        }
        &lt;/script&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;!--this is the div that will hold the pie chart--&gt;
        &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

&lt;br/&gt;
**PHP-PDO-JSON-MySQL-Google Chart Example:**

        
    &lt;?php
        /*
        Script  : PHP-PDO-JSON-mysql-googlechart
        Author  : Enam Hossain
        version : 1.0
        
        */
        
        /*
        --------------------------------------------------------------------
        Usage:
        --------------------------------------------------------------------
        
        Requirements: PHP, Apache and MySQL
        
        Installation:
        
          --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
          --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make sure table has only two columns as I have used two columns. However, you can use more than 2 columns if you like but you have to change the code a little bit for that
          --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
          --- Insert some data into the table
          --- For the percentage column only use a number
        
              ---------------------------------
              example data: Table (googlechart)
              ---------------------------------
        
              weekly_task     percentage
              -----------     ----------
              
              Sleep           30
              Watching Movie  10
              job             40
              Exercise        20     
        
        
        */
        
        /* Your Database Name */
        $dbname = &#39;chart&#39;;
        
        /* Your Database User Name and Passowrd */
        $username = &#39;root&#39;;
        $password = &#39;123456&#39;;
        
        try {
          /* Establish the database connection */
          $conn = new PDO(&quot;mysql:host=localhost;dbname=$dbname&quot;, $username, $password);
          $conn-&gt;setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
          
          /* select all the weekly tasks from the table googlechart */
          $result = $conn-&gt;query(&#39;SELECT * FROM googlechart&#39;);
        
          /*
              ---------------------------
              example data: Table (googlechart)
              --------------------------
              weekly_task     percentage
              Sleep           30
              Watching Movie  10
              job             40
              Exercise        20       
          */
         
        
        
          $rows = array();
          $table = array();
          $table[&#39;cols&#39;] = array(
        
            // Labels for your chart, these represent the column titles.
            /* 
                note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format 
                as pie chart only required &quot;numbers&quot; for calculating percentage 
                and string will be used for Slice title
            */
        
            array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
            array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
        
        );
            /* Extract the information from $result */
            foreach($result as $r) {
              
              $temp = array();
             
              // the following line will be used to slice the Pie chart
              
              $temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;weekly_task&#39;]); 
        
              // Values of each slice
              
              $temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
              $rows[] = array(&#39;c&#39; =&gt; $temp);
            }
        
        $table[&#39;rows&#39;] = $rows;
        
        // convert data into JSON format
        $jsonTable = json_encode($table);
        //echo $jsonTable;
        } catch(PDOException $e) {
            echo &#39;ERROR: &#39; . $e-&gt;getMessage();
        }
        
        ?&gt;
        
        
        &lt;html&gt;
          &lt;head&gt;
            &lt;!--Load the Ajax API--&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
            &lt;script type=&quot;text/javascript&quot;&gt;
        
            // Load the Visualization API and the piechart package.
            google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
        
            // Set a callback to run when the Google Visualization API is loaded.
            google.setOnLoadCallback(drawChart);
        
            function drawChart() {
        
              // Create our data table out of JSON data loaded from server.
              var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
              var options = {
                   title: &#39;My Weekly Plan&#39;,
                  is3D: &#39;true&#39;,
                  width: 800,
                  height: 600
                };
              // Instantiate and draw our chart, passing in some options.
              // Do not forget to check your div ID
              var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
              chart.draw(data, options);
            }
            &lt;/script&gt;
          &lt;/head&gt;
        
          &lt;body&gt;
            &lt;!--this is the div that will hold the pie chart--&gt;
            &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
          &lt;/body&gt;
        &lt;/html&gt;

&lt;br/&gt;
**PHP-MySQLi-JSON-Google Chart Example**

    &lt;?php
    /*
    Script  : PHP-JSON-MySQLi-GoogleChart
    Author  : Enam Hossain
    version : 1.0
    
    */
    
    /*
    --------------------------------------------------------------------
    Usage:
    --------------------------------------------------------------------
    
    Requirements: PHP, Apache and MySQL
    
    Installation:
    
      --- Create a database by using phpMyAdmin and name it &quot;chart&quot;
      --- Create a table by using phpMyAdmin and name it &quot;googlechart&quot; and make sure table has only two columns as I have used two columns. However, you can use more than 2 columns if you like but you have to change the code a little bit for that
      --- Specify column names as follows: &quot;weekly_task&quot; and &quot;percentage&quot;
      --- Insert some data into the table
      --- For the percentage column only use a number
    
          ---------------------------------
          example data: Table (googlechart)
          ---------------------------------
    
          weekly_task     percentage
          -----------     ----------
          
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20     
    
    
    */
    
    /* Your Database Name */
    
    $DB_NAME = &#39;chart&#39;;
    
    /* Database Host */
    $DB_HOST = &#39;localhost&#39;;
    
    /* Your Database User Name and Passowrd */
    $DB_USER = &#39;root&#39;;
    $DB_PASS = &#39;123456&#39;;
    
    
    
    
    
      /* Establish the database connection */
      $mysqli = new mysqli($DB_HOST, $DB_USER, $DB_PASS, $DB_NAME);
      
      if (mysqli_connect_errno()) {
        printf(&quot;Connect failed: %s\n&quot;, mysqli_connect_error());
        exit();
      }
      
       /* select all the weekly tasks from the table googlechart */
      $result = $mysqli-&gt;query(&#39;SELECT * FROM googlechart&#39;);
    
      /*
          ---------------------------
          example data: Table (googlechart)
          --------------------------
          Weekly_Task     percentage
          Sleep           30
          Watching Movie  10
          job             40
          Exercise        20       
      */
     
    
    
      $rows = array();
      $table = array();
      $table[&#39;cols&#39;] = array(
    
        // Labels for your chart, these represent the column titles.
        /* 
            note that one column is in &quot;string&quot; format and another one is in &quot;number&quot; format 
            as pie chart only required &quot;numbers&quot; for calculating percentage 
            and string will be used for Slice title
        */
    
        array(&#39;label&#39; =&gt; &#39;Weekly Task&#39;, &#39;type&#39; =&gt; &#39;string&#39;),
        array(&#39;label&#39; =&gt; &#39;Percentage&#39;, &#39;type&#39; =&gt; &#39;number&#39;)
    
    );
        /* Extract the information from $result */
        foreach($result as $r) {
          
          $temp = array();
         
          // The following line will be used to slice the Pie chart
          
          $temp[] = array(&#39;v&#39; =&gt; (string) $r[&#39;weekly_task&#39;]); 
    
          // Values of the each slice
          
          $temp[] = array(&#39;v&#39; =&gt; (int) $r[&#39;percentage&#39;]); 
          $rows[] = array(&#39;c&#39; =&gt; $temp);
        }
    
    $table[&#39;rows&#39;] = $rows;
    
    // convert data into JSON format
    $jsonTable = json_encode($table);
    //echo $jsonTable;
    
    
    ?&gt;
    
    
    &lt;html&gt;
      &lt;head&gt;
        &lt;!--Load the Ajax API--&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;https://www.google.com/jsapi&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js&quot;&gt;&lt;/script&gt;
        &lt;script type=&quot;text/javascript&quot;&gt;
    
        // Load the Visualization API and the piechart package.
        google.load(&#39;visualization&#39;, &#39;1&#39;, {&#39;packages&#39;:[&#39;corechart&#39;]});
    
        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);
    
        function drawChart() {
    
          // Create our data table out of JSON data loaded from server.
          var data = new google.visualization.DataTable(&lt;?=$jsonTable?&gt;);
          var options = {
               title: &#39;My Weekly Plan&#39;,
              is3D: &#39;true&#39;,
              width: 800,
              height: 600
            };
          // Instantiate and draw our chart, passing in some options.
          // Do not forget to check your div ID
          var chart = new google.visualization.PieChart(document.getElementById(&#39;chart_div&#39;));
          chart.draw(data, options);
        }
        &lt;/script&gt;
      &lt;/head&gt;
    
      &lt;body&gt;
        &lt;!--this is the div that will hold the pie chart--&gt;
        &lt;div id=&quot;chart_div&quot;&gt;&lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;

PHP MySQL Google Chart JSON - Complete Example

I&#39;m trying to find a link which allows me to download a CSV formatted version of my Google Spreadsheet.  Currently I&#39;m using:

    https://docs.google.com/spreadsheets/d/DOCID/export?format=csv

This works great except that it only download the first Sheet.  My document has multiple sheets.  Does anyone know how to format this link so that it downloads either all the sheets or a specific sheet?  Something like:

    &amp;sheet=all
or

    &amp;sheet=3

Content Type	Original Author	Original Content on Stackoverflow
Question	johneth	View Question on Stackoverflow
Solution 1 - Google Visualization	maxjakob	View Answer on Stackoverflow
Solution 2 - Google Visualization	Porta Shqipe	View Answer on Stackoverflow
Solution 3 - Google Visualization	Rafa Llorente	View Answer on Stackoverflow
Solution 4 - Google Visualization	Jonas Littau	View Answer on Stackoverflow
Solution 5 - Google Visualization	Zach Simons	View Answer on Stackoverflow

Google Charts (JS) - is there a way of using a transparent background on a chart?

Google Visualization Problem Overview

Google Visualization Solutions

Solution 1 - Google Visualization

Solution 2 - Google Visualization

Solution 3 - Google Visualization

Solution 4 - Google Visualization

Solution 5 - Google Visualization

Is it possible to view the contents of files in the iOS Application sandbox while debugging?

mongoDB distinct & where in same query?

Attributions