简体   繁体   中英

How to add another dataset bar with chart.js

The following script works fine, but it is only 1 Bar per label. I need to have 2 bars per label. I have tried many variations, with and with out comma's and "{}" Any help would be much appreciated. Thanks

    <script>
    // Bar Chart Example
    var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>", 
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
    "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
    datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",

    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ],

    }],
    },
    options: {
    scales: {
    xAxes: [{
    time: {
    unit: 'Barista ID'
    },
    gridLines: {
    display: false
    },
    ticks: {
    maxTicksLimit: 36
    }
    }],
    yAxes: [{
    ticks: {
    min: 0,
    max: 50,
    maxTicksLimit: 12
    },
    gridLines: {
    display: true
    }
    }],
    },
    legend: {
    display: false
    }
    }
    });
    </script>

Here is what I have so far, but when I make the following changes to the script neither bars appear. Remember the script above works the script below does not.

    <script>
    // Bar Chart Example
    var ctx = document.getElementById("myBarChart");
    var myLineChart = new Chart(ctx, {
    type: 'bar',
    data: {
    labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>", 
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
    "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
    datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",

    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ],

    data: [<?php echo $last_large_qty[1] ?>, <?php echo $last_large_qty[2] ?>, <?php echo $last_large_qty[3] ?>,
    <?php echo $last_large_qty[4] ?>, <?php echo $last_large_qty[5] ?>, <?php echo $last_large_qty[6] ?>,
    <?php echo $last_large_qty[7] ?>,<?php echo $last_large_qty[8] ?>,<?php echo $last_large_qty[9] ?>,
    <?php echo $last_large_qty[10] ?>, <?php echo $last_large_qty[11] ?>, <?php echo $last_large_qty[12] ?> ],

    }],
    },
    options: {
    scales: {
    xAxes: [{
    time: {
    unit: 'Barista ID'
    },
    gridLines: {
    display: false
    },
    ticks: {
    maxTicksLimit: 36
    }
    }],
    yAxes: [{
    ticks: {
    min: 0,
    max: 50,
    maxTicksLimit: 12
    },
    gridLines: {
    display: true
    }
    }],
    },
    legend: {
    display: false
    }
    }
    });
    </script>

I knew I was close, it was all a matter of proper positioning of " comma's, brackets, ect "

data: {
  labels: ["<?php echo $barista_pass_code[1] ?>", "<?php echo $barista_pass_code[2] ?>", "<?php echo $barista_pass_code[3] ?>",
    "<?php echo $barista_pass_code[4] ?>", "<?php echo $barista_pass_code[5] ?>", "<?php echo $barista_pass_code[6] ?>",
    "<?php echo $barista_pass_code[7] ?>", "<?php echo $barista_pass_code[8] ?>", "<?php echo $barista_pass_code[9] ?>",
      "<?php echo $barista_pass_code[10] ?>", "<?php echo $barista_pass_code[11] ?>", "<?php echo $barista_pass_code[12] ?>"],
  datasets: [{
    label: "Regular Punches",
    backgroundColor: "rgba(2,117,216,1)",
    borderColor: "rgba(2,117,216,1)",
    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ]},
    {
    data: [<?php echo $last_regular_qty[1] ?>, <?php echo $last_regular_qty[2] ?>, <?php echo $last_regular_qty[3] ?>,
    <?php echo $last_regular_qty[4] ?>, <?php echo $last_regular_qty[5] ?>, <?php echo $last_regular_qty[6] ?>,
    <?php echo $last_regular_qty[7] ?>,<?php echo $last_regular_qty[8] ?>,<?php echo $last_regular_qty[9] ?>,
    <?php echo $last_regular_qty[10] ?>, <?php echo $last_regular_qty[11] ?>, <?php echo $last_regular_qty[12] ?> ]

  }]
},

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM