The bars do not start the requested coordinate point (x)

0

I am new with chart.js and I have data that should start in month 06 or 03 of the x-axis (it is variable depending on the data in the database) as I do so that the data starts at that point and not in 01 ... step the code is in PHP with queries to the mysql database

<script type="text/javascript">
  var data = {
    labels: [
    <?php 

    $sql = "SELECT DATE_FORMAT(Fecha_Carga,'%m') as Fechas FROM tablaunion1 where YEAR(Fecha_Carga) = '$año' Group by MONTH(Fecha_Carga)";
    $result =  mysqli_query($conn, $sql);
    while ($registros = mysqli_fetch_array($result))
    {
    ?>
        '<?php echo $registros["Fechas"] ?>',
    <?php
    }

    ?>

    ],
    datasets: [
        {
            label: "Litros consumidos",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: 
            <?php 
            $sql= "SELECT  ROUND(SUM(Cantidad_Litros),2) as Litros from tablaunion1 where YEAR(Fecha_Carga) = '$año' and Patente = '$patente' Group by MONTH(Fecha_Carga)";
            $result = mysqli_query($conn, $sql);
            ?>
            [<?php while ($registros= mysqli_fetch_array($result)){ ?><?php echo $registros["Litros"] ?>,<?php }?>]

        },
        {
            label: "Kilometros recorridos",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: 
            <?php 
            $sql= "SELECT ROUND(SUM(Kmrecorridos),2) as Km  FROM usitrack where YEAR(Fecha) = '$año' and Patente = '$patente' Group by MONTH(Fecha)";
            $result = mysqli_query($conn, $sql);
            ?>
            [<?php while ($registros= mysqli_fetch_array($result)){ ?><?php echo $registros["Km"] ?>,<?php }?>]

        },
        {
        }
    ]
  };
  var pdata = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
  ]

  var ctxl = $("#lineChartDemo").get(0).getContext("2d");
  var lineChart = new Chart(ctxl).Line(data);

  var ctxb = $("#barChartDemo").get(0).getContext("2d");
  var barChart = new Chart(ctxb).Bar(data);
    
asked by Julio 30.06.2018 в 17:21
source

1 answer

0

I have not tried it, but theoretically for linear scales you can change the minimum value so that it is not 0 with scale service I hope it serves you.

barChart.scaleService.updateScaleDefaults('linear', {
  ticks: { min: 2 }
});
    
answered by 30.06.2018 в 17:38