flot doesn't draw bars chart

Question

I tried with my other two scripts(line chart and pie chart) but the flot doesn't draw the bars chart... can you help me with this...I think the error is in the javascript..

The library:

<script src="js/jquery.flot.min.js"></script>
<script src="js/jquery.flot.pie.min.js"></script>
<script src="js/jquery.flot.stack.js"></script>
<script src="js/jquery.flot.resize.min.js"></script>

Here is the printdata db call:

[["junio",390],["julio",125],["agosto",50]]

Here is the script in graficayear.php:

<?php
include 'includes/configs.php';
$sql = $conn->prepare("SELECT DATE_FORMAT(start, '%M') AS mdate, SUM(honorario) AS total_mes 
FROM CITAS WHERE YEAR(current_date) GROUP BY mdate DESC");
    $sql->execute();
    while($row = $sql->fetch(PDO::FETCH_ASSOC)) {

    $datayear[] = array($row['mdate'],(int) $row['total_mes']);
}  
?>

Here is the code in chartyear.php:

<?php include 'graficayear.php'; ?>
<script type='text/javascript' charset='utf-8'> 
$(function () {
$.plot(
    $("#baryear"),
    [{
        data : <?php echo json_encode($datayear);?>,
        color: '#012D4C',
        bars: { show: true, fillColor: '#4682b4', barWidth: (15*24*60*60*1000), align: 'center' }
    }],
    {
        grid: { color: '#012D4C' },
        xaxis: {
            mode: 'time',
            tickDecimals: 0,
            tickSize: [1,'month'],
            autoscaleMargin: 0.001
        }
    }
);
});
</script>

And the DIV with the ID:

<?php include 'chartyear.php'; ?>
<div id="baryear" style="width: 320px; height: 300px;"></div>

here is how my chart look like until now:

enter image description here

And this is the data I need to show inside of the bars chart:

enter image description here

score 3 · Accepted Answer · answered Dec 05 '13 at 20:32

You need to read the documentation on the expected data formats more carefully. Here you've specified an xAxis of type time but then have given it categories. You have to pick one way or the other.

So, given the format of you json data, here the shortest path to do what you want:

// given your data
var datayear = [["junio",390],["julio",125],["agosto",50]];

// split it into a data array and a ticks array
var data = [], ticks = [];  
for (var i = 0; i < datayear.length; i++) {
    data.push([i,datayear[i][1]]); // note that the x value is numeric
    ticks.push([i,datayear[i][0]]); // and that the x value is matched to a "category"
}

$.plot(
    $("#baryear"),
        [{
           data : data,
           color: '#012D4C',
           bars: { show: true, fillColor: '#4682b4', align: 'center' }
        }],
     {
         grid: { color: '#012D4C' },
         xaxis: {
             ticks: ticks
         }
     });

Fiddle here.

Produces:

enter image description here

you my friend are great! you save me two times! thank you for your support!. One last question when in a single page are two bars chart and one of them is a dairy sales and this chart is null(per example first month or first day and don't have sales) how can show the year bars chart with a sales per months? and if it can show the total of sales in the top of every bar? Best Regards! — asterix_jv, Dec 05 '13 at 21:07
@asterix_jv, I'm not sure I understand the first question. For the second see here: http://stackoverflow.com/questions/4892160/show-value-within-bar-on-flot-bar-chart and another one here: http://stackoverflow.com/questions/18523714/flot-how-to-style-numbers-within-bar-charts/18539119#18539119 — Mark, Dec 06 '13 at 02:07

flot doesn't draw bars chart

1 Answers1