Tips for integrating Series data into Highcharts using MVC

Looking at this JFiddle demonstration of Highcharts

http://jsfiddle.net/yxz80f4u/9/

We can observe the data being inserted as

[Date.UTC(YYYY,MM,DD,HH,MM,SS), Y-data-point]

 data: [
           [Date.UTC(1970, 7, 5,1,1,1), 2.22],
            [Date.UTC(1970, 7, 5,2,2,1), 1.15],
            [Date.UTC(1970, 7, 5,2,30,1), 1.15],
            [Date.UTC(1970, 7, 5,3,50,1), 0],
            [Date.UTC(1970, 7, 5,10,50,1), 2.5],
        ]

It is functioning perfectly. Now the issue arises on how to achieve the same outcome
Using arrays of data points.

Year_array = ["5/7/1970 1:1:1 AM" , " another year ", etc....] Datapoints= [2.22,1.15, etc...]

OR from my controller

        graph_points.year.Add("2015, 1, 2, 9, 29, 00");
        graph_points.year.Add("20015, 1, 2, 9, 31, 00");
        graph_points.chlorine.Add(10.1);
        graph_points.chlorine.Add(10.12);

So how can I replicate the same function when working with two arrays of data points as shown?

UPDATE:

Hello, thank you for your advice. Are you suggesting something along these lines?

   for (var i = 0; i < year.length; i++) {
            myseries.push(Date.UTC(year[i]),chlorine[i]);

        }

UPDATE: Hello again, thanks for your help, just one more question ! I followed your instructions

            for (var i = 0; i < year.length; i++) {
            var datapoint = [];
            var d = new Date(Date.parse());
            datapoint.push(year[i]);  

            datapoint.push(chlorine[i]);
            data.push(datapoint);

However, it displays 00:00:00 on the x-axis inexplicably

https://i.sstatic.net/EJNWQ.png

Answer №1

Here is an example of code that you can use:

for (i = 0; i < Year_array.length; i++){
    var dataPoint = [];
    dataPoint.push(Year_array(i); 
    dataPoint.push(Datapoints(i));
    data.push(dataPoint);
}

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

Sometimes the AngularJS scope is refreshed only intermittently

I am encountering an issue with a list of cards retrieved from an API and displayed in a table using ng-repeat. The problem arises when I attempt to delete a card - sometimes it remains in the view, while other times it disappears as expected after confirm ...

"Error: Unable to locate module" encountered during the transition to Webpack 5

I am in the process of upgrading my React application to webpack version 5.72.0 (previously on 4.42.1). As part of this update, I have also upgraded webpack-cli to version 4.9.2, webpack-dev-server to version 4.8.1, and babel to version 7.17.9. However, I ...

Retrieving a single item from an array of objects with the help of body parser

I need assistance with sending an array of objects to a post route in my express app. Here is my form (written in ejs format): <form action="/archiveList/<%= list._id %>" method="POST"> <input type="hidden" name="list" value = <%= items ...

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

In what way and where does Selenium convert Java or other high-level programming language commands into native JavaScript in order to interact with the browser?

While Javascript is essential for interacting with browser elements, Selenium offers APIs for various high-level programming languages such as Java and C#. How does Selenium handle these java commands when the code is not written in javascript? Is there ...

The JOI validation process is failing to return all error messages, even though the "abort early" option

I have been encountering an issue while trying to validate my payload using a joi schema. Instead of returning the errors specified in the schema, only one error is being displayed. Even when I provide a payload with name as "int", it only shows one custom ...

Display Error with Custom Alert Box

I recently implemented a customized alert box from slayeroffice's website, which you can find at slayeroffice.com/code/custom_alert/. When I view it on my browser, the alert box appears with a blue color in the center of the screen. Here is how it lo ...

Discovering the cities associated with a particular province in ReactJS

Hello, I'm new to reactjs and I am looking for a way to retrieve the cities of a province when it is passed as input. I have tried using npm but haven't had any success so far. Any help would be greatly appreciated. Thank you! ...

"By selecting the image, you can initiate the submission of the form

I am trying to figure out why clicking on the image in my form is triggering the form submission by default. Can someone please provide guidance on this issue? <form name="test1" action="er" method="post" onsubmit="return validateForm()" <input ty ...

Using Javascript to change CSS in a Polymer application

Coming from a background in angular and react, I am now delving into the world of polymer. I have a polymer class called myClass with the following template. <div id="[[x]]"> Here, 'x' is a property defined in a property getter. stat ...

The LINQ expression provided is invalid and cannot be translated

Upon executing this LINQ query, an exception is being thrown that reads as follows: System.InvalidOperationException: The LINQ expression '__ids_0.Contains(StructuralTypeShaperExpression: Patron.Domain.RoleAggregate.Role ValueBufferExpression: Project ...

Preventing an event from bubbling up to its parent in a jQuery Ajax call: A step-by-step guide

I am working on a page that showcases a tree list using unordered lists. Each li element with children triggers an ajax call to fetch those children and display them as another ul/li combination, which is functioning correctly. However, the problem arise ...

Ensure that only valid numbers can be inputted into an HTML number type field

My input number is as follows: <input type="number" id="quantity" name="quantity" (change)="firstRangePointChanged($event)" > I need to ensure that users cannot input invalid values like --99 (--) instead of ...

How can you limit access to certain routes in Nuxt.js to only clients who possess a valid JWT token?

In Nuxt.js, implementing authentication can be done in the following steps: The client authenticates by sending its credentials in an HTTP request to a specific API route in the Nuxt backend; The Nuxt backend responds with a JWT token for accessing protec ...

Issue with Knockout.js: Parsing error in bindings - SyntaxError: Unexpected token `};`

Take a look at this example. I've tried to simplify it as much as possible, but I'm still struggling to figure out where I went wrong. Any help would be greatly appreciated )) P.S Stack Overflow requires code, not just a link to jsfiddle. H ...

AngularJS Element Connections

I have the following component: (function () { "use strict"; angular.module("application_module") .component('tab', { controller: 'TabCtrl', templateUrl: 'app/component/application/app-heade ...

Discover the step-by-step guide for inserting personalized HTML into the current widget screen on Odoo 12 with

For the past 3 days, I've been stuck trying to figure out how to print order items. My goal is to have a custom HTML code added to a div with the class 'order-print' when the Order button is clicked. I am using odoo 12 and facing issues wit ...

Ways to enhance an image by zooming in when the user reaches a designated area on the webpage

I have implemented a feature where an image zooms in to letter L when the user scrolls on the page. However, I want this zoom effect to occur only when the user reaches a specific section of the site, rather than immediately when the image loads. In my exa ...

Lambda function failing to execute Auth0 methods through the Auth0 node-auth0 SDK

I am working with a lambda function that triggers when a message is added to the SQS queue. Within the message, there is a userId that I want to connect to using the Auth0 node SDK. The code snippet for my GetUserDetails function below shows that it logs ...

avoiding less than or greater than symbols in JavaScript

I'm encountering an issue while attempting to escape certain code. Essentially, I need to escape "<" and ">" but have them display as "<" and "> in my #output div. At the moment, they show up as "&lt;" and "&gt;" on the page. This ...