Vuejs: Data visualisation platfrom from Django API

Question

I am new to the frontend and trying to design a data visualisation platform consuming the RestAPI from Django. Currently, I am having a nested array of JSON data.

The JSON data is in the form.

[   
    {
            "location": "Loc 3",
            "session": [
                {
                    "start": "2021-01-01",
                    "count": 500,
                    "details": [
                        {
                            "id": 15,
                            "length_max": 19,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                }
            ]
        },
        {
            "location": "Loc 4",
            "session": [
                {
                    "start": "2021-01-02",
                    "count": 800,
                    "details": [
                        {
                            "id": 16,
                            "length_max": 24,
                            "length_min": 18,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                },
                {
                    "start": "2021-01-02",
                    "count": 800,
                    "details": [
                        {
                            "id": 10,
                            "length_max": 29,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        },
                        {
                            "id": 22,
                            "length_max": 29,
                            "length_min": 16,
                            "length_avg": 16,
                            "length_std": 19,
                            "is_active": false,
                            "type": "dog"
                        }
                    ]
                }
            ]
        },
    }
]

Please let me know how can this be displayed in the table, and graphically, simultaneously if there are any changes made to the table, the graph should change dynamically. Can we have column-based tables, and based on the active columns, the number of graphs should also vary. I have used the Axios to consume the API in the created hook and used 3 v-for loops in the template to read data. Is there is any other best practice to flatten the JSON data and display it in the vue table?

My current template is

          <tbody v-for="(posts, index) in APIData" :key="index">
            <template v-for="(sess) in posts.session">
            <tr  v-for="(det,index) in sess.details" :key="index">
              <td>{{det.id}}</td>
              <td>{{sess.start}}</td>
              <td>{{posts.location}}</td>
              <td>{{sess.counts}}</td>
            </tr>
            </template>
          </tbody>

What would be the best way to feed the table and graph, so both are dynamically changed when either one is changed.

Answer 1

The best way to consume the drf API and visualize them is to use charstJs.
You can easily get it done in no time if you went through the chart js documentation briefly.

It gives dynamic/reactive with loads of examples.