Include a for loop in the line graph on Google Charts

I need help figuring out how to use a for loop to iterate over data in order to populate my Google Chart. The code snippet below outlines what I've already tried.

var line_div = '2016-08-04,4|2016-08-05,7|2016-08-06,9|2016-08-07,2';
var line = line_div.split(/[,|]/);
var array_dt = line.filter((x,i) => (i%2!==0));
var array_s = line.filter((x,i) => (i%2===0));

var line_data = google.visualization.arrayToDataTable([
    ['Date', 'Log'],
    ['2016-08-04', 134]
]);

As seen below, I attempted to implement the for loop, but I'm struggling with the section marked as dots. I am aware that my approach is incorrect, yet I'm unsure of an alternative solution.

var line_data = google.visualization.arrayToDataTable([
    for(var i = 0; i < line.length; i++) {
        ['Date', 'Log'],
        [...]
    }
]);

Any suggestions on how I can successfully achieve this task?

javascriptfor-loopgoogle-visualization

Answer №1

To prepare for using arrayToDataTable, start by constructing the array.

google.charts.load('current', {
  callback: function () {
    var line_div = '2016-08-04,4|2016-08-05,7|2016-08-06,9|2016-08-07,2';
    var line = line_div.split(/[,|]/);
    var array_dt = line.filter((x,i) => (i%2!==0));
    var array_s = line.filter((x,i) => (i%2===0));

    var dataRows = [['Date', 'Log']];
    for (var i = 0; i < array_s.length; i++) {
      dataRows.push([array_s[i], parseFloat(array_dt[i])]);
    }

    var line_data = google.visualization.arrayToDataTable(dataRows);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(line_data);
  },
  packages: ['corechart']
});
<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

Transferring information from Python to JavaScript and receiving a response

Currently, I am working on sending JS data, particularly images that have been collected by a Python file. My goal is to send these images from Python to JS so that JS can perform a certain action (which I will be coding). Afterwards, the final result ne ...

javascriptpythoncanvaspython-imaging-library

The Next Js API is experiencing difficulties resolving

I'm just starting out with back-end development so I could use some assistance with my current project. I am working on a next.js application that applies a black and white filter to an image when it is uploaded. In the index.js file, once a file is s ...

javascriptnode.jsreactjsapinext.js

Guide to selecting a date using JavaScript in Selenium with Ruby

I'm having some trouble selecting a date from a date picker field using JavaScript in Selenium WebDriver. I've attempted the code below, which does navigate to the date window successfully, but I can't figure out how to execute the JavaScrip ...

javascriptjqueryrubyselenium

What could be causing the error with firebase Sign In in next.js?

I set up a sign in page to enter email and password for Firebase authentication. The sign up process works fine, but I'm encountering an issue with the sign in functionality. 'use client' import { useState } from 'react'; import { ...

javascriptreactjsnext.jsfirebase-analytics

Is there a way to verify the existence of a specific error in the console?

There seems to be a conflict between a WordPress plugin or code left behind by the previous programmer, causing the WordPress admin bar to always remain visible. While no error is triggered for admins, visitors may encounter a console error. My goal is to ...

javascriptjqueryhtml

Tips on obtaining the element selector when a div is being dynamically loaded during an AJAX call

When running two ajax calls, I encounter an issue where the second call loads some HTML onto the page that is needed for processing a specific div in the first call. However, since the div is not present until after the second call is completed, I receiv ...

javascriptjqueryhtmlajax

Using jQuery to create clickable images by enclosing them in an `<a>` tag

How can I make each image with a specific class clickable? I would like jQuery to: Retrieve the src attribute of the image. Enclose the image within an a href tag that includes that src URL. .clickable { padding: 20px; border: 1px ...

javascriptjquery

converting an angular object into a string representation

I stumbled upon this guide: . and it includes the following piece of code: import { Component } from '@angular/core'; import { FormGroup, FormControl } from '@angular/forms'; @Component({ selector: 'app-root', templateUrl ...

javascriptangular

Utilizing ng-options within an ng-repeat to filter out previously chosen options

Facing a simple problem and seeking a solution. I am using ng-repeat to dynamically create select boxes with ng-options displaying the same values. The ng-repeat is used to iterate through model options. <div data-ng-repeat="condition in model.condit ...

javascriptangularjs

Does it have .hasOwnProperty and a significant value?

Today, I encountered a tricky situation involving the JavaScript Object.hasOwnProperty method. I was working on a form that creates properties on an object. The issue arose when dealing with a select box that had a value selected and then reset back to it ...

javascriptangularjs

Designing scroll boxes that are not continuous and tracking the time spent in each section

I'm seeking assistance with a unique challenge involving the creation of scroll boxes for use in a Qualtrics survey and tracking the time spent viewing different sections of text within them. Specifically, I aim to design a scroll box featuring two p ...

javascriptjqueryhtmlcss

Unlock the full potential of integrating external APIs with Next.js

As a newcomer to NextJs, I am facing the task of making calls to an external Python API from my frontend. Upon discovering NextJs's integrated API feature through creating folders in the app directory, namely api/resource/route, I am wondering what th ...

javascriptnode.jsnext.js

Unused function in Vue error compilation

I am facing an issue with the compiler indicating that the function 'show' is defined but never used. The function show is being used in HTML like this: <b-card> <div id="draw-image-test"> <canvas id="can ...

javascriptvue.js

Refresh content on an HTML page using information retrieved from an external PHP post request

So, I have a problem with communication between my two web pages - mobile.html and video.php. The idea is for mobile.html to send an AJAX post request containing a single variable to video.php. Video.php should then read this variable and pass it to a Java ...

javascriptphphtmlajaxpost

Google Charts is unable to display any data because the table does not contain

After browsing numerous forums and attempting various solutions, I encountered a new challenge each time. My goal is to generate a Google line chart using data from a MYSQL table and encoding it in JSON. Then, I aim to utilize an HTML file to showcase the ...

javascriptphpmysqljsongoogle-visualization

Error: The hyperlink in the response from the Ajax request is not functioning as expected

I've exhausted all the suggestions for fixing this issue, but nothing has worked so far. Currently, my setup involves making an AJAX call to a PHP page called livesearch.php from the index page in order to retrieve live search results. <html> ...

javascriptphpjqueryhtmlajax

Add a click function to an element in a grid when it is databound

In my TypeCtrl ES6 class angular controller, I am using a kendo datagrid directive with a template for grid config options. Within the grid template, I need to call a method from the TypeCtrl class when a span within the row is clicked. However, the functi ...

javascriptangularjsangularjs-scopekendo-gridangularjs-ng-click

Substitute the specific class title with the present class

Here is a sample class (supposed to be immutable): class A { normalMethod1(): A{ const instance = this.staticMethod1(); return instance; } static staticMethod1: A(){ return new this(); } } The code above works fine, but how can I re ...

javascripttypescriptclass

Creating subpages using IDs can be accomplished by following these simple steps

Currently, I am in the process of developing a website that contains a plethora of information, specifically news articles. Each news article on my site features an introduction and a header. Upon clicking on a particular news article, the full content is ...

phpjavascriptjqueryhtml

Top technique for creating a unique cursor image for a website

I'm looking for the most efficient way to create a custom cursor image for my CSS/HTML5 website without using Flash. Ideally, I would like to implement this using CSS rather than resorting to Javascript. If Javascript is necessary, I want to know whic ...

javascriptcsscursor