Creating Baseline based on Mysql data

17 views
Skip to first unread message

dyana fadzil

unread,
Jan 2, 2020, 11:47:10 PM1/2/20
to Google Visualization API
Hi All,

Can please advise and teach me is there any possibilities to create the baseline in google chart based on the mysql data. Right now I can only create the fix baseline; meaning keyin the baseline value in the coding instead of taking from mysql data.
Hereby i include the coding and also the google chart image for your reference. The baseline is in red colour.

Need your kind help here. Thank you in advance! 

My coding is like this:


      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript" src = "https://www.google.com/jsapi">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>
   

      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>

       <script language = "JavaScript">
       function drawChart() {
      var data = google.visualization.arrayToDataTable([
         ['month', 'Performance Indicator (%)'],         
       <?php  
        $username=$_GET['username'];
        $query = "SELECT month , result_ind, target, username FROM performance WHERE username = $username";

        $exec = mysqli_query($db,$query);
        while($row = mysqli_fetch_assoc($exec)){

       echo "[".$row['month'].",".$row['result_ind']."],";
       }
       ?>

       ]);

            // Set chart options
            var options = {
               'title':'Month vs Performance Indicator for 2020',
                vAxis: {
                title: '%',
                baseline: 2.00,
                baselineColor: 'red'
                },
                hAxis: {
                title: 'Month'
               },
               'width':550,
               'height':400,
                pointSize: 5,
                trendlines: {
                0: {
                type: 'linear',
                color: 'purple',
                lineWidth: 5,
                opacity: 0.2,
                //visibleInLegend: true,
                  }
                } 
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.LineChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);
      </script>


google chart.PNG
Reply all
Reply to author
Forward
0 new messages