1

Estoy tratando de crear un gráfico Flot de jQuery con series múltiples extrayendo los datos de la base de datos con un query.

Esta es la table que tengo en la base de datos:

Codigo | Date/Time

A | 9-10-2016 09:25

B | 10-11-2016 10:11

C | 11-10-2016 14:23

A | 9-10-2016 10:10

B | 10-11-2016 11:00

Como pueden ver existen varias entradas para cada Código por lo que se necesita obtener por medio del query el total de entradas para cada día agrupados por código. Así al final se obtendrá: A= 2 para el 9-10-2016, B=2 para el 10-11-2016 y C=1 para el 1-10-2016 y graficarlo posteriormente.

No tengo problemas creando el Flo Chart para un serie, pero necesito adicionarle por medio de codigo php las series adicionales loas cuales pueden ser varias para cada día.

La pregunta seria, como extraer de la base de datos esa información usando mysql y php para luego agregarlo a las variables del javascript del Flot chart de manera dinámica???

Este es el código que tengo para el Flot Chart, el cual funciona bien para 1 serie.

    <script type="text/javascript">

$(document).ready(function () {

    var d1 = [<?php print_r($js_array1); ?>];


    var data = [{label: "<?php echo $error_code; ?>" , data: d1, lines: { show: true, fill: false }, points: { show: true }, color: "#478514" }
    ];

    var p = $.plot($("#placeholder"), data, {
            xaxis: {
      ticks: 8,
      mode: 'time'
    },
    yaxis: {
      ticks: 6,
      min: 0
    },
    grid: {
      backgroundColor: { colors: ['#fff', '#eee'] },
      hoverable: true
    },
    legend: {
      labelFormatter: function(label, series) {
        return '<a href="$chart_label_link">' + label + '</a>';
      }
            }
    });

    $.each(p.getData()[0].data, function(i, el){
        var o = p.pointOffset({x: el[0], y: el[1]});
        $('<div class="data-point-label">' + el[1] + '</div>').css( {
            position: 'absolute',
            left: o.left -10,
            top: o.top -20,
            display: 'none',
            'font-size': '13px'
        }).appendTo(p.getPlaceholder()).fadeIn('slow');
    });

    function showTooltip(x, y, contents, z) {
        $('<div id="flot-tooltip">' + contents + '</div>').css( {
            position: 'absolute',
            display: 'none',
            top: y - 30,
            left: x + 30,
            border: '2px solid',
            padding: '2px',
            'background-color': '#FFF',
            opacity: 0.80,
            'font-size': '10px',
            'border-color': z,
            '-moz-border-radius': '5px',
            '-webkit-border-radius': '5px',
            '-khtml-border-radius': '5px',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
            'border-radius': '5px'
        }).appendTo("body").fadeIn(200);
    }


    function getMonthName(numericMonth) {
        var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        var alphaMonth = monthArray[numericMonth];

        return alphaMonth;
    }



    function convertToDate(timestamp) {
        var newDate = new Date(timestamp);
        var dateString = newDate.getMonth();
        var monthName = getMonthName(dateString);

        return monthName;
    }

    var previousPoint = null;
    var previousPointLabel = null;

    $("#placeholder").bind("plothover", function (event, pos, item) {
        if (item) {
            if ((previousPoint != item.dataIndex) || (previousLabel != item.series.label)) {
                previousPoint = item.dataIndex;
                previousLabel = item.series.label;

                $("#flot-tooltip").remove();

                var x = convertToDate(item.datapoint[0]);
                y = item.datapoint[1];
                z = item.series.color;

                showTooltip(item.pageX, item.pageY,
                        "<b>" + item.series.label + "</b><br />" + y + " transactions impacted.",
                        z);
            }
        } else {
            $("#flot-tooltip").remove();
            previousPoint = null;
        }
    });
});
</script>

Muchas gracias por la ayuda!!

1
  • Te recomiendo usar Highcharts JS. Commented el 20 mar. 2017 a las 17:35

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.