graficar segun fechas en libreria highcart(Ayuda)

MenS1ayer · #1 (**permalink**) 03/03/2014, 16:01

Buenas, les comento mi problema, estoy trabajando con este libreria ah funcionado muy bien ningun problema pero lo que me pideron hacer es un tanto dificil o al menos para mi, como se trabajan con fechas, valores y precios tengo que implementar un calendario que segun la fecha me grafique los valores de dicha fecha eh estado "jugando" con las propiedades de higchart pero no logra quedar, les mostrare como es que hago el procedimiento, primero tengo mi pagina php

principal.php

Código PHP:

 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
    <script type="text/javascript" src="../Grafica/grafico_cal.js" ></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> 
        <script src="//code.jquery.com/jquery-1.9.1.js"></script> 
        <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
         
        <script> 
        $(function() { 
        $( "#datepicker" ).datepicker({dateFormat : 'yy-mm-dd'}); 
        }); 
         
        function fecha() 
        { 
            var date = $("#datepicker" ).val(); 
             
            if(date) 
            { 
                $.post("datos_VentaDiario.php", {datepicker:date}, function(resultado) 
                { 
                    $("#dia").html(resultado); 
                     
                } 
                 
                ); 
            } 
             
        } 
        </script> 
     
     
</head> 
<body> 
<script src="http://code.highcharts.com/highcharts.js"></script> 
  <script src="http://code.highcharts.com/modules/exporting.js"></script> 
 
<input  onChange="fecha();" 
        type="text" style="background-color:#716B6B;color:#FFFFFF;"  
        value="<?php echo date('Y-m-d',strtotime('-1 day')); ?>" id="datepicker" name="datepicker"> 
 
<div id="dia" style="width: 800px; height: 300px; margin: 0 auto; "></div> 
<br> 
 
</body> 
</html>

este es mi archivo donde hago la consulta sql
datos_VentaDiario.php

Código PHP:

  <?php 
include_once "conexion2.php"; 
 
@$f =  $_POST['datepicker']; 
 
$f1 = date("Y-m-d"); 
 
$f2=strtotime('-1 day',strtotime($f1)); 
 
$f3=date("Y-m-d", $f2); 
 
$sql = "SELECT FechaEmision, 
 
(SELECT Nombre FROM Sucursal WHERE (Sucursal = VentasSucursal.Sucursal)) AS NombreSucursal, 
 
CONVERT (VarChar, Sucursal) AS Sucursal,  
ROUND(VentaActual / 1000, 3) AS VentaActual,  
ROUND(VentaAnoAnt / 1000, 3) AS VentaAnoAnt,  
ROUND(VentaBisAnt / 1000, 3) AS VentaBisAnt,  
ROUND(VentaDiaAnt / 1000, 3) AS VentaDiaAnt,  
ROUND(VentaSemAnt / 1000, 3) AS VentaSemAnt 
FROM VentasSucursal WHERE (FechaEmision = '$f') 
"; 
 
$sth = odbc_exec($conn,$sql); 
$rows = array(); 
$rows['name'] = 'VentaActual'; 
while($r = odbc_fetch_array($sth)) { 
    $rows['data'][] = $r['VentaActual']; 
} 
 
$sql="SELECT FechaEmision, 
 
(SELECT Nombre FROM Sucursal WHERE (Sucursal = VentasSucursal.Sucursal)) AS NombreSucursal, 
 
CONVERT (VarChar, Sucursal) AS Sucursal,  
ROUND(VentaActual / 1000, 3) AS VentaActual,  
ROUND(VentaAnoAnt / 1000, 3) AS VentaAnoAnt,  
ROUND(VentaBisAnt / 1000, 3) AS VentaBisAnt,  
ROUND(VentaDiaAnt / 1000, 3) AS VentaDiaAnt,  
ROUND(VentaSemAnt / 1000, 3) AS VentaSemAnt 
FROM VentasSucursal WHERE (FechaEmision = '$f') 
"; 
 
$sth = odbc_exec($conn,$sql); 
$rows1 = array(); 
$rows1['name'] =  'VentaAnoAnt'; 
while($r1 = odbc_fetch_array($sth)) { 
    $rows1['data'][] = $r1['VentaAnoAnt']; 
} 
 
$sql="SELECT FechaEmision, 
 
(SELECT Nombre FROM Sucursal WHERE (Sucursal = VentasSucursal.Sucursal)) AS NombreSucursal, 
 
CONVERT (VarChar, Sucursal) AS Sucursal,  
ROUND(VentaActual / 1000, 3) AS VentaActual,  
ROUND(VentaAnoAnt / 1000, 3) AS VentaAnoAnt,  
ROUND(VentaBisAnt / 1000, 3) AS VentaBisAnt,  
ROUND(VentaDiaAnt / 1000, 3) AS VentaDiaAnt,  
ROUND(VentaSemAnt / 1000, 3) AS VentaSemAnt 
FROM VentasSucursal WHERE (FechaEmision = '$f')"; 
 
$sth = odbc_exec($conn,$sql); 
$rows2 = array(); 
$rows2['name'] = 'VentaBisAnt'; 
while($r2 = odbc_fetch_array($sth)) { 
    $rows2['data'][] = $r2['VentaBisAnt']; 
} 
 
 
 
 
$result = array(); 
array_push($result,$rows); 
array_push($result,$rows1); 
array_push($result,$rows2); 
print json_encode($result, JSON_NUMERIC_CHECK); 
 
?>

y este mi archvo js que es el encargado de graficar
grafico_cal.js

Código Javascript:

Ver original$(function () {
    var chart; 
    
    $(document).ready(function() {
        $.getJSON("datos_VentaDiario.php", function(json) {
        
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'dia',
                    type: 'line',
                    marginRight: 130,
                    marginBottom: 25
                },
                title: {
                    text: '',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: {
                    categories: ['0']
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    formatter: function() {
                            return '<b>'+ this.series.name +'</b><br/>'+
                            this.x +': '+ this.y;
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },
                series: json
            });
        });
    
    });
    
});

Menciono que si al archvio que hace la consulta se le pone una fecha fija funciona sin problema pero no logro que el calendario y la grafica trabajen juntos, si me puediran ayudar se los agradeceria