Utilizing vue-chartjs to display a pair of data figures side by side

In my vue application, I utilize vue-chartjs to showcase some data and I incorporate semantic-ui for the layout.

My goal is to display two figures side by side on the screen, but unfortunately, I am facing difficulties achieving this.

I have attempted using templates as I did in other components, however, it seems that it does not work with vue-chartjs. I also tried utilizing the two fields functionality from semantic ui without any success.

Below are snippets of the code:

<template>
  <div class="DisplayResults">
    <div class="ui relaxed divided padded full grid">
      <div class="column">
        <div class="ui tiny form">
          <div class="two fields">
      <div class="field eight wide">
        <Chart class="Chart" v-model="resultsData" v-if="hasResults" />
      </div>
      <div class="field eight wide">
        <ChartN class="Chart" v-model="resultsData" v-if="hasResults"/>
      </div>
    </div>
  </div>
</template>

import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

export default {
  name: 'DisplayResults',
  CaseDataState,
  components: {
    Chart,
    ChartN
  },
  data: function () {
    return { computing: false }
  },
  computed: {
    hasResults () {
      return (this.resultsData.time) && !(this.computing)
    },
    resultsData () {
      return CaseDataState.getters.resultsData
    }
  }
}
</script>

Is there anyone who can assist me in accomplishing this task?

javascriptvue.jsvuejs2semantic-uivue-chartjs

Answer №1

I managed to resolve the issue I was facing. It turns out that the problem stemmed from my utilization of semantic ui. Here is the solution that ultimately worked for me:

<template>
  <div class="DisplayResults">
    <h1 class="ui header" v-if="hasResults">Results</h1>
    <div class="ui center aligned grid" v-if="hasResults">
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <Chart v-model="resultsData"/>
        </div>
      </div>
      <div class="six wide column">
        <div class="ui fluid spaced image">
          <ChartN v-model="resultsData"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Chart from '@/components/Chart.vue'
import ChartN from '@/components/ChartN.vue'
import CaseDataState from '@/components/CaseDataState.vue'

export default {
  name: 'DisplayResults',
  components: {
    Chart,
    ChartN,  
    CaseDataState
  },
  computed: {
    hasResults () {
      return (this.resultsData.time) && !(this.running)
    },
    resultsData () {
      return CaseDataState.getters.resultsData
    }
  }
}
</script>

Appreciate your help,

Clemens

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the process of variable allocation?

I have a query regarding the following JavaScript code snippet. It might be a basic question, but I'm seeking clarification. // 'response' contains JSON data received from the backend: ....then(response => { this.myVar = response.data; ...

javascriptvue.js

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

Using the setTimeout function with asynchronous tasks

I have a situation where I need to introduce a 5000ms delay before firing an asynchronous function. To accomplish this, I attempted to utilize the setTimeout() method. This async function is called within a loop that runs multiple times, and each time it i ...

javascriptjquery

perform the .then() function within a returned promise

Here is my code snippet: function scammer(message) { return new Promise((resolve,reject)=>{ if(condition){ if (condition) { bot.KickMember(params).then((message)=>{ console.log("kicked"); ...

javascriptnode.jstelegramtelegram-bot

What if the v-on:click event is applied to the wrong element?

I'm attempting to manipulate the anchor tag with jQuery by changing its color when clicked, but I'm struggling to correctly target it. <a v-on:click="action($event)"> <span>entry 1</span> <span>entry 2</span> ...

javascriptvue.js

Steps to retrieve the final page number from ngx-pagination with Angular

Is there a way to utilize Custom templates within ngx-pagination in order to ensure that the first and last buttons function properly when clicked? Currently, I have utilized pagination-template to accomplish this... How can I dynamically determine the la ...

javascripthtmlangulartypescriptngx-pagination

From organizing nested arrays in jSon to visualizing data with D3js

I am completely new to working with d3 and JSON. I have a piece of data from JSON that I am attempting to extract, and I'm wondering if I am headed in the right direction. My goal is to display a rectangle graph for each server within different statu ...

javascriptjsond3.js

"Error: Command 'npm' is not recognized as a valid internal or external command" encountered while using create-react-app

Why won't npm work for me? I've been trying to dive into the world of React and kickstart my learning journey. With Node installed, along with the create-react-app package, I thought I was all set. When I run commands like npm -v or create-reac ...

javascriptnode.jsreactjsnpm

Running an Express middleware function

While watching a tutorial on the Express framework, I came across some interesting code used by the instructor for handling requests. Here is how the route is set up: router.route('/').post(authController.restrictTo('admin', 'l ...

javascriptnode.jsexpresscallbackweb-development-server

What is the most effective approach to seamlessly conceal and reveal a button with the assistance

I have two buttons, one for play and one for pause. <td> <?php if($service['ue_status'] == "RUNNING"){ $hideMe = 'd-none'; } ?> <a href="#" class="btn btn-warning ...

javascriptjqueryhtmlcsslaravel-blade

What is the process for retrieving the date and time a location was added to Google Maps?

My goal is to extract the date and time a location pin was added in Google Maps. For example, if I search for McDonald's in a specific area, I want to retrieve the dates and times of all McDonald's locations in that area. Is there a method to acc ...

javascriptpythongoogle-mapsgoogle-maps-api-3

Is the reference to a variable within an array maintained by JavaScript?

I'm working with react code and using the find() method to select an item from an array. When I retrieve an item from the array, is JavaScript copying the item or returning a reference? EDIT: The items in my array are objects, such as [{id: 12, name ...

javascriptreactjsecmascript-6

Using Vue to pass the v-for index from a parent component to a child component

Despite conducting thorough research, I am unable to find a satisfactory answer. Below is the code for my parent and child components. How can I pass the index from the v-for loop in the parent component to the child component so that it can be utilized th ...

vue.jsvue-componentvuejs3

How can custom JavaScript objects have tags set upon click?

When it comes to JavaScript object referring, things can get a bit confusing. Imagine having a tag like this: <button id='myButton'>Hello</button> Now, let's say you create a custom class in JavaScript: function myClass(){ ...

javascripthtmlfunctionjavascript-objects

A guide to querying JSON data in a backend database with JavaScript

My backend JSON DB is hosted on http://localhost:3000/user and contains the following data: db.json { "user": [ { "id": 1, "name": "Stephen", "profile": "[Unsplash URL Placehol ...

javascriptjsonnpmjsondb

Tips for displaying a notification after a successful form submission using jQuery and AJAX

While attempting to submit a PHP form using jquery $.ajax();, I have encountered a peculiar issue. The form is successfully submitted, however, when I try to display an alert message - alert(SUCCESS); on success, it does not work as expected. Any ideas on ...

javascriptphpjqueryajax

Issue with Z-index and wmode when using YouTube embed code on IE10

I am currently working on developing a div element that will prevent a YouTube video embedded in an iframe from playing when clicked. Instead, I want to trigger a JavaScript function upon user interaction. I have added the wmode=opaque parameter to the src ...

javascripthtmlcssyoutubewmode

Using ngFor results in duplicate instances of ng-template

I'm facing a challenge with the ngFor directive and I'm struggling to find a solution: <ng-container *ngIf="user.images.length > 0"> <div *ngFor="let image of images"> <img *ngIf="i ...

javascriptangulartypescript

Loading data table rows dynamically using Vuetify

I have a Vuetify datatable structured like this <v-data-table :items="items" :headers="headers" :search="search"> <template slot="items" slot-scope="props"> <td>{{props.item.id}}</td> <td& ...

vue.jsvuejs2vuetify.js

Incorporating PHP variable within Vue.js template literals

I'm currently utilizing Laravel in combination with Vue.js. I am attempting to use a PHP variable in a Vue.js component template within a blade template. To achieve this, I have experimented with the following code snippet. Vue.component('add-edi ...

vue.jsvue-componentlaravel-5.7