Charts created using Google VisualizationORThe visual representations

My chart is currently not displaying at 100% width as I intended. I would like the chart to span from the beginning to the end of the container.

https://i.stack.imgur.com/Xjw6g.png

Here's my code snippet:

test.controller('testCtrl', ['$scope', function ($scope) {
console.log('test chart');
var data = google.visualization.arrayToDataTable([
    ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
    ['0 min', 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
    ['', 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
    ['45 min', 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
    ['', 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
    ['90 min', 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
]);
var options = {
    width: '100%',
    height: '100%',
    curveType: 'function',
    chartArea: {
        width: '90%',
        height: '80%'
    },
    legend: {
        position: 'top'
    }
};
var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
chart.draw(data, options);
}]);

Thank you in advance for any assistance!

javascriptangularjschartsgoogle-visualization

Answer №1

To expand the lines to reach the boundaries of the chart area,
you will have to utilize a continuous x-axis ('number', 'date', etc...),
instead of discrete ('string' values)

Check out the below demonstrated code snippet.
the data table's first column values are converted to simple numbers (0-4)

Afterwards, object notation is employed to set the labels,
using hAxis.ticks

google.charts.load('current', {
  callback: drawChart,
  packages:['corechart']
});

function drawChart() {
  var data = google.visualization.arrayToDataTable([
      ['Minute', 'A', 'B', 'C', 'D', 'E', 'F'],
      [0, 0.72, 0.64, 0.55, 0.47, 0.68, 0.39],
      [1, 0.62, 0.69, 0.65, 0.51, 0.66, 0.37],
      [2, 0.69, 0.51, 0.55, 0.43, 0.54, 0.44],
      [3, 0.79, 0.68, 0.70, 0.57, 0.59, 0.41],
      [4, 0.66, 0.71, 0.66, 0.58, 0.63, 0.48]
  ]);
  var options = {
      width: '100%',
      height: '100%',
      curveType: 'function',
      chartArea: {
          width: '90%',
          height: '80%'
      },
      legend: {
          position: 'top'
      },
      hAxis: {
          ticks: [
              {v: 0, f: '0 min'},
              {v: 1, f: ''},
              {v: 2, f: '45 min'},
              {v: 3, f: ''},
              {v: 4, f: '90 min'}
          ]
      }
  };
  var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
  chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

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

Using NodeJS with Jade to handle a dynamic number of blocks

As I dive into NodeJS development, a challenge has presented itself... In my project, there is a main template called layout.jade that sets up the top navigation bar using Bootstrap on every page. This specific application focuses on music, where each art ...

javascriptnode.jstwitter-bootstrapexpresspug

Steps to Incorporate jQuery Function in a Partial View Inside a Modal

My jquery button click method is functioning correctly in views outside of modals, but the uploadbtn button click method does not work when a partial view is loaded in the modals. <script src="~/lib/jquery/dist/jquery.min.js"></script> ...

javascriptjqueryasp.net-core.net-core

Error: Trying to use 'setTimeout' before it has been initialized is not allowed

I'm currently working on a JavaScript exercise in my code. I encountered an issue where I am trying to assign a reference to the setTimeout function to ogTimeout on the second line since I plan to redefine setTimeout later. However, when I run the co ...

javascript

What is the best way to obtain the attribute value when a user clicks on a child element?

Is there a way to retrieve the value of the data-custom attribute when the red square is clicked without having to add the same attribute to nested elements? This can become cumbersome if there are multiple levels of nesting. class Example extends React ...

javascriptreactjs

"Troubleshooting Error: When accessing a property in AngularJS,

My goal is to retrieve a date value. However, I encounter an error message saying 'Cannot read property 'NTLI' of undefined' whenever the checkbox is unchecked and the date picker is invisible. Strangely enough, everything works fine wh ...

javascriptangularjs

What is the best way to convert an Angular object into a string using a for-loop and display it using $sce in AngularJS?

Currently, I am rendering a block of HTML and directives using $sce.trustAsHtml. To achieve this, I utilized a directive called compile-template which enables the use of ng-directives like ng-click and ng-disabled. While it is possible for me to pass sta ...

javascriptjqueryhtmlangularjsfor-loop

Ways to limit date selection with JavaScript or jQuery

On my webpage, I have two date fields: fromDate and toDate. My goal is to prevent submission if the difference between the dates is more than 7 days. Despite implementing a script for this purpose, it doesn't seem to be working... var d1 = new Da ...

javascriptjquery

retrieve data from JSON file

function retrieveDataFromProfiles(){ const fs = require('fs') fs.readFile('src/data/profileInfo.json', function(error, data){ if(error){ alert(error); } var profileData = JSON.parse(data); //retrieves the JSON data of ...

javascriptjson

Invoke Selenium using JavaScript

Imagine I have this (fictional) JavaScript snippet: asynchronousOperation.addEventListener("completed", function (event) { if (event.property == "required value") tell Selenium we are good; else tell Selenium the test failed; }); ...

javascriptpythonselenium

Unable to trigger onActivated in Quasar (Vue 3) component

I can't seem to get the onActivated function in Vue 3 to trigger, even though I've implemented it before successfully. It's puzzling me as nothing seems to be happening. Currently, I'm using Vue version 3.0.0. Here is a snippet of my co ...

javascriptvue.jsvuejs3quasar-framework

The problem of having an undefined state in Vuex arises

https://i.stack.imgur.com/52fBK.png https://i.stack.imgur.com/GcJYH.jpg There is an error occurring: TypeError: Cannot read property 'state' of undefined ...

javascriptvue.jsvuejs2vue-componentvuex

Guide to displaying options in the Vue material select box even when the default value is blank

I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...

javascripthtmlcssvue.jsvue-material

Tips for testing and verifying the call to a specific Firebase method within a function using Jest

Within the file App.ts, I am utilizing the method firebase.auth().signInWithEmailAndPassword(email, password). Now, my objective is to conduct a unit test to ensure that when the myAuthenticationPlugin.authenticate(email, password) method is invoked from ...

javascripttypescriptunit-testingfirebase-authenticationjestjs

Ways to troubleshoot the "TypeError: Cannot read property 'value' of null" issue in a ReactJS function

I keep encountering a TypeError: Cannot read property 'value' of null for this function and I'm struggling to pinpoint the source of the issue. Can someone help me figure out how to resolve this problem? By the way, this code is written in R ...

javascriptreactjsmaterial-ui

filtering an array based on a specific property will result in the original array remaining

Working on filtering an array of objects based on a certain property using the following code snippet: if (payment == Payment.CREDIT_CARD) { this.currenies.filter((currency: Currency) => currency.isFromEurope === true); console.log(this.currencies) ...

javascripttypescriptfilter

Jquery allows for the toggling of multiple checkboxes

I have a group of check-boxes that I would like to toggle their content when checked. Currently, I am using jQuery to achieve this functionality, but I am searching for a way to optimize my code so that I do not need to write a separate function for each ...

javascriptjqueryhtml

Turn off spellcheck for all material-ui elements

Is there a way to deactivate spellcheck globally for elements in the material-ui library? Before incorporating the material-ui library into my project, I used the code below to turn off spellcheck for all new DOM elements: const disableSpellCheck = funct ...

javascriptreactjsmaterial-ui

How can I execute a different seed file using Sequelize-cli before running the main seed file?

I recently created a seeder file using sequelize-cli to bulk insert data into a MySQL database, and everything is working perfectly. However, one of the fields I am inserting (userId) requires a value that is already present in another table called User. ...

javascriptmysqlnode.jssequelize.jssequelize-cli

Tips for choosing an option from a dropdown menu with robot framework

Looking for guidance on how to properly select an order number from a dropdown list. On the page, there are two more dropdowns with the same repeated elements. When attempting to select text, it ends up choosing matching text from other dropdowns as well. ...

angularjspython-2.7seleniumrobotframeworkselenium2library

Twilio SMS Notification: The Class extension value provided is not a valid constructor or null

When attempting to utilize Twilio for sending SMS messages in a Vue.js project, I encountered an error while accessing Tools -> Developer Tools. <template> <div> <input type="text" v-model="to" placeholder="Ph ...

javascriptvue.jsvuejs3twilio