Foros del Web » Programando para Internet » Javascript » Frameworks JS »

graficar segun fechas en libreria highcart(Ayuda)

 Estas en el tema de graficar segun fechas en libreria highcart(Ayuda) en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/03/2014, 16:01
 
Fecha de Ingreso: enero-2014
Mensajes: 33
Antigüedad: 10 años, 10 meses
Puntos: 0
graficar segun fechas en libreria highcart(Ayuda)
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
  1. $(function () {
  2.     var chart; 
  3.     
  4.     $(document).ready(function() {
  5.         $.getJSON("datos_VentaDiario.php", function(json) {
  6.         
  7.             chart = new Highcharts.Chart({
  8.                 chart: {
  9.                     renderTo: 'dia',
  10.                     type: 'line',
  11.                     marginRight: 130,
  12.                     marginBottom: 25
  13.                 },
  14.                 title: {
  15.                     text: '',
  16.                     x: -20 //center
  17.                 },
  18.                 subtitle: {
  19.                     text: '',
  20.                     x: -20
  21.                 },
  22.                 xAxis: {
  23.                     categories: ['0']
  24.                 },
  25.                 yAxis: {
  26.                     title: {
  27.                         text: ''
  28.                     },
  29.                     plotLines: [{
  30.                         value: 0,
  31.                         width: 1,
  32.                         color: '#808080'
  33.                     }]
  34.                 },
  35.                 tooltip: {
  36.                     formatter: function() {
  37.                             return '<b>'+ this.series.name +'</b><br/>'+
  38.                             this.x +': '+ this.y;
  39.                     }
  40.                 },
  41.                 legend: {
  42.                     layout: 'vertical',
  43.                     align: 'right',
  44.                     verticalAlign: 'top',
  45.                     x: -10,
  46.                     y: 100,
  47.                     borderWidth: 0
  48.                 },
  49.                 series: json
  50.             });
  51.         });
  52.     
  53.     });
  54.     
  55. });

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

Etiquetas: ajax, funcion, html, input, jquery, js, libreria, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:04.