Graph a Flot Chart of lines with multiple series obtaining data from the database

I am trying to create a jQuery Flot chart with multiple strings extracting the data from the database with a query.

This is the table I have in the database:

  

Code | Date / Time

     

A | 9-10-2016 09:25

     

B | 10-11-2016 10:11

     

C | 11-10-2016 14:23

     

A | 10-10-2016 10:10

     

B | 11-10-2016 11:00

As you can see there are several entries for each Code so you need to obtain by means of the query the total of entries for each day grouped by code. So at the end you will get: A = 2 for the 9-10-2016, B = 2 for the 10-11-2016 and C = 1 for the 1-10-2016 and graph it later.

I have no problems creating the Flo Chart for a series, but I need to add the additional series loas, which can be several for each day, by means of php code.

The question would be, how to extract from the database that information using mysql and php and then add it to the variables of the javascript of the Flot chart dynamically ???

This is the code I have for the Flot Chart, which works well for 1 series.

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

Thank you very much for the help!