title: using java script to select Google chart data to change the data's series
body: <p>I've spent a good amount of time looking to see how I can use java script to modify the series of specific data that is fed into my Google charts line chart, the data i'm trying to modify is fetched from a MySQL table via PHP, then turned into Json to feed it into the java script for the chart.</p>
  
  <p>the data is a price comparison of a product sold by different companies, some of the companies do not sell certain products and have a 0 entered to show they do not sell the product. I need to be able to hide the 0 and and lines connecting them to my other data on the charts so we don't get results like this:</p>
  
  <p><a href="http://www.tyrebaydirect.com/images/example.chart.jpg" rel="nofollow noreferrer">example chart</a></p>
  
  <p>I'd like to hide the data row along the bottom of the chart as well as the 2 data points that drop to zero on the last date column.</p>
  
  <p>I've looked on stack overflow and found to 2 questions that looked promising:</p>
  
  <p><a href="https://stackoverflow.com/questions/17033608/google-line-chart-points-manipulation-based-on-series-value/17034445#17034445">question 1</a></p>
  
  <p><a href="https://stackoverflow.com/questions/16661972/target-specific-google-chart-data-set">question 2</a></p>
  
  <p>following the second question, it looks like I can use java script to modify the series that the data with value of 0 is in, but give no example on how to do this. i tried to work with the example given, but have had no luck modifying it to suit my needs.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
          var jsonData =&lt;?php echo $JSONdata ?&gt;;    
  
          // Load the Visualization API and the piechart package.
          google.load('visualization', '1', {packages: ['corechart']});
  
          // 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 Line chart, passes in the data and
          // draws it.
          function drawChart() {
  
              // Create our data table out of JSON data loaded from server.
              var data = new google.visualization.DataTable(jsonData);
  
              var colorArray = {}; 
              for(i=0;i&lt;data.getNumberOfRows;i++) {
                if(data.getDataValue(i, 2,3,4,5)==0)//tell it to check data from competitor columns
                  colorArray.push({color: 'white', lineWidth:0, pointSize:0});
              };
  
              var options = {title: 'The Prices for &lt;?php echo $Code ?&gt;',pointSize:5,lineWidth:2,
                  vAxis: {title: 'Price (&lt;?php echo substr("£", 1)?&gt;)'},
                  hAxis: {title: 'Date (year-month-day)'}, 
         series: {0:{color:'red'}, 1:{color: 'blue'}, 2:{color: 'green'}, 
                  3:{color: 'purple'}, 4:{color: 'orange'}, 5:{color: 'teal'},
                  6:{color: 'white', lineWidth:0, pointSize:0}} };
  
              // Instantiate and draw our chart, passing in some options.
              var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
              chart.draw (data,options); 
                        }
  
      &lt;/script&gt;
  </code></pre>
  
  <p>so really I'm looking for one of two answers:</p>
  
  <p>modification of the var <code>colorArray</code> to achieve the change I'm after.</p>
  
  <p>or</p>
  
  <p>a working bit of code that will allow me to change data with a value of 0 to be in series 6 (and hence hidden from view).</p>
  
  <p>thanks you all in advance for your time with helping me with this problem.</p>
  
  <p>Sam Cook</p>