The dygraphs library is experiencing an issue due to a discrepancy between the number of labels and the number of

Having trouble with the dygraphs.

I've extracted an array from PHP that appears like this:

data = [
{
    "DATA": "2016-01-22",
    "TOTAL": [
        "7",
        "4",
        "20",
        "0"
    ]
},
{
    "DATA": "2016-01-25",
    "TOTAL": [
        "3",
        "2",
        "10",
        "0"
    ]
},
{
    "DATA": "2016-01-26",
    "TOTAL": [
        "1",
        "1",
        "4",
        "0"
    ]
},
{
    "DATA": "2016-01-27",
    "TOTAL": [
        "2",
        "1",
        "2",
        "0"
    ]
},
{
    "DATA": "2016-02-02",
    "TOTAL": [
        "1",
        "1",
        "1",
        "0"
    ]
},
{
    "DATA": "2016-02-10",
    "TOTAL": [
        "1",
        "1",
        "3",
        "0"
    ]
}
]

The graph data is then constructed as follows:

data.forEach(function(item) {
    var adata = item.DATA;
    var atotal = item.TOTAL;

    graphstr1 += '[new Date("' + adata + '"),' + atotal + '],';
});
graphstr1 = graphstr1.slice(0, -1);
console.log(graphstr1);

After checking the console, the data seems to be correctly formatted, but I keep encountering the error mentioned in the title

Dygraph implementation:

g = new Dygraph(
    document.getElementById("graphdiv"),
    [
        graphstr1,
    ], {
        labels: ["x", "Registered", "Pregnant", "With Children", "Without Children"]
    }
);

Answer №1

Is it possible to utilize an array directly instead of creating a custom stringified version?

var data = [{ DATA: "2016-01-22", TOTAL: ["7", "4", "20", "0"] }, { DATA: "2016-01-25", TOTAL: ["3", "2", "10", "0"] }, { DATA: "2016-01-26", TOTAL: ["1", "1", "4", "0"] }, { DATA: "2016-01-27", TOTAL: ["2", "1", "2", "0"] }, { DATA: "2016-02-02", TOTAL: ["1", "1", "1", "0"] }, { DATA: "2016-02-10", TOTAL: ["1", "1", "3", "0"] }],
    converted = data.map(function (a) {
        return [new Date(a.DATA)].concat(a.TOTAL.map(Number));
    }),
    g = new Dygraph(
        document.getElementById("graphdiv"),
        converted, 
        { labels: ["x", "Registered", "Pregnant", "With Children", "Without Children"] });
<div id="graphdiv"></div>
<script type="text/javascript"
  src="https://cdnjs.cloudflare.com/ajax/libs/dygraph/1.1.1/dygraph-combined-dev.js"></script>

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

Aggregate the properties of objects in an array into a single object using Lodash

I've been struggling to figure this out on my own, so I decided to seek advice from those with more experience. I have an array of objects called items, and I need to sum up specific properties across different objects in the array. The user can selec ...

"Limitation observed - function operates only on first attempt

I have been working on a map project that involves pulling information from Google about various locations using the library available at https://github.com/peledies/google-places In order to troubleshoot and identify the issue with the code related to ma ...

The radio buttons are stuck and not changing their selection

Having a group of radio buttons with the same name, when one is checked, it automatically selects another one in the group. Here is my current code: <input name="a" type="radio"> <input name="a "type="radio" checked> JS $("input[type='r ...

Retrieve the Data from Input Fields with Matching Classes and Transmit to a Script Using AJAX Request

I am working on a form that includes multiple input fields: <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="date[]" onkeyup="showHint()" /> <input type="text" class="date" name="da ...

The application unexpectedly closes upon receiving a notification while using @react-native-firebase/messaging

I'm currently working on setting up notifications using @react-native-firebase/messaging in a React Native app. I'm able to retrieve the FCM token, but the app crashes when a notification is received. Here's the error I found in Crashlytics ...

The JSON variable has been updated, however the index.js file still displays the previous value

interval = setInterval(function() { online = require("./../../server/oxide/data/online.json"); if (online.ONLINE == -1) { client.user.setStatus(`dnd`); client.user.setActivity("server offline"); } else if (online.ONLIN ...

Unlocking the potential of GraphQL: Harnessing the power of sibling resolvers to access output from another

Could use a little assistance. Let's say I'm trying to retrieve the following data: { parent { obj1 { value1 } obj2 { value2 } } } Now, I need the result of value2 in the value1 resolver for calculation ...

Filling out Django Form Using JavaScript

Trying to pass latitude and longitude values using HTML5 geolocation to auto-fill two form fields in a Django form with JavaScript. Found some solutions, but dealing with a Meta class form that generates HTML automatically, making it difficult to add an "i ...

add element into the center of the div

I am attempting to insert an element (such as a div) in the middle of another div and directly after two line breaks. Below is an example of my code. The length of the div may vary. <html> <head> <title></title> <script ...

Submitting Multi-part forms using JQuery/Ajax and Spring Rest API

Recently, I started exploring JQuery and decided to experiment with asynchronous multipart form uploading. The form includes various data fields along with a file type. On the server side (using Spring), I have set up the code as follows: @RequestMapping ...

What is the best way to position an iframe or div adjacent to or preceding the <script> tag?

Is there a way to dynamically insert an iframe/div using javascript before or after the <script> block, similar to how Google ads are embedded? I have a script tag within an HTML document and I want an iframe to display in the same location when the ...

Error in Angular authentication validation when verifying the response of a URL for the status "success"

I've encountered an issue with my code that involves requesting an external URL to check for a successful status: $http.get($scope.linkAnswer).then(function () { linkStatus = true; console.log("veikia") ...

Utilizing ng-repeat to loop through a div element that consists of various nested tags

I need to display multiple tabs, with each tab having a table where the values are populated from a database. The number of tabs is dynamic and fetched from another page of the application. All tables have the same structure but different values. How can I ...

The Datepicker and Tablesorter dilemma

Having a Datepicker and Tablesorter on the same View Page presents an issue for me. When I remove the tablesorter, the datepicker functions properly. However, when I reintroduce the tablesorter, the datepicker stops working entirely. Below is the code sni ...

React is re-rendering the identical div elements once more - Delving into the concept of

After reading about reconciliation in the React documentation, an interesting scenario crossed my mind. In my examples, I have code that involves using a button element to toggle a boolean value on click event. Based on this value, the code utilizes a ter ...

Incorporating PHP arrays into JavaScript code within a PDO environment

I'm facing an issue trying to incorporate a PHP array into my JS code and I'm not sure how to resolve it. I found this example (I'm using PDO, not mysqli): Inserting MYSQL results from PHP into Javascript Array $pdo = new PDO('mysql:h ...

I do not intend for my JavaScript code to be echoed in PHP

I have encountered an issue with an ads script that I saved in my database using a textarea field. However, when I try to echo this script in PHP, it does not work as expected. Below is the script that I stored in the database: <script type="text/javas ...

The data from the Flickr API is consistently unchanging

I created a simple weather app that retrieves weather data using a "POST" request and displays it successfully. Users have the ability to search for weather by city, and I wanted to enhance the app by loading an image of that city through a separate jQuer ...

Having an issue with button onClick functionality not working in Javascript

Simple enough. I am struggling to get my button to generate the necessary input upon clicking. The fields should populate where the "household" class is located. I am limited to editing only Javascript and not HTML. Any suggestions? HTML: <ol ...

How to get the most out of the $scope variable?

Is it possible to assign a regular JavaScript variable the current value of an Angular $scope variable without having their values binded together? //$scope.var1 is set to a specific value, for example, 5 var v2 = $scope.var1; //$scope.var1 is then update ...