Skip to main content
se añadieron 444 caracteres en el cuerpo
Origen Enlace
Jorgesys
  • 111.1k
  • 14
  • 55
  • 134

Gracicar Graficar un Flot Chart de lineas con series multiples obteniendo datos de la base de datos

Estoy tratando de crear un gráfico Flot de jQuery con series multiplesmú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

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 CodigoCódigo por lo que se necesita obtener por medio del query el total de entradas para cada diadía agrupados por codigocódigo. AsiAsí al fainalfinal 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 graficarrlograficarlo 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 diadía.

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

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

    <script type="text/javascript">

$(document).ready(function () {


$(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>

});

Gracicar un Flot Chart de lineas con series multiples obteniendo datos de la base de datos

Estoy tratando de crear un gráfico Flot de jQuery con series multiples 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 Codigo por lo que se necesita obtener por medio del query el total de entradas para cada dia agrupados por codigo. Asi al fainal 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 graficarrlo 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 dia.

La pregunta seria, como estraer de la base de datos esa informacion usando mysql y php para luego agregarlo a las variables del javascript del Flot chart de manera dinamica???

Este es el codigo 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;
    }
});

});

Graficar un Flot Chart de lineas con series multiples obteniendo datos de la base de datos

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>
Origen Enlace

Gracicar un Flot Chart de lineas con series multiples obteniendo datos de la base de datos

Estoy tratando de crear un gráfico Flot de jQuery con series multiples 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 Codigo por lo que se necesita obtener por medio del query el total de entradas para cada dia agrupados por codigo. Asi al fainal 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 graficarrlo 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 dia.

La pregunta seria, como estraer de la base de datos esa informacion usando mysql y php para luego agregarlo a las variables del javascript del Flot chart de manera dinamica???

Este es el codigo 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;
    }
});

});

Muchas gracias por la ayuda!!