Integration with PHP and MySQL


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by mario aldana on 26th March 2013
hello, i need help with the example about the connection with a database, this is for a school assignment, i need it so hard.

this is my code:

-----------------------------------------------------------------------------
<html>
<head>

     <!-- Don't forget to update these paths -->
    
      <script src="htdocs/graficas/RGraph.common.core.js" ></script>
     <script src="htdocs/graficas/RGraph.line.js" ></script>
 
    

</head>
<body>
    
 
  <?php
     /**
     * Change these to your own credentials
    $hostname = "localhost";
     $username = "marius";
     $database = "grafrg";
     */
 
    
     $connection = mysql_connect("localhost", "marius") OR die('Could not connect to MySQL: ' . mysql_error());
     mysql_select_db("grafrg",$connection);
    
     $result = mysql_query("SELECT st_day, st_statistics FROM daily_statistics");
     if ($result) {
    
         $labels = array();
         $data = array();
    
         while ($row = mysql_fetch_assoc($result)) {
             $labels[] = $row["st_day"];
             $data[] = $row["st_statistics"];
         }

         // Now you can aggregate all the data into one string
         $data_string = "[" . join(", ", $data) . "]";
         $labels_string = "['" . join("', '", $labels) . "']";
     } else {
         print('MySQL query failed with error: ' . mysql_error());
  
  
     }
?>
  <h1>A basic Bar chart</h1>


     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>
     <script>
 
        

         chart = new RGraph.Line('cvs', <?php echo($data_string) ?>);
         chart.Set('chart.background.grid.autofit', true);
         chart.Set('chart.gutter.left', 35);
         chart.Set('chart.gutter.right', 5);
         chart.Set('chart.hmargin', 10);
         chart.Set('chart.tickmarks', 'endcircle');
         chart.Set('chart.labels', <?php echo($labels_string) ?>);
         chart.Draw();
 
     </script>

</body>
</html>

-----------------------------------------------------------------------------

there is no problem with the database connection, i echo the two variables $labels_string, $data_string as a test of the connection; it works, but the graphic doesn't show in the final page.

i think its the path of the scripts:

  <script src="htdocs/graficas/RGraph.common.core.js" ></script>
     <script src="htdocs/graficas/RGraph.line.js" ></script>

i have this scripts in the same folder(graficas) as the html document.

i'm using xampp, please, i need help.

ps: sorry for my bad English, greetings from mexico.
 
Posted by RGraph support on 26th March 2013
Hi there,

Well if you use the Chrome console it will tell you if the scripts are found or not. Plus you'll get an error like: "RGraph is undefined". If the scripts and the HTML page are in the same folder then try these instead of what have currently:

<script src="RGraph.common.core.js" ></script>
<script src="RGraph.line.js" ></script>



Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Enter your name... on 27th March 2013
hello.

i change the path to this ones(<script src="RGraph.line.js" ></script>), if i leave it the other way, the console tell me 404, but this is the correct way,the one you tell me, thank you.



on the other hand, the graphic still doesn't show up, the console only shows me one error: "Uncaught SyntaxError: Unexpected token <"
in this line:" var chart = new RGraph.Line('cvs', <?php print($data_string) ?>);"

the canvas is there, but its blank, it doesn't show me anything, doesn't show any error messages like: "RGraph is undefined", the page just stay blank .

i add: window.onload = function (){}
the "var" before the chart isn't on the example.
var chart = new RGraph.Line

if you can help me i'll be grateful
Posted by RGraph support on 27th March 2013
Hi there,

Judging by the error your PHP isn't being parsed. So you need to get this working on your server first. If you view-source in your browser you shouldn't be seeing any PHP.


