2

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.

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:

example chart

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.

I've looked on stack overflow and found to 2 questions that looked promising:

question 1

question 2

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.

<script type="text/javascript">

        var jsonData =<?php echo $JSONdata ?>;    

        // 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<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 <?php echo $Code ?>',pointSize:5,lineWidth:2,
                vAxis: {title: 'Price (<?php echo substr("£", 1)?>)'},
                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); 
                      }

    </script>

so really I'm looking for one of two answers:

modification of the var colorArray to achieve the change I'm after.

or

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).

thanks you all in advance for your time with helping me with this problem.

Sam Cook

4

1 回答 1

2

您想要做的是将所有零设置为空值，并interpolateNulls:true在绘制图表时在选项中设置参数：

// Set all zeros in our dataTable to null.
var rows = data.getNumberOfRows();
var cols = data.getNumberOfColumns();
for (var i = 0; i < rows; ++i) {
  for (var j = 0; j < cols; ++j) {
    if (data.getValue(i, j) == 0) {
      data.setCell(i, j, null);
    }
  }
}
// etc..
var element = document.getElementById('visualization');
var chart = new google.visualization.LineChart(element);
chart.draw(data, { interpolateNulls: true });
于 2013-07-16T12:52:46.807 回答