PHP Versions Question posted in
You can find a list of all versions here.

issue upgrading from chart.js 1 to 3.5 – PHP Versions

I am going through all of our PHP (V7.3) pages and upgrading all charts to the latest version.

On some pages where the chart data is part of a sub page or created from an AJAX call I get this error all the time

Uncaught TypeError: Cannot read property 'axis' of undefined
    at vo.parse (chart3.min.js:13)
    at vo._insertElements (chart3.min.js:13)
    at vo._resyncElements (chart3.min.js:13)
    at vo.buildOrUpdateElements (chart3.min.js:13)
    at oo.update (chart3.min.js:13)
    at new oo (chart3.min.js:13)
    at eval (eval at <anonymous> (jquery.min.js:2), <anonymous>:18:19)
    at eval (<anonymous>)
    at jquery.min.js:2
    at Function.globalEval (jquery.min.js:2)

My code has changed from:

<canvas id='chart_canvas' width='620' height='300'></canvas>
<script>
    var data = <?php echo json_encode($data); ?>;
    var ctx = document.getElementById("chart_canvas").getContext("2d");
    var myNewChart = new Chart(ctx).Line(data, {
         pointHitDetectionRadius: 5
     });
</script>

to this:

<canvas id='chart_canvas' width='620' height='300'></canvas>
<script>
    var data = <?php echo json_encode($data); ?>;
    const config = {
        type: 'line',
        data,
        options: {
            responsive: true,
        }
    };
    var myChart = new Chart(
        document.getElementById('chart_canvas'),
        config
    );
</script>

The data varialble is:

var data = {"labels":["2021-07-17","2021-07-18","2021-07-19","2021-07-20","2021-07-21","2021-07-22","2021-07-23","2021-07-24","2021-07-25","2021-07-26","2021-07-27","2021-07-28","2021-07-29","2021-07-30","2021-07-31","2021-08-01","2021-08-02","2021-08-03","2021-08-04","2021-08-05","2021-08-06","2021-08-07","2021-08-08","2021-08-09","2021-08-10","2021-08-11","2021-08-12","2021-08-13","2021-08-14","2021-08-15","2021-08-16","2021-08-17"],"datasets":[{"label":"Jobs Created","fillColor":"rgba(26, 188, 156,0.2)","strokeColor":"rgba(26, 188, 156,1)","pointColor":"rgba(26, 188, 156,1)","pointStrokeColor":"#fff","pointHighlightFill":"#fff","pointHighlightStroke":"rgba(26, 188, 156,1)","data":{"2021-08-17":"2"}}]};

I know the code is ok because I have tried it in https://playcode.io/

I just cannot understand the error message and there is nothing i have found on Google, appreciate any pointers.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    found the culprit - prototype-1.7.js

    removed it and all works perfectly


  2. 0

    In your data you only have 1 item. This will be very hard to see on the chart because there will be no line to draw between items.

    Adding to that, the data in your datasets should be formatted like this.

    It looks like you are trying to combine Primitive and Object styles when you should be using either one. Because you are already giving labels, you only need to give the data like this: [10, 20, 30]

    you can also give the data like you currently are giving. You just don’t need the labels.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search