Chartjs-Chart.js showing only last data value

by

2👍

hey you can use following code for generate proper line chart

your need to replace is data:[] to this data:

                <!doctype html>
                <html>
                    <head>
                        <title>Chart.js | Documentation</title>
                        <!-- <link rel="stylesheet" type="text/css" href="/assets/docs.css"> -->
                        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimal-ui">

                                <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

                        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>

                    </head>

                        <body>
                  <canvas id="myChart" width="800" height="250"></canvas>
                </body>


                <?php
                 $IncomeArray=array(246, 245, 243, 241, 239, 238, 236, 234, 232, 231, 229, 227, 225, 224, 222, 220, 218, 216, 215, 213, 211, 209, 208, 206, 204, 202);
                ?>

                <script type="text/javascript">
                var ctx = document.getElementById("myChart").getContext("2d");

                var data = {
                        labels: ["2016", "2017", "2018", "2019", "2020", "2021", "2022","2023", "2024", "2025", "2026", "2027", "2028", "2029","2030", "2031", "2032", "2033", "2034", "2035", "2036","2037", "2038", "2039", "2040", "2041"],

                    datasets: [
                        {
                            label: "My First dataset",
                            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 echo json_encode($IncomeArray);?>
                        }
                           ]
                };
                var myLineChart = new Chart(ctx).Line(data);
                </script>


                </html>

1👍

json_decode puts an additional [ and ] on the ends of the encoded array. Remove them from the echo:

datasets: [
    {
        label: "My First dataset",
        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 echo json_encode($IncomeArray);?>
    }

0👍

jquery not have type conversion so we have to pass it as a value like this.

<?php  $tot = count($IncomeArray);  ?>


data:  [<?php for($j=0;$j<=$tot;$j++){ if($j<$tot) { echo "".$IncomeArray[$j].","; } else { echo "".$IncomeArray[$j].""; } } ?>]

Leave a comment