Richard, RGraph support
RGraph - HTML5 and Javascript charts
www.rgraph.net
Posted by Thanx on 25th May 2013
It is really very helpful script thnx v much
Posted by zahra on 21st October 2016
hi
i wanna have a mixgtured chart. but i've interfered with this problem and it doesn't show me the chart.what's wrong with my code.
my code is this:
<html>
<head>

      <!-- Don't forget to update these paths -->

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.bar.js"></script>
</head>
<body>
<?php
    
    $connection = mysqli_connect("localhost", "root", "") OR die('Could not connect to MySQL: ' . mysqli_connect_error());
     // mysql_select_db("root",$connection);
     
      $result = mysqli_query($connection, '');
      if ($result) {
     
          $labels = array();
          $data = array();
   
     
          while ($row = mysqli_fetch_assoc($result)) {
              $labels[] = $row[''];
              $data[] = $row[''];
          }

          // Now you can aggregate all the data into one string
          $data_string = "[" . join(", ", $data) . "]";
          $labels_string = "['" . join("', '", $labels) . "']";
      } else {
          print('MySQL query failed with error: ' .mysqli_connect_error());
   
   
      }
?>
<style>
     .RGraph_tooltip img {
         display: none;
     }

     .RGraph_tooltip {
         box-shadow: none ! important;
         border: 2px solid blue ! important;
         background-color: white ! important;
         padding: 3px ! important;
         text-align: center;
         font-weight: bold;
         font-family: Verdana;
     }
</style>
<canvas id="cvs" width="600" height="250">
     [No canvas support]
</canvas>

<script>
     window.onload = function ()
     {
         var people = ['Rob','Luis','Kinga'];
         var bar = new RGraph.Bar({
             id: 'cvs',
             data: [[18,15,45],[21,23,41],[28,21,12],[21,15,38]],
             options: {
                 labels: ['January','February','March','April'],
                 hmargin: 20,
                 hmarginGrouped: 2,
                 highlightFill: 'red',
                 key: ['This year','Last year'],
                 keyColors: ['red','yellow'],
                 keyPosition: 'gutter',
                 keyPositionGutterBoxed: false,
                 textSize: 14,
                 colors: ['rgba(0,0,0,0)'],
                 noyaxis: true,
                 backgroundGridVlines: false,
                 backgroundGridBorder: false,
                 textAccessible: true
             }
         }).draw();




         function DrawBottomAxis (obj)
         {
             var context = bar.context;
             var x = bar.gutterLeft;
             var y = bar.canvas.height - bar.gutterBottom;
             var w = bar.canvas.width - bar.gutterLeft - bar.gutterRight
             var h = 0;
             context.strokeStyle = 'black';
             context.strokeRect(x, y, w, h);
         }




         /**
         * Now create the VProgress bars
         */
         for (var i=0,j=0; i<bar.coords.length; ++i,++j) {
            
             if (i % 3 == 0) {
                 j = 0;
             }
            
             var coords = bar.coords[i];
            
             var vp = new RGraph.VProgress({
                 id: 'cvs',
                 min: 0,
                 max: 100,
                 value: [25,75],
                 options: {
                     gutterLeft: coords[0],
                     gutterTop: coords[1],
                     gutterRight: bar.canvas.width - (coords[0] + coords[2]),
                     gutterBottom: bar.gutterBottom,
                     labelsCount: 0,
                     tickmarks: false,
                     colors: ['yellow', 'rgba(255,0,0,0.5)'],
                     tooltips: [people[j],people[j]],
                     tooltipsEvent: 'mousemove',
                     tooltipsEffect: 'none',
                     strokestyle: 'rgba(0,0,0,0)',
                     textAccessible: true
                 }
             }).on('draw', DrawBottomAxis)
               .draw();




             /**
             * Override the function that positions the tooltip and place to the right of
             * the mouse pointer.
             */
             vp.positionTooltip = function (obj, x, y, tooltip, idx)
             {
                 tooltip.style.top = (y - tooltip.offsetHeight - 3) + 'px';
                 tooltip.style.left = (x - 3) + 'px';
             }
            
             vp.canvas.onmousemove = function (e)
             {
                 var tooltip = RGraph.Registry.Get('chart.tooltip');

                 if (tooltip) {
                     tooltip.style.top = (e.pageY - tooltip.offsetHeight - 3) + 'px';
                     tooltip.style.left = (e.pageX + 3) + 'px';
                 }
             }
            
             vp.canvas.onmouseout = function (e)
             {
                 RGraph.hideTooltip();
                 RGraph.redraw();
             }
         }
     };
   /**
         * These gutters determine the correct placement of the Line chart
         */
         line.set({
             gutterLeft: bar.get('gutterLeft') + ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutter.right')) / 24)
         });
         line.set({
             gutterRight: ((line.canvas.width - bar.get('gutterLeft') - bar.get('gutterRight')) / 24) + bar.get('gutterRight')
         });
        
         /**
         * Don't show Y labels on the Line chart
         */
         line.set({
             ylabels: false
         });
        
         /**
         * Now draw both of the charts. Bar chart first, then the Line chart is drawn on top of it
         */
         RGraph.redraw();
     };
</script>

Posted by Richard on 21st October 2016
Hi there,

If you view the source of the page you'll be ble to see what JavaScript is being output. You can then modify the PHP so that valid JavaScript is being output.

Then you can use your browsers console to see what JavaScript error there is.

PS. Instead of posting a vast amount of code - post a link to the page in question.




Richard
Posted by zahra on 21st October 2016
sorry, i forgot mention the error. error is just this:Mysql query failed error
Posted by Richard on 24th October 2016
Hi there,

Your query is empty - ie you have no SQL query:

result = mysqli_query($connection, '');




Richard
Posted by Hi Richard. on 30th January 2017
I want to display total no.of call, appointments, meetings in a chart type.
www.rgraph.net/demos/bar-stacked-click.html. By seeing this i worked on it.But the problem is when event mouseover triggered i want to show counts for meetings, tasks , calls appointments in a each bar w.r.to user.

var bar = new RGraph.Bar({
             id: '$canvasId',
             data: $json_string,
             options: {
                 grouping: 'stacked',
                 labels: $jsonLabels,
                 xlabels:true,
                 textSize:10,
                 labelsAbove: true,
                 //labelsAboveSize:10,
                 //labelsAboveUnitsPre:'$currency_symbol',
                // labelsAboveUnitsPost:'$thousands_symbol',
                 labelsAbovedecimals: 2,
                 //linewidth: 2,
                 eventsClick:outcomeByMonthClick,
                 //textSize:10,
                 strokestyle: 'white',
                // colors: ['Gradient(#4572A7:#66f)','Gradient(#AA4643:white)','Gradient(#89A54E:white)'],
                colors: ['#8EC3A7','#DC5356','#F0CB69'],
                 shadowOffsetx: 1,
                 shadowOffsety: 1,
                 shadowBlur: 10,
                 hmargin: 25,
                 colors:$colours,
                 gutterLeft: 60,
                 gutterTop:50,
                 gutterRight:160,
                 gutterBottom: 155,
                 textAngle: 45,
                 backgroundGridVlines: false,
                 backgroundGridBorder: false,
                 //tooltips:$jsonTooltips,
                 //tooltipsEvent:'mousemove',
                 colors:$colours,
                 key: $jsonKey,
                 keyColors: $colours,
                 keyBackground:'rgba(255,255,255,0.7)',
                 keyPosition: 'gutter',
                 keyPositionX: $canvasId.width - 150,
                 keyPositionY: 18,
                 keyPositionGutterBoxed: true,
                 axisColor: '#ccc',
                // unitsPre:'$currency_symbol',
               // unitsPost:'$thousands_symbol',
                 keyHalign:'right',
                 tooltipsCssClass: 'rgraph_chart_tooltips_css',
                 noyaxis: true
             }
         }).draw();
         bar.set('colors.sequential', true);
               bar.canvas.onmouseout = function (e)
         {
             // Hide the tooltip
             RGraph.hideTooltip();

             // Redraw the canvas so that any highlighting is gone
             RGraph.redraw();
         }
Posted by Richard on 30th January 2017
Hi there,

This will NOT print the contents of the PHP variables:


var bar = new RGraph.Bar({
     id: '$canvasId',
     data: $json_string,
     options: {
         grouping: 'stacked',
         labels: $jsonLabels,

....





You should be doing something like this, and also judging by the name you'll need to convert your $json_string variable to a real JavaScript array (like this does using the eval function):





var myData = eval('(<?php echo $json_string ?>)');
var myId = '<?php echo $canvasId ?>';

var bar = new RGraph.Bar({
     id: myId,
     data: myData,
     options: {
         grouping: 'stacked'
     }
}).draw();





And before you start adding configuration options, get the chart functioning with minimal or no configuration options, like above.





Richard

Add a reply

 




« Back to message list
RGraph on social media