The Google Charts software is unable to accept JavaScript variables

I'm currently in the process of integrating a Google line chart and attempting to incorporate variable values. However, I've encountered an issue where replacing numeric values with JS variables results in them evaluating to 0.

Here's my JavaScript code:

 import { GChart } from 'vue-google-charts'


   export default {
    name: 'linegraph',
    props: ['dates', 'stats'],
    data() {
      return {

            test: 5, 
            items: {

            },
          chartData: [
            ['Date', 'Items Sold'],
            [this.dates.monday, 1],
            [this.dates.tuesday, 50],
            [this.dates.wednesday, 3],
            [this.dates.thursday, 2],
            [this.dates.friday, 6],
            [this.dates.saturday, 8],
            [this.dates.sunday, parseInt(this.test)]
          ],
          chartOptions: {
                width: 600,
                height: 400,
                curveType: 'function',
                legend: { position: 'bottom' },
                animation: {
                  duration: 1000,
                  easing: 'inAndOut',
                  startup: true
                },
                colors: ['#74D698'],
            }
        } 
    },

I've experimented with various methods like leaving the variable as is, wrapping it in parseFloat, parseInt, number(), etc. Unfortunately, none of these solutions are working, nor are they generating any errors. I would greatly appreciate any assistance or suggestions. Thank you! :)

Answer №1

Solution found! If you're working within a Vue component, ensure that your variables are declared outside of the export function in their individual var statements.

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

What is the process for importing a JSON file into the current Vue default configuration?

There is an incorrect answer that mentions tsconfig.json, which is no longer relevant in Vue projects. How can a JSON file be imported with VueJS / Typescript? I am assuming the configuration option { "compilerOptions": { "resolveJso ...

Tips for testing nested HTTP calls in unit tests

I am currently in the process of unit testing a function that looks like this: async fetchGreatHouseByName(name: string) { const [house] = await this.httpGetHouseByName(name); const currentLord = house.currentLord ? house.currentLord : '957'; ...

Leveraging the push method within AngularJS

Hello, I am currently working on setting up an eCommerce shop using Angular. Below is the code snippet I am using: var shopApp = angular.module('shopApp', ["slugifier"], function() {}); controllers.productController = function($scope,FetchFa ...

The trajectory in three.js is not always accurate

As I work on creating a shooter in three.js, I've encountered an issue. When I change my aim left and right, the bullet fires in the correct direction. However, when I adjust my aim up and down, the bullet moves in those respective directions but does ...

The jade code is causing an error to be displayed

The following Jade code seems to be malfunctioning. head script(src='http://d3js.org/d3.v3.min.js') script(src='http://dimplejs.org/dist/dimple.v2.1.0.min.js') body script(type='text/javascript') var svg ...

Debug mode in React Native using hooks may encounter discrepancies in data stored in AsyncStorage

I am working on a project where I have two separate screens connected with a simple react native stack router. The second screen contains choice blocks that set state using useState and AsyncStorage. Every time the screen is entered, it reads the state of ...

How can I display an array of data with a changing name using a FlatList in React Native?

How can I render a list of array data with a dynamic name in a FlatList using React Native? Below is the list of data that I would like to display in the FlatList: const movies = [ { '4W2JJ0CLbvfLJzBUHORVaz6sAGv2': [ { name: ...

Protractor initiates the Firefox browser, yet fails to execute any test scripts

Every time I attempt to run protractor in Firefox, the browser launches and displays a blank tab, without executing any specs. Eventually, an error message appears: WebDriverError: Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox c ...

Combining and consolidating JSON attributes

I am working with a JSON object that has multiple instances of the email property, like so: accounts": [ { "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="61120e0c04030e051821050e0c">[email protected]</a& ...

Sorting numeric ID columns in a Bootstrap table

I've implemented the Boostrap table to display data from my database on my admin page. I saved an array into a json file, and then used the following code to populate the table: <div class=\"row\"> <div class=&bsol ...

Initialize data only when the Nuxt.js application is first loaded

Exploring the world of nuxt.js, I find myself pondering on the most efficient way to fetch data using REST api. Within my store folder, the structure is as follows: store -posts.js -categories.js -index.js Initially, I attempted to set the da ...

Is it possible to retrieve a physical address using PHP or Javascript?

Is it possible to retrieve the physical address (Mac Address) using php or javascript? I need to be able to distinguish each system on my website as either being on the same network or different. Thank you ...

What are the steps to accessing validation errors using express-validator?

Recently, I delved into the world of express-validator to enhance my skills. Despite going through the documentation thoroughly, there's a query lingering in my mind that might have already been addressed in the docs. My confusion arises from needing ...

ng filtering with a controller-defined scope

I am currently working on a webpage with AngularJS and I am looking to implement some filters on the site. Here is the HTML code I have: <div ng-repeat="data in datas | filter:{area:course} | filter:{subject:subFilter} | filter:{city:cityFilter}"> ...

Activate the saturation toggle when a key is pressed in JavaScript

I am trying to modify a script that currently toggles the value of a variable when a key is pressed and then lifted. Instead of changing the variable value, I would like to adjust the saturation of the screen based on key presses and releases. How can I ac ...

What is the reason behind the C# button_clicked function not triggering the Javascript function?

When the user clicks the button, I want to test the C# code side. The method in the C# function should call a JavaScript function to display an alert with the results of a C# public variable. However, it seems that nothing is being called at all. At the bo ...

Exploring the implementation of useMediaQuery within a class component

Utilizing functions as components allows you to harness the power of the useMediaQuery hook from material-ui. However, there seems to be a lack of clear guidance on how to incorporate this hook within a class-based component. After conducting some researc ...

Understanding the fundamentals of event handling in JavaScript

Is there a way to access the object that called the event handler within the event handler function itself? For example: marker.on('dragend', onDragEnd); In this case, marker is the object that triggers the ondragEnd function on the Dragend eve ...

OpenLayers: Issue with OSM visibility within div

I am facing an issue with loading the map content from OpenStreetMaps into a div within my hybrid mobile app. Here is the code snippet I am using: -JS: .controller('myCtrl', function($scope, $state, $ionicPopup, $cordovaGeolocation, Util) ...

Showing arbitrary text on Vue.js template

In my Vue.js application, I have a Loader component that randomly displays one of several messages. Here is how I implemented it: Vue.component('Loader', { data() { const textEntries = [ 'Just a moment', ...