Highcharts library does not show data

Question

Highcharts library does not show data

Navigation

#1 by (1 votes)

0

I have the following code in PHP, this code causes me to search MySQL data and display it in a graphic in the HTML view.

The problem is that the data is not displayed on the screen for viewing by the end user.

<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>    
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>       
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'> </script>        
</head>    
<body>    
<?php   
//error_reporting('0');    
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
mysql_select_db("financeapp", $con); 

$SQL1 = "SELECT * FROM highcharts";

$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
   $data1[] = $row['datehigh'];
}

$result2 = mysql_query($SQL1);
$data2 = array();
while ($row = mysql_fetch_array($result2)) {
   $data2[] = hexdec($row['conteudo']);
}    
?>   
<script type="text/javascript">
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo: 'container',
             type: 'line'
          },    
        title:  {
                    text: 'Comming Data'
                },    
        xAxis:  {
                    categories: ['<?php echo join($data1, "','") ?>'],
                },   
        yAxis:  {
                    min:0,   
                },   
        legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 50,
                    y: 35,
                    floating: true,
                    shadow: true
                },   
        plotOptions: {
                        column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                    },    
        series: [   {
                        name: 'Data',
                        data: ['<?php echo join($data2, "','") ?>'],
                       // pointStart: 0
                        //pointInterval
                    },
                ]
    });
});
</script>

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

php mysql javascript

asked by anonymous 21.04.2014 / 06:32

1 answer

Capturing application usage time installed on Android How to run commands in Android Studio?

score 1 · Accepted Answer

You had some errors in your code, for example, join , so that the separation is the first parameter and the array the second join(',', $data1) , in your code was inverted.

Another factor was the graph that has data that should be enclosed in single quotation marks ( xAxis: { categories: ['<?php echo join("','", $data1) ?>'],}, ) and values without quotation marks ( series: [{ name: 'Data', data: [<?php echo join(',',$data2) ?>] ), in PHP while it only needs to be executed once to fill the two arrays ( $data1 , $data2 );

Note: Do not use mysql_, because it is obsolete in new versions of PHP, use PDO or Mysqli

Here is the working example:

Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>    
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>      
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'> </script>
</head> 
<body> 
<?php
$con = mysql_connect('localhost', 'root', '') or die('Error connecting to server');
       mysql_select_db("financeapp", $con);           
       $SQL1 = "SELECT * FROM highcharts";

       $result1 = mysql_query($SQL1);
       $data1 = array();
       $data2 = array();
       while ($row = mysql_fetch_array($result1)) {
           $data1[] = $row['datehigh'];
           $data2[] = hexdec($row['conteudo']);
       } 
?> 
<script type="text/javascript">
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo: 'container',
             type: 'line'
          }, 
        title:  { text: 'Comming Data' }, 
        xAxis:  { categories: ['<?php echo join("','", $data1) ?>'],}, 
        yAxis:  { min:0, }, 
        legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 50,
                    y: 35,
                    floating: true,
                    shadow: true
                }, 
        plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }}, 
        series: [{ name: 'Data', data: [<?php echo join(',',$data2) ?>],
                       // pointStart: 0
                        //pointInterval
                    },]
    });
});
</script> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>

The table I created as an example:

ResultObtained:

Browser-generated HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"     type="text/javascript"></script>    
<script src='http://code.highcharts.com/highcharts.js' type='text/javascript'> </script>      
<script src='http://code.highcharts.com/modules/exporting.js' type='text/javascript'> </script>
</head> 
<body> 

<script type="text/javascript">
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo: 'container',
             type: 'line'
          }, 
        title:  { text: 'Comming Data' }, 
        xAxis:  { categories: ['1','2','3','4','5'],}, 
        yAxis:  { min:0, }, 
        legend: {
                    layout: 'vertical',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 50,
                    y: 35,
                    floating: true,
                    shadow: true
                }, 
        plotOptions: { column: { pointPadding: 0.2, borderWidth: 0 }}, 
        series: [{ name: 'Data', data: [16,32,48,64,80],
                       // pointStart: 0
                        //pointInterval
                    },]
    });
});
</script> 
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>