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

Finding elements in an array based on a specific string contained within a property

I am currently working on filtering JSON data to specifically search for job roles that begin with a particular string. The structure of the JSON is as follows : "periods": [ { "periodName": "Week1", "teamName": "Tango", ...

javascriptjsonlinq.js

Identify and automatically switch to the mobile site following a selection

Seeking a way to incorporate a redirect on my Joomla site that leads users to a mobile-friendly HTML5 app. After much thought, I've put together the following script: <script type="text/javascript> <!-- if (screen.width <= 800) { ...

javascripthtmlmobiledetect

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Utilizing a masterpage to create a consistent header across all content pages, I encountered an issue on one page. I needed to retrieve the innerHTML of a div element and pass it to an input control on the same page in order to access the updated innerHTML ...

javascriptjqueryhtmlasp.net

Error encountered: Jquery counter plugin Uncaught TypeError

I am attempting to incorporate the JQuery Counter Plugin into my project, but I keep encountering an error: dashboard:694 Uncaught TypeError: $(...).counterUp is not a function <!DOCTYPE html> <html lang="en"> <head> <script src ...

javascriptjquery

Is there a way to remove a certain child category post from appearing in a parent category?

I'm having trouble with displaying related posts by category while excluding a specific category. I've tried different methods but none seem to work, and I'm not sure how else to approach this issue. <?php $categories = get_the_terms ...

javascriptphpjquerywordpress

Exploring the world of JSON and JavaScript data structures

Can someone provide some clarification please? var a = '{"item":"earth", "color":"blue", "weight":920}'; Is the data type of a a string or an array ? var b = JSON.parse(a); What is the data type of b - an object or an array ? ...

javascriptjson

Tips for setting up listeners across multiple modules using socket.io

Last year, I created a multiplayer game using node.js and socket.io. Now, as part of my efforts to enhance the game, I am working on breaking down the code into modules. Currently, I am utilizing expressjs 4.4 along with socket.io 1.0. One challenge I enco ...

javascriptnode.jssocket.io

Integrating Braintree with Angular for accepting Android Pay transactions

Currently facing a challenge with Braintree that I need help resolving. I have successfully set up Braintree to generate my client_token using my API, and created the drop-in feature as a test. Here is how I implemented it: (function () { 'use st ...

javascriptandroidangularjsbraintree

Sending an object from Rails to Javascript

My MapsController is def show @outlet=OUtlet.all render 'maps/map' end In the view page map.html.erb, I iterate through each outlet to display their latitude and longitude: <% @outlet.each do |product| %> <%= product.latitu ...

javascriptruby-on-railsarraysruby

Having trouble with the image compressor not being imported correctly in Next.js?

I've been attempting to compress an image, but when I try to import the ImageCompressor normally like this: import ImageCompressor from "image-compressor.js"; It throws an error: Uncaught ReferenceError: window is not defined This is the s ...

javascriptnext.jsimportimage-compression

Utilizing Vue 3 to transform an item within a list by referencing its index

Storing the element's index in a global variable is causing issues when trying to individually edit each of them. Adding multiple elements with similar properties but being unable to edit them separately due to alterations affecting the rest is a chal ...

javascriptvue.jsvuejs3

Tips for integrating Laravel's blade syntax with Vuejs

Can you guide me on integrating the following Laravel syntax into a Vue.js component? @if(!Auth::guest()) @if(Auth::user()->id === $post->user->id) <a href=#>edit</a> @endif @endif ...

javascriptphpvue.jslaravel-5.7

Transmitting a custom PDF document through email with React and Node.js

Currently, I am in the process of developing an application designed to streamline the completion of a complex form. The data entered into this form will be stored on a remote database for future reference and editing purposes. Once the form is ready for s ...

javascriptnode.jsreactjsexpressgraphql

Enhancing Javascript functionality with additional on.change customization opportunities

My website currently has a dynamic AJAX script that updates a table based on the selection from a dropdown menu with the ID of [id="afl_player_ID"]. However, I am looking to extend this functionality so that the same script runs when either [id="afl_playe ...

javascriptajax

The submit function for Ajax is not functioning properly

<script> var markerLatitude; var markerLongitude; function initializeMap() { var centerCoordinates = new google.maps.LatLng(51.8979988098144, -2.0838599205017); var mapOptions = { zo ...

javascriptphphtmlajax

What is the process for turning off express logs on my node.js command line interface?

Recently, I've begun delving into the world of node.js and in an effort to improve my debugging practices, I've decided to move away from relying solely on console.log. Instead, I am exploring the use of debug("test message") for my debugging ...

javascriptnode.jsdebuggingexpress

Django does not support running JavaScript natively

Wondering how to incorporate JavaScript into Django for creating chained forms? My first step was simply trying to understand how to run JavaScript. I've placed a basic main.js file in the static folder. I included a link to main.js in the header of ...

javascripthtmldjango

Utilizing a PHP Class object in Javascript by accessing its properties within a Javascript function

I'm struggling to access the attributes of an object within a JavaScript function that I created. This object was originally a PHP object that I converted to JSON using json_encode() In my project, there is 1 PHP file and 1 external JS file. In the ...

javascriptphp

Extract branch, path, and URL from the .gitmodules file by utilizing JavaScript Regex

Is there a way to extract branch, path, and URL details from the .gitmodules file using JavaScript Regex? .gitmodules [submodule "PATH"] path = <PATH> url = <URL> [submodule "PATH"] path = <PATH> url = <URL> ...

javascriptregexgithub

Troubleshooting: React Testing Library Issue with Updating Material UI DatePicker Input Content

I'm attempting to update the value of the Material UI Datepicker Input using React Testing Library. Unfortunately, I have not been successful with the fireEvent.change() method. import React from "react"; import { render, screen, waitFor, fi ...

javascriptreactjsdatepickermaterial-uireact-testing-library