Google line chart with multiple data

Question

The below code to generate google line chart works fine with 2 values (Date and Mean) assigned. When I added more data (including Mode and Variance as shown below), it just shows the original datas (Date and Mean). The other data are not displayed. What am I doing wrong here? please. I am still learning google charts. Any help would be appreciated greatly. thanks.

<?php

    $servername = "localhost";
    $username = "root";
    $password = ""; 
    $dbname = "mydb";  

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con->connect_error) {
        die("Connection failed: " . $con->connect_error);
    }
    else
    {
);
    }
    $query = "SELECT Date, Mean, Mode, Variance FROM datatb";  
    $aresult = $con->query($query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Data</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            var data = google.visualization.arrayToDataTable([

                ['Date','Mean','Mode','Variance'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
                    }
                ?>


               ]);


    var view = new google.visualization.DataView(data);
        view.setColumns([0, 1, {
        calc: 'stringify',
        sourceColumn: 1,
        type: 'string',
        role: 'annotation'

    }]);


            var options = {
                title: 'Data',
                hAxis : {textStyle : {fontSize: 8}},
                'tooltip' : { trigger: 'none'},
                enableInteractivity: false, 
                width: '100%',
                height: '700',
                chartArea:{
                left:10,
                top: 100,
                width: '100%',
                height: '450',
                },
                pointSize:4,
                vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' }, 
                annotations: { stemColor: 'white', textStyle: { fontSize: 11 } }, 
                legend: { position: 'bottom' }
                     };


               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options); 

            chart.draw(view, options);  

        }

    </script>
</head>
<body>
     <div id="curvechart" style="width: 2500px; height: 600px"></div> 
</body>
</html>

Whitehat's suggestion:

<?php

    $servername = "localhost";
    $username = "root";
    $password = ""; 
    $dbname = "mydb";  

    $con = new mysqli($servername, $username, $password, $dbname);

    if ($con->connect_error) {
        die("Connection failed: " . $con->connect_error);
    }
    else
    {
);
    }
    $query = "SELECT Date, Mean, Mode, Variance FROM datatb";  
    $aresult = $con->query($query);

?>

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Data</title>
    <script type="text/javascript" src="loader.js"></script>
    <script type="text/javascript">
        google.charts.load('current', {'packages':['corechart']});

        google.charts.setOnLoadCallback(drawChart);
        function drawChart(){

            var data = new google.visualization.DataTable();
            data.addColumn('number', 'Mode');
            data.addColumn('number', 'Variance');
            var data = google.visualization.arrayToDataTable([

                ['Date','Mean','Mode','Variance'],
                <?php
                    while($row = mysqli_fetch_assoc($aresult)){
                        echo "['".$row["Date"]."', ".$row["Mean"].", ".$row["Mode"].", ".$row["Variance"]."],";
                    }
                ?>


               ]);


    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
}, ]);


            var options = {
                title: 'Data',
                hAxis : {textStyle : {fontSize: 8}},
                'tooltip' : { trigger: 'none'},
                enableInteractivity: false, 
                width: '100%',
                height: '700',
                chartArea:{
                left:10,
                top: 100,
                width: '100%',
                height: '450',
                },
                pointSize:4,
                vAxis: { textPosition: 'none', gridlines: { count: 10 }, baselineColor: 'gray' }, 
                annotations: { stemColor: 'white', textStyle: { fontSize: 11 } }, 
                legend: { position: 'bottom' }
                     };


               var chart = new google.visualization.LineChart(document.getElementById('curvechart')); 
               chart.draw(data, options); 

            chart.draw(view, options);  

        }

    </script>
</head>
<body>
     <div id="curvechart" style="width: 2500px; height: 600px"></div> 
</body>
</html>

Need to add the additional column indexes (2, 3) to setColumns, after the annotation column — WhiteHat
Also looks like the closing bracket ] is missing from the end of the echo statement — WhiteHat
I added the closing bracket, and added the following annotation columns , but nothing changed. it generates the graph for date and mean only. var data = new google.visualization.DataTable(); data.addColumn('number', 'Mode'); data.addColumn('number', 'Variance'); var data = google.visualization.arrayToDataTable([ — Max

WhiteHat WhiteHat · Accepted Answer · 2018-07-06T15:03:28

after correcting the echo statement, just need to add column to the view...

var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, 3]);

or if you want all to have annotations...

var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
    calc: 'stringify',
    sourceColumn: 1,
    type: 'string',
    role: 'annotation'
}, 2, {
    calc: 'stringify',
    sourceColumn: 2,
    type: 'string',
    role: 'annotation'
}, 3, {
    calc: 'stringify',
    sourceColumn: 3,
    type: 'string',
    role: 'annotation'
}, ]);

Google line chart with multiple data

1 Answers