Bugs may occur when using the Google Chart API with varying data arrays despite using the same options

Trying to create a line chart using the Google Chart API, I encountered an issue. Everything seems to work fine when I use arrayToDataTable and the chart looks good.

Check out the first example here

However, when I populate a data object with the necessary data, it appears as if it's being cut off from the right side.

See the second example here for comparison

The options in both examples are set the same way:


        var options = {
            height: 245,
            width: '100%',
            chartArea: {top: 15, left: 30, width: '100%', height: 190},
            areaOpacity: 0.1,
            tooltip: {trigger: 'both'},
            legend: 'none',
            pointSize: 5,
            hAxis: {
                format: 'MM-dd',
                gridlines: {
                    color: '#fff',
                    count: 365 /* \_(ツ)_/ */
                },
                textStyle: {
                    fontSize: 11
                }
            },
            vAxis: {
                gridlines: {
                    color: '#dedede',
                    count: 5
                },
                viewWindow: {
                    min: 0
                },
                textStyle: {
                    fontSize: 11
                },
                baselineColor: 'dedede'
            }
        };

Note: The width is set to 100% as the page is dynamic and used on mobile devices.

UPDATE: The display issue persists even after updating.

Click here for the latest update

FINAL UPDATE: The problem was related to the Date type in the Google Chart API and the 100% width implementation.

javascriptgoogle-api

Answer №1

Resolved using the following code snippet:

    chartWrapWidth = document.getElementById('chart_div').offsetWidth;
    options.chartArea.width = chartWrapWidth - 45;

Check out the solution on JSFiddle

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

search for a specific value within a nested subfield of an asterisk star field in Firestore

Here is the data I have: { root: { _rEG: { fen: 'value' }, _AS: { fen: 'value' }, _BSSA: { fen: 'value' } } } I would like to query using where('root.*.fen', '==', 'value'). ...

javascripttypescriptfirebasegoogle-cloud-firestore

Guide on accessing and displaying data table values in console.log using Vue.js and vuetify

Hello, I am new to Vue.js and I am trying to work with data tables. I have copied some code from the Vuetify website and I am attempting to call the desserts' names from a sample table using console.log. Below is the code snippet: <template> ...

javascriptvue.jsvuetify.js

How to dynamically load a component within a class-based Vue component

I am facing an issue with loading two components dynamically using an object map. Info (options-based) SearchBar (class-based) While it works for the options-based component, I encounter an error stating _currentTab is undefined when trying to load a si ...

javascripttypescriptvue.js

Changes to the model cannot be realized unless $scope.$apply is used

Are there alternative methods to achieve the desired model change without utilizing $scope injection in an Angular "controller as" approach within the given setup? The HTML: <div data-ng-controller="Buildings as vm"> <select data-ng-model="vm. ...

javascriptangularjs

Leveraging numerous identifiers in jQuery

I created a small jQuery script to check if the input box value is greater than 5, but I have two tags with IDs and only one of them seems to be working. <div id="register"> <form id="register"> <input id="first" type="text" /> <a ...

javascriptjquery

I have successfully converted an SQL Join query into JSON, but now I am unsure of how to interact with the

I recently ran an SQL Join on two tables and obtained the following results: _____People_____ name: "Jane" age: 35 job_id: 1 _____Professions_____ job_id: 1 title: "Teacher" "SELECT * FROM People INNER JOIN Professions ON People.job_id = Professions.job ...

javascriptc#sqljsonjoin

Mobile website scroll assistant

Seeking a solution to aid mobile users in scrolling through a lengthy article page. Typically in mobile apps, an alphabetical index assists users in navigating long lists. How can I incorporate a similar feature into a webapp? For context, my tech stack i ...

javascriptangularjscordovaweb-applicationsscroll

Node.js and Express: accessing req.body yields undefined value

In the midst of creating a basic browser application using Express, I encountered an issue when attempting to retrieve the value selected by a user from a dropdown menu. I assigned individual values to each option and set the form method to /post. However, ...

javascriptnode.jsexpress

Steps to transfer the content of a label when the onclick event occurs

Seeking advice on how to send the dynamically varying value of a label upon clicking an anchor tag. Can anyone recommend the best approach to passing the label value to a JavaScript function when the anchor is clicked? Here is a sample code snippet: < ...

javascriptjqueryhtmlajax

Using enzyme mock function prior to componentDidMount

When it comes to mocking a function of a component using Jest, Enzyme, and React, the process typically involves creating a shallow wrapper of the component and then overloading the function as needed. However, there seems to be an issue where the componen ...

javascriptreactjsjestjsjsxenzyme

What is the best way to extract specific data from a JSON file based on a chosen property using AngularJS and the $http.get method?

I am working with a JSON file that contains color information like this: { "colorsArray":[{ "colorName":"red", "hexValue":"#f00" }, { "colorName":"green", "hexValue":"#0f0" }, { "colorName":"blue", "hexValue":"#00f" }, ...

javascriptangularjsjson

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

`Unable to retrieve Shopify products using shopify-api-node`

I'm encountering a 403 error while trying to retrieve products from my custom Shopify app using the shopify-api-node module. Below is the code snippet I've put together based on a helpful discussion on Stackoverflow: const express = require(& ...

javascriptnode.jsnpm

Can the site be shown in the background?

I have a unique idea for a games website that I want to share. It's a bit difficult to explain, so please bear with me as I try to convey my vision! The inspiration for this project comes from a website called . Have you seen it before? The concept i ...

javascriptjqueryhtmlcss

Setting a default value in Vue props if it doesn't pass validation: A guide

Is it possible to assign a default value to a prop using a validator? For instance, if the current prop does not pass the validator and is less than 3, I would like to automatically set the value to 1. Here's an example: currentStep: { type ...

javascriptvue.jsvuejs2vue-props

Dynamic Sizing of Elements + Adaptive Text Overlay

There were 2 obstacles I encountered when trying to create an image-based drop-down menu : No matter how much effort I put in, I couldn't figure out how to make a flexed element inside a container maintain the same height as the adjacent element. [ ...

javascripthtmlcssimagelayout

Changing the input programmatically does not trigger an update in the Angular model

I am currently facing a challenge where I have a text input that is connected to a model value in my application. However, I am struggling to programmatically change the input value and ensure that this change reflects in the model. My understanding is th ...

javascriptangularjs

Reveal content as you scroll

I'm having trouble with the code snippet below. My goal is to utilize .cbp-fbscroller in my CSS to show a new side navigation menu on my HTML page only when scrolling down to 900px. However, as someone who is new to JavaScript, I am struggling to make ...

javascriptjqueryhtmlcss

Insert a new element at the current scroll position without disrupting the existing scroll or view

My goal is to replicate the functionality of the Twitter Mac client. I have a scrollable box with a fixed height and multiple blocks inside. I want to add a new block before all the others, but keep it invisible to the user so they have to scroll to the to ...

javascriptjqueryscrolltwitter-client

AngularJS: Double the power of Ajax. Can you assist me?

ajax was successful twice. Take a look. https://i.sstatic.net/QLdpT.png https://i.sstatic.net/zAbXW.png ...

javascriptangularjs