0

Ya tengo preparada mi consulta para tener ventas por dia, por mes y por año, ahora esta general pero solo es de agregar condición WHERE o dejar individual la consulta por dia, mes y año:

$stmt = $con->prepare("SELECT YEAR(order_date) AS year_report,
                            MONTHNAME(order_date) AS month_report,
                            sum(quantity) AS quantity,
                            sum(price) AS price,
                            order_date
                        FROM tbl_order
                        WHERE id_manager=6
                        GROUP BY YEAR(order_date), MONTHNAME(order_date)
                        ORDER BY YEAR(order_date), MONTHNAME(order_date)");
$stmt->execute();
$stmt->store_result();
$dateArray = [];//array();
$dateArray2 = [];
$stmt->bind_result(
    $year_report,
    $month_report,
    $quantity,
    $price,
    $order_date
);
while ($stmt->fetch()) {
    $dateArray[] = $order_date;
    $dateArray2[] = $month_report;
}

Y manualmente ya he preparado mi gráfica usando la librería chartjs:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- 3.9.1-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js" type="text/javascript"></script>
<div class="chartBox">
    <canvas id="myChart" width="400" height="400"></canvas>
    <button onclick="timeFrame(this)" value="day">Day</button>
    <button onclick="timeFrame(this)" value="week">Week</button>
    <button onclick="timeFrame(this)" value="month">Month</button>
</div>
<script>
    const day = [
        { x: Date.parse('2021-11-01 00:00:00 GMT+0800'), y: 18 },
        { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 12 },
        { x: Date.parse('2021-11-03 00:00:00 GMT+0800'), y: 1 }
    ];
    const week = [
        { x: Date.parse('2021-10-31 00:00:00 GMT+0800'), y: 18 },
        { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 87 },
        { x: Date.parse('2021-11-03 00:00:00 GMT+0800'), y: 10 }
    ];
    const month = [
        { x: Date.parse('2021-10-31 00:00:00 GMT+0800'), y: 18 },
        { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 87 },
        { x: Date.parse('2021-12-03 00:00:00 GMT+0800'), y: 10 }
    ];

    console.log(day);
    // setup 
    const data = {
      //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      datasets: [{
        label: 'Weekly Sales',
        data: day,
        //data: [18, 12, 6, 9, 12, 3, 9],
        backgroundColor: [
          'rgba(255, 26, 104, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
          'rgba(0, 0, 0, 0.2)'
        ],
        borderColor: [
          'rgba(255, 26, 104, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
          'rgba(0, 0, 0, 1)'
        ],
        borderWidth: 1
      }]
    };

    // config 
    const config = {
      type: 'bar',
      data,
      options: {
        scales: {
            x: {
                type: 'time',
                time: {
                    unit: 'month'
                }
            },
          y: {
            beginAtZero: true
          }
        }
      }
    };

    // render init block
    const myChart = new Chart(
      document.getElementById('myChart'),
      config
    );
    function timeFrame(period) {
        //console.log(period)
        //console.log(period.value)
        if(period.value == 'day') {
            myChart.config.options.scales.x.time.unit = period.value;
            myChart.config.data.datasets[0].data = day;
        }
        if(period.value == 'week') {
            myChart.config.options.scales.x.time.unit = period.value;
            myChart.config.data.datasets[0].data = week;
        }
        if(period.value == 'month') {
            myChart.config.options.scales.x.time.unit = period.value;
            myChart.config.data.datasets[0].data = month;
        }
        myChart.update();
    }
</script>

Lo que no entiendo es cómo puedo pasar mis datos json de mi consulta a estos parámetros de JavaScript que la funcionalidad chart.js espera:

const day = [
    { x: Date.parse('2021-11-01 00:00:00 GMT+0800'), y: 18 },
    { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 12 },
    { x: Date.parse('2021-11-03 00:00:00 GMT+0800'), y: 1 }
];
const week = [
    { x: Date.parse('2021-10-31 00:00:00 GMT+0800'), y: 18 },
    { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 87 },
    { x: Date.parse('2021-11-03 00:00:00 GMT+0800'), y: 10 }
];
const month = [
    { x: Date.parse('2021-10-31 00:00:00 GMT+0800'), y: 18 },
    { x: Date.parse('2021-11-02 00:00:00 GMT+0800'), y: 87 },
    { x: Date.parse('2021-12-03 00:00:00 GMT+0800'), y: 10 }
];

¿Me pueden explicar cómo pasar dicha información a mi gráfico?


Actualización

Realizando intentos he realizado la siguiente modificaciones, aún estoy muy lejos de conseguir los datos de: const day, const week, const month pero de la siguiente manera he obtenido en la parte inferior los meses:

const dateArray = <?php echo json_encode($dateArray); ?>;
const dateChart = dateArray.map((day, index) => {
    let dayjs = new Date(day);
    console.log(dayjs);
    return dayjs.setHours(0,0,0,0);
})

//console.log(dateChart);
//console.log(day);
// setup 
const data = {
  //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  //labels: dateChart,
  datasets: [{
    label: 'Weekly Sales',
    data: dateChart,

Es decir prácticamente tengo los datos x: faltarían los datos y: curiosamente probé lo siguiente pero no funcionó:

data: [dateChart, 10, 12, 18, 20],

Nota:los datos en y: van las cantidades de artículos vendidos de la variable $quantity adicional me gustaría agregar los ingresos totales que se los obtiene de la variable $price

1 respuesta 1

0

En cualquier lenguaje la clave está en recorrer con for el request. Si decidimos crear como los datos a usar day_report y price, creamos 2 vectores, los cuales lo llenamos con un for y asignamos como atributos de chartJS:

var outcome; 
$.getJSON('url', function(json) {
    outcome = json; 
});

var dias = [];
var precios = [];

for (var i in outcome) {
    dias.push(outcome[i].day_report);
    precios.push(outcome[i].price);
}

const data = {
  labels: dias
  datasets: [{
    label: 'Weekly Sales',
    data: precios,
    //data: [18, 12, 6, 9, 12, 3, 9],
    backgroundColor: [
      'rgba(255, 26, 104, 0.2)',
      'rgba(54, 162, 235, 0.2)',
      'rgba(255, 206, 86, 0.2)',
      'rgba(75, 192, 192, 0.2)',
      'rgba(153, 102, 255, 0.2)',
      'rgba(255, 159, 64, 0.2)',
      'rgba(0, 0, 0, 0.2)'
    ],
    borderColor: [
      'rgba(255, 26, 104, 1)',
      'rgba(54, 162, 235, 1)',
      'rgba(255, 206, 86, 1)',
      'rgba(75, 192, 192, 1)',
      'rgba(153, 102, 255, 1)',
      'rgba(255, 159, 64, 1)',
      'rgba(0, 0, 0, 1)'
    ],
    borderWidth: 1
  }]
};

8
  • En la parte de javascript donde realizo el echo json?
    – J. Mick
    Commented el 4 nov. 2022 a las 6:04
  • La parte del php está bien, todo mi código es la parte Javscript, si esa tu pregunta, cuando se hace la consulta con el método: 'getJSON' ya todo se manipula con el Json. Commented el 4 nov. 2022 a las 6:10
  • Me di cuenta que con esas condiciones no va a funcionar los filtros ya que en el labels no se pasa nada, solo en ,data
    – J. Mick
    Commented el 4 nov. 2022 a las 14:12
  • Pero como declare dos vectores dias[ ], precio[ ], puedes poner el valor que quieras y de la data en outsome, el request que llega de php puedes elegir que valores y poner y agregar a cualquier vector. Commented el 4 nov. 2022 a las 14:23
  • es decir que debe ser data: precios, dias, porque aquí es donde se deben ir los datos, porque sino es así entonces tocaría modificar el código php
    – J. Mick
    Commented el 4 nov. 2022 a las 14:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.