Estadisticas en jquery

satjaen · #1 (**permalink**) 15/09/2013, 07:20

Hola, tengo este código para sacar estadísticas. Pero no se como se hace el data[]. No me saca las variables ($mes, $avisos ):

Código Javascript:

Ver originalseries: [{
        type: 'line',                
        name: 'Meses',
        data: [<? echo $mes; ?>]                
         },{
        name: 'Avisos',
        data: [<? echo $avisos; ?>]     
         }
]

Código Javascript:

Ver original<?php
$conexion=mysql_connect ("localhost","","");
mysql_select_db ("Avisoswed",$conexion);
    $query = mysql_query("SELECT MONTH( realizacion ) AS mes, COUNT( 1 ) AS avisos
FROM avisos
WHERE realizacion
BETWEEN '2012-01-01'
AND '2012-12-31'
GROUP BY MONTH( realizacion )
ORDER BY MONTH( realizacion )");
  
if (mysql_num_rows($query)>0 ) {  
  
  $datos = array(); 
     
    while($row = mysql_fetch_array($query)) 
    { 
         
        $datos[] = array(
         
            'mes' => $row['0'],
            'avisos' => $row['1'] 
    
        ); 
    } 
    // convertimos el array de datos a formato json 
    json_encode($datos); 
}
?>
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <title>Estadisticas con Jquery | Jquery Easy</title>
        <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="js/highcharts.js"></script>
        <!-- Este archivo es para darle un estilo (Este archivo es Opcional) -->
        <script type="text/javascript" src="js/themes/grid.js"></script>
        <!-- Este archivo es para poder exportar losd atos que obtengamos -->
        <script type="text/javascript" src="js/modules/exporting.js"></script>
    <script type="text/javascript">
        
            var chart;
            $(document).ready(function() {
                chart = new Highcharts.Chart({
                    chart: {
                        renderTo: 'container',
                        plotBackgroundColor: null,
                        plotBorderWidth: null,
                        plotShadow: false
                    },
                    title: {
                        text: 'Comparativa facturación avisos FG 2012-2013'
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                        }
                    },
                    plotOptions: {
                        line: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: false
                            },
                            showInLegend: true
                        }
                    },
                    
                     series: [{
        type: 'line',                
        name: 'Meses',
        data: [<? echo $mes; ?>]                
         },{
        name: 'Avisos',
        data: [<? echo $avisos; ?>]     
         }
]
                
                });
            });
        </script>
<style type="text/css">
           h4{ font-family:Arial, Helvetica, sans-serif;
           color:#630;}
           .cabecera{
                background: #4A3C31;
                border-bottom: 5px solid #69AD3C;
                margin:-8px 0 0 -8px;
                width: 100%;
            }
           .cabecera img{ 
                margin:40px 0 0 30px;
            }
 
</style>    
    </head>
<body>
<div class="cabecera"><a href="http://jqueryeasy.com/"><img src="http://www.jqueryeasy.com/application/views/templates/colorvoid/static/images/logo.gif" border="0" /></a></div>
 
    
    
    
    <center><h4>Graficos Estadisticos con Jquery</h4></center>
    
    <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
        
        
</body>
</html>

EDITO:

Lo he intentado así pero no sale, estoy atascado en que no se como pasar la respuesta del array json a esta linea:

Código Javascript:

Ver original$serie1 = array( 'name' => 'Avisos' , 'data' => array($row['1']) ) ;

Código Javascript:

Ver original$datos[] = array(
        
            array('avisos'  => $row['1']) 
    
        ); 
    } 
    
    // convertimos el array de datos a formato json 
    echo json_encode($datos);
}
 
 
$serie1 = array( 'name' => 'Avisos' , 'data' => array($row['1']) ) ;
 
$array = array();
array_push( $array, $serie1);

Código Javascript:

Ver original<?php
$conexion=mysql_connect ("localhost","","");
mysql_select_db ("Avisoswed",$conexion);
    $query = mysql_query("SELECT MONTH( realizacion ) AS mes, COUNT( 1 ) AS avisos
FROM avisos
WHERE realizacion
BETWEEN '2012-01-01'
AND '2012-12-31'
GROUP BY MONTH( realizacion )
ORDER BY MONTH( realizacion )");
  
if (mysql_num_rows($query)>0 ) {  
 
$datos = array(); 
     
    while($row = mysql_fetch_array($query)) 
    {
 
 
 
        $datos[] = array(
        
            array('avisos'  => $row['1']) 
    
        ); 
    } 
    
    // convertimos el array de datos a formato json 
    echo json_encode($datos);
}
 
 
$serie1 = array( 'name' => 'Avisos' , 'data' => array($row['1']) ) ;
 
$array = array();
array_push( $array, $serie1);
 
?>
 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Ejemplo Estadistica</title>
        <script src="jquery/jquery-1.4.1.min.js" type="text/javascript"></script>
        <script src="jquery/estadisticas/highcharts.js" type="text/javascript"></script>
        <script src="jquery/estadisticas/modules/exporting.js" type="text/javascript"></script>
        *
        <script type="text/javascript">                        
            $(function () {
                var datos =  <?php echo json_encode( $array) ?>;
                var chart;
                $(document).ready(function() {
                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: 'container',
                            type: 'line',
                            marginRight: 130,
                            marginBottom: 25
                        },
                        title: {
                            text: 'Monthly Average Temperature',
                            x: -20 //center
                        },
                        subtitle: {
                            text: 'Source: WorldClimate.com',
                            x: -20
                        },
                        xAxis: {
                            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                        },
                        yAxis: {
                            title: {
                                text: 'Nº Avisos'
                            },
                            plotLines: [{
                                    value: 0,
                                    width: 1,
                                    color: '#808080'
                                }]
                        },
                        tooltip: {
                            formatter: function() {
                                return '<b>'+ this.series.name +'</b><br/>'+
                                    this.x +': '+ this.y +'°C';
                            }
                        },
                        legend: {
                            layout: 'vertical',
                            align: 'right',
                            verticalAlign: 'top',
                            x: -10,
                            y: 100,
                            borderWidth: 0
                        },
                        series: datos
                    });
                });
            });
            *
        </script>
    </head>
    <body>
        <div id="container" style="width: 100%; height: 400px"></div>
    </body>
</html>

Gracias y un saludo