Google charts multiline dynamic charts

Question

Am new to PHP coding & have a few google charts working. All of these charts I've generated so far are based on (date,number of event occurrences) type of chart. I'm trying to plot a google chart whose data is the output of SQL query.

The output of SQL query looks as below

|SERIES|DATE_1|DATE_2|DATE_3| |a|2|3|
|b|4|6|
|c|7|8|

Both SERIES & DATE_1 can vary. That is to say, based on various conditions in the SQL query, the number of DATE_ can be vary & so can the SERIES.

I would then have to pass this output to the google chart plot code.

Here is what i've tried coding so far

    $link = mysql_connect("localhost", "user", "pass");
    $dbcheck = mysql_select_db("database"); 
    if ($dbcheck) {
        $chart_array_1[] = "['MY_DATE','MY_NAME','#NUM_OCCURENCES']";
        $result = mysql_query($sql);
        if (mysql_num_rows($result) > 0) {
            while ($row = mysql_fetch_assoc($result)) {
                $my_date=$row["MY_DATE"];
                $my_ins=$row["MY_NAME"];
                $my_count=$row["MY_COUNT"];
                $chart_array_1[]="['".$my_date."','".$my_ins."',".$my_count."]";
            }
        }
    }
    mysqli_close($link);

 <script type="text/javascript">
            // 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);

            function drawChart() {
                // Create our data table out of JSON data loaded from server.
                var data_1  = google.visualization.arrayToDataTable([<?php echo (implode(",", $chart_array_1)); ?>])

                var options = {
                    bar: {groupWidth: "6%"},
                     trendlines: {
                        1: {
                          type: 'linear',
                          color: 'green',
                          lineWidth: 3,
                          opacity: 0.3,
                          showR2: true,
                          visibleInLegend: true
                        }
                      },
                    chartArea: {
                        left: 70,
                        top: 61,
                        width:'95%',
                        height:'70%'
                    },
                    curveType: 'function',
                    //width: 1600,
                    height: 400,
                    pointSize: 4,
                    lineWidth: 2,
                    visibleInLegend: false,
                    vAxis: { 
                        //title: "GC#",
                        logScale: true,
                        titleTextStyle: {
                            color: 'black'
                        }
                    },
                    hAxis: {
                        title: "TIMELINE",
                        titleTextStyle: {
                            bold: false,
                            color: 'black'
                        }
                    },
                    legend: {
                        position: 'top',
                        alignment: 'center',
                        textStyle: {
                            color: 'blue'
                        }
                    }
                };


              var chart_1 = new google.visualization.LineChart(document.getElementById('plot1'));
              chart_1.draw(data_1, options);
            }
</script>

I'm unable to plot the graph. I get the error "Data column(s) for axis #0 cannot be of type string×". Could someone please help me here.

I'd like to see a,b,c etc as separate series each while the date goes on to the X-Axis. Please note am after generating data dynamically using SQL query & not a static array which most examples demonstrate. Could someone please help?

User12345 User12345 · Accepted Answer · 2015-06-16T06:11:08

-1

votes

Managed to implement thing a different way. Hence this question can be ignored.

Google charts multiline dynamic charts

1 Answers