javascript - Google Charts -- Chart not changing on selection

447

In a PHP page I am creating a table using tablesorter, showing and hiding a child row. When a row in the table is clicked, the child row will display a chart from google charts.

Items Working:

  • Table row click to show child row

  • Table displaying the first chart

  • Correct data is being displayed in chart for that value

Items Not Working:

  • Google Chart changing the data displayed on the next row being selected, when row is clicked, an empty space where the table should be appears.

PHP Code where I create my table, and populate it with data (comes from a sql db):

if( isset($db_graph_query)){
    while($row = mysqli_fetch_array($db_graph_query)) {
        $rowcount2++;
        // removed the hard coded column set and made it driven off of the array below
        // could have pulled it from the $cols array above, but there might be columns that we don't wish to show
        echo "                                <tr>";
        $colindex = 0;
        foreach( $cols as $column_name ) {
            $style = "";
            $val = $row[$column_name];
            if ( isset($column_callback)) {
                $style=$column_callback($colindex, $val);
            }
            if($colindex == 0){ //make the first cell our toggle for child row
                echo "<td $style><a href='#' class='toggle' onClick='drawChart(\"$val\");'>$val</a></td>";
            } else {
                echo "<td $style>$val</td>";
            }
            $colindex++;
        }
        echo "</tr>";
        echo "<tr class='tablesorter-childRow'>";
            echo "<td colspan='4'>";
                echo "<div id='chart_div' style='width: 1000px; height: 600px'></div>";
            echo "</td>";
        echo "</tr>";
    }
}

JavaScript to create my charts:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    function drawChart(name) {
        var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Date');
            data.addColumn('number', 'Runs');
            data.addColumn('number', 'Fail');
            data.addRows([
                <?php
                    $dbName = "my_db";
                    $config = parse_ini_file("db_info.ini",true);
                    $dbUser = $config["DB"]["db_user"];
                    $dbServer = $config["DB"]["db_ip"];
                    $dbPassword = $config["DB"]["db_pass"];

                    $con = mysql_connect($dbServer, $dbUser, $dbPassword);

                    if (!$con) {
                        die('Could not connect: ' . mysql_error());
                    }

                    mysql_select_db($dbName, $con);
                    $sql = mysql_query("SELECT * FROM mytable");

                    $output = array();

                    while($row = mysql_fetch_array($sql)) {
                        // create a temp array to hold the data
                        $temp = array();

                        // add the data
                        $temp[] = '"' . $row['Name'] . '"';
                        $temp[] = '"' . $row['Date'] . '"';
                        $temp[] = (int) $row['Runs'];
                        $temp[] = (int) $row['Fails'];
                        // implode the temp array into a comma-separated list and add to the output array
                        $output[] = '[' . implode(', ', $temp) . ']';
                    }
                    // implode the output into a comma-newline separated list and echo
                    echo implode(",\n", $output);

                    mysql_close($con);
                ?>
        ]);
        var view = new google.visualization.DataView(data);
        view.setRows(data.getFilteredRows([
            {column: 0, value: name} //I want this to be the value changed on row selection
        ]));
        view.setColumns([1,2,3]);

            var options = {
                hAxis: { 'title': 'Date' },
                width: 1000,
                height: 600,
                curveType: 'function',
                crosshair: { trigger: 'both'}
            };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(view, options);
    }

</script>

Output ( Name, Date, Runs, Fails are the columns, my text in the center got rearranged for some reason): enter image description here

93

Answer

Solution:

What I realized was that the charts were stacking on top of each other inside of the first chart_div since they do not have unique identifiers for each container. So from there I just modified my php for the child row a bit to look like so:

Original:

echo "<tr class='tablesorter-childRow'>";
        echo "<td colspan='4'>";
            echo "<div id='chart_div' style='width: 1000px; height: 600px'></div>";
        echo "</td>";
    echo "</tr>";

New & Improved:

echo "<tr class='tablesorter-childRow'>";
        echo "<td colspan='4'>";
            echo "<div id='$val' style='width: 1000px; height: 600px'></div>";
        echo "</td>";
    echo "</tr>";

People are also looking for solutions to the problem: loop csv column values and concatenate values to new column in php

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.