Dynamically create charts / front end elements with Ui-Builder based on size of array?

General
13

Filling the data to the bar chart is not difficult. Did this many times. Probably the best approach is I prepare it properly when the data is queried from MongoDB so that the final series object (or one of its lower property keys is ready to pass along its value (containing timestamps and values).

Usually I work with ultra small examples and try to get them to work first before I work with my data :slight_smile:

Just figured out why that Vue.component('chart-item', ...) does not render as shown in my above post.
When I change the working 'todo-item' component to simply display the element like this:

Vue.component('todo-item', {
    props: ['todo'],
    /* template: '<li>{{ todo.text }}</li>' */
    template:   '<b-row><b-card title="{{todo.text}}" col class="w-100" header="" border-variant="default" header-bg-variant="default" header-text-variant="white" align="center">{{todo.text}}</b-card></b-row>'
  })

the frontend will render the groceryList as follows:

image
image1093Ă—308 8.51 KB

So it now becomes clear that it is not possible to assign the text (be it veggies or my series/options 'labels') to that title via title ="{{todo.text}}"

The same assumption will probably be true for setting the options and series property of the apex-chart element:
<apexchart height="500" :options="{{todo.text}}" :series="{{todo.text}}"></apexchart>

So this is where my problem resides :slight_smile: Will have to learn more from bootstrap-Vue it seems.

Have a nice evening, mate

Cheers,
Marcel