Leveraging JSON with Highcharts for tailor-made multiple series customization

My goal is to incorporate multiple series into my graph using data from a JSON file containing 4 columns (date, open incidents, closed incidents, and in progress incidents). I have successfully displayed the number of open incidents on my graph (http://jsfiddle.net/269us/), but I am struggling to access the 3rd and 4th columns of the JSON file.

This is the format of my JSON file:

[[1325462400000,3,12,14]
 [1325548800000,7,14,8]
 [1325635200000,10,11,24]
 [1325721600000,21,13,16]
 [1325808000000,13,15,9]
 [1325894400000,2,15,4]
 [1326067200000,10,13,15]]

I aim to achieve the following structure to customize each series (open, closed, in progress):

var date = []
   open = []
   close = []
   inprogress = []
   datalength = data.length;

for (i = 0; i <dataLength; i + +) {
    date.push ([
         data [i] [0]
    ]);

    open.push ([
         data [i] [1],
    ]);

    close.push ([
         data [i] [2],
    ]);

    inprogress.push ([
         data [i] [3],
    ]);

    }

    series: [{
       type: 'spline',
       name: 'open',
       data: open,
       dataGrouping {
              units: groupingUnits
       }
   } {
       type: 'column',
       name: 'close',
       data: close,
       dataGrouping {
              units: groupingUnits
       }

      .............
      .............

   }]

Answer №1

Consider implementing 3 different data arrays for 3 series - open, close, and in-progress. You can achieve this by following the code snippet provided below:

for (i = 0; i <dataLength; i + +) {
    var date = data[i][0];
    open.push([
        date,
        data[i][1]
    ]);

    close.push([
        date,
        data[i][2] // Corrected a typo from dat to data.
    ]);

    inprogress.push([
        date,
        data[i][3]
    ]);
}

You can now utilize these 3 arrays as data sources for your series:

series: [{
    type: 'spline',
    name: 'open',
    data: open,
    dataGrouping: {
        units: groupingUnits
    }
},
{
    type: 'column',
    name: 'close',
    data: close,
    dataGrouping: {
        units: groupingUnits
    }
},
{
    type: 'line',
    name: 'inprogress',
    data: inprogress,
    dataGrouping: {
        units: groupingUnits
    }
}

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

Creating transparency effect on objects using Physical Material in THREE.js

Is there a way to showcase a translucent PNG texture behind a transparent Physical Material in THREE.js? It seems like currently, THREE.js does not display the translucent texture through the Physical Material. I discovered that when I set transparent: fa ...

Comparison between Next.js and Express.js

As I delve into the world of Node.js backend development, I find myself at a crossroads between Next.js and Express.js for my next project. I have some familiarity with Express.js, particularly for API development, but I'm a bit confused about Next.js ...

Converting Symfony2 FormType into JSON format

Is there a way to convert Symfony2 FormType into JSON format? Below is an example of a User form Type. class UserType extends AbstractType { /** * @param FormBuilderInterface $builder * @param array $options */ public function build ...

Utilizing *ngIf within a loop to alternate the visibility of table rows with a designated class upon clicking on rows with a different class in Angular 2

I have created a table that displays data, and within this table there are 2 tr elements with the classes default and toggle-row. When I click on a tr element with the class default, it should only toggle the corresponding tr element with the class toggle- ...

Tips on Importing a Javascript Module from an external javascript file into an <script> tag within an HTML file

I'm facing an issue while attempting to import the 'JSZip' module from an external node package called JSZip in my HTML File. The usual method of importing it directly using the import command is not working: <script> import ...

The logical OR operator in JavaScript (denoted as ||)

Can anyone explain the functionality of this operator in JavaScript? I have come across this operator in two different contexts: //context 1 function(e){ e = e || window.event; //context 2 if(a || b) In C or C++, I understand that the return value of th ...

Developing with Cordova involves collaborating with PHP and MySQL for efficient and seamless

As a newcomer to the world of cordova, I am currently in the process of familiarizing myself with its syntax. At this stage, I have manually inputted some json data and developed an application. In this app, when a user chooses a serial number from a dropd ...

What could be causing Mathjax to generate multiple copies?

I have integrated MathJax into my application to render MathML. The code snippet below is used to ensure that the MathML is typeset properly: $rootScope.$watch(function() { MathJax.Hub.Queue(["Typeset", MathJax.Hub]); return true; }); However, I ...

Preventing click event from bubbling up the DOM: Using Vue's @click

How can I access the child elements within a parent component? <div v-on:click.stop.prevent="onClickTemplateHandler"> <div> <h3 style="">Title</h3> <p>{{ lorem }}</p> </div> ...

A guide to dynamically adjusting the overflow property for the body element within an AngularJS application

I am facing a challenge in my AngularJS application where I need to dynamically control the overflow on the body element. Specifically, when a side nav is opened, I want to disable scrolling on the body. Below is a snippet of my code and I would appreciate ...

Determining the quantity of items within a div using jQuery

Similar Question: Retrieve the count of elements inside parent div using jQuery Can you determine the total number of elements within a specific div? <div id=count"> <span></span> <span></span> <span></ ...

What are the most effective strategies for managing vast amounts of data using JS fetch?

The server is taking about 2 minutes to export a large JSON data, resulting in a timeout error on the client side before receiving a response from the server. I have searched online for solutions, but I cannot find a way to extend the timeout or continue ...

Using jQuery to target nested HTML elements is a great way to efficiently manipulate

Within the code below, I have a complex HTML structure that is simplified: <div id="firstdiv" class="container"> <ul> <li id="4"> <a title="ID:4">Tree</a> <ul> <li id="005"> ...

Activate the Keypress event to update the input value in React upon pressing the Enter

I am facing an issue where I need to reset the value of an input using a method triggered by onPressEnter. Here is the input code: <Input type="text" placeholder="new account" onPressEnter={(event) => this.onCreateAccount(event)}> < ...

The scrolling feature induces a contraction to the left side

Recently, I implemented the code below to fix my menu when scrolling the page: var num = 5; $(window).bind('scroll', function () { if ($(window).scrollTop() > num) { $('.scroll').css({'position':'fixed&apo ...

Using React: Implementing conditional checks within the render() method of functional Components

When working with my usual React class Components, I typically perform some checks within the render() method before returning conditional html rendering. However, when using a react functional component, I noticed that there is no render() method availabl ...

Executing numerous Ajax requests within a single Rails view

Two ajax requests are being used on a single page, one showcasing a date and the other displaying a calendar. The first request updates the date upon clicking a date on the calendar. The second request allows for switching between months on the calendar. ...

Modifying the JSON output of a web API

After creating an API in visual studio 2015, I noticed that while running the API, it provides me with the expected response and data. Below you can find my controller code: public HttpResponseMessage GetByMsn(string msn, DateTime dt) { try ...

The current status of the Macrotask and Microtask queues as this calculation is being processed

This particular inquiry delves into a nuanced aspect of the event loop, seeking clarification through a concrete example. While it shares similar characteristics with another question on Stack Overflow, specifically Difference between microtask and macrota ...

What is the best approach to iterate through multiple input fields while maintaining separate states for each one?

Utilizing Vuetify to create text fields and applying v-model to a textFieldState results in all text fields sharing the same state, causing input from one field to leak into others. How can I ensure that each field maintains its own state? <div v- ...