Creating Structure with Highcharts - Sorting Through Unprocessed Data

In reviewing various demos of highcharts, I noticed that they all tend to adhere to a fairly straightforward data structure:

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5
Jane,3,4,2,3
Joe,86,76,79,77
Janet,3,16,13,15

However, the data I have doesn't fit well into this format. While I could adapt it to match, it would be cumbersome to set up and challenging to update.

I'm interested in creating a stacked bar chart that displays categories (Group 1, Group 2, Group 3) along with sales staff and their respective sales figures. The complexity arises from the fact that sales staff members can belong to multiple groups simultaneously, which may change over time.

For example, Category 1 (Group 1) would draw data from a table like the one below:

Date | Date | Group |
Start| End  | Lead  |

1990 | 1991 | AAA   |
1991 | 1994 | BBB   |
1994 | 1996 | AAA   |

The current design of highcharts links specific details (e.g., John, Jane, Joe) to each category. Creating the aforementioned chart would be simple; however, integrating more complex data involving four categories and over 200 names presents a challenge.

Category       Date Start     Date End         TotDays Name
Apples           5/11/1994      3/1/1995        294     sc
Apples           5/19/1995      6/28/1997       771     lb
...
Cherries         11/2/2012      2/3/2015          823    gg

Given the above scenario, I am uncertain how to proceed using highchart. Can anyone suggest a method for incorporating tables similar to those provided?

Check out this Fiddle to see how it is supposed to look:

http://jsfiddle.net/MAYO/eLam1Lo1/5/

javascripthighcharts

Answer №1

When it comes to data organization and representation, this question delves more into general principles than focusing on anything specific to highcharts.

The first step is to determine the importance of different data aspects and what information needs to be highlighted. Once that is clear, the next step is to choose suitable methods of display.

It's crucial to understand that formatting data for a charting library is a later stage in the process, and there are other considerations to address beforehand.

Creating a single stacked bar chart with all the gathered data might not provide any meaningful insights and could end up being counterproductive.

Here are some key points to consider:

- Are changes over time significant or only the totals?

- How crucial are the categories? If they hold importance and individuals switch categories frequently, segmenting the data based on group transitions would be necessary.

- Do you really require user-level numbers?

Chances are, making sense of the data will involve using multiple visualization types in conjunction with each other.

For instance, displaying totals by group in one chart, individual users in another, and illustrating changes in group composition over time or each person's participation in groups over time.

This may not deliver the answer you were seeking, but the original question lacks clarity for a precise response.

[[ update:

Regarding the sample fiddle provided, applying your data to something similar results in this outcome:

http://jsfiddle.net/jlbriggs/up7a5nk5/

While there are various options to experiment with, I still struggle to see its practical utility...

Your data essentially consists of one series per person, with a single data point per time period when that person is included:

{
  "name":"aa",
  "data":[
    {
      "x":1,
      "low":1134190800000,
      "high":1247371200000
    }
  ]
}

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

Guide to combining an object with an array object in Vue.js

After receiving an API response's data, [{id: 1, name:"Test 1"},{id: 2, name:"Test 2"}] I am working on my component .vue file. ... created() { const request = axios.get("***api_url***").then(response => { ...

javascriptvue.jsvuejs2

Using the JavaScript JSX syntax, apply the map function to the result of a

My aim is to create a structure resembling the following: <td> {phones.map((phone, j) => <p>{this.renderPhone(phone)}</p> )} </td> However, there may be instances where the phones array is not defined. Is it feas ...

javascriptarraysreactjsjsx

Add a new sibling item to Angular-UI-tree

I am trying to add a sibling item to a tree when clicked in angular-ui-tree (https://github.com/angular-ui-tree/angular-ui-tree) Here is an example of what I currently have: <item><input value"item A #1"><button>insert under</button& ...

javascriptangularjstreeangular-ui-tree

How do I use NodeJS and MongoDB to dynamically populate my webpage with data from a database?

I am working on a small express + ejs application that stores data for registered users. Each user is assigned a "role" that is stored in the database. I would like to display each user's information in an html div, with the div's color refle ...

javascriptnode.jsmongodbexpressejs

What is the best way to resolve an npm build error on Windows 10?

I have exhausted all options but still cannot successfully install any npm modules. Any suggestions on how to resolve this issue? Microsoft Windows [Version 10.0.17134.590] (c) 2018 Microsoft Corporation. All rights reserved. C:\Users\Dell&bsol ...

javascriptnode.jsnpm

Obtain the dynamic identifier of an element within every block using jQuery in a rails application

Let me illustrate my issue with a simple example. I am currently developing a recipe application. Within the show partial that loads via AJAX, I have the following setup: _show.html.erb <% @recipe.ingredients.each do |ingredient| %> <div class ...

javascriptjqueryruby-on-railsajax

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

javascriptcsshtmlcanvas

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

Currently, I have implemented an Ajax functionality in my template to receive a JSON response and dynamically populate a datatable with the elements from that JSON: $('.bicam_tests').click(function(){ $.ajax({ type: 'GET', ...

javascripthtmlajaxdatatable

Tips for creating a consistent format based on test cases

var years = Math.floor(seconds / (3600*24*365)) seconds -= years*3600*24*365 var days = Math.floor(seconds / (3600*24)) seconds -= days*3600*24 var hrs = Math.floor(seconds / 3600) seconds -= hrs*3600 var minutes = Math.floor(seconds / 60) ...

javascripttime

Getting the Correct Nested Type in TypeScript Conditional Types for Iterables

In my quest to create a type called GoodNestedIterableType, I aim to transform something from Iterable<Iterable<A>> to just A. To illustrate, let's consider the following code snippet: const arr = [ [1, 2, 3], [4, 5, 6], ] type GoodN ...

javascripttypescripttypesconditional-types

I am experiencing some difficulty with the GetServerDate using the JSON protocol in JQuery; it's

I am facing an issue while trying to execute a basic ajax call to fetch data from a file on a server. Even though I can access the file via the web browser and have diligently followed tutorials related to this topic, I have hit a dead end. Here is the sn ...

javascriptjqueryhtmlajaxjson

Using command line arguments to pass parameters to package.json

"scripts": { "start": "gulp", ... }, I have a specific npm package that I'm using which requires passing parameters to the start command. Can anyone help me with how to pass these parameters in the command line? For example, is it possible ...

javascriptnode.jsnpmpackage.json

Is it advisable to Utilize ES6 Classes in Javascript for Managing React State?

Is it recommended to use ES6 classes directly as React state? I am interested in creating an ES6 class that: Contains member variables that will trigger re-renders on the frontend when changed. Includes methods that sync these member variables with the ...

javascriptreactjsreact-hookses6-class

Breaking down an Express app into modules: incorporating a function, a class, and req.pipe

Below are two servers and two gqlServers, each with different functionalities. All combinations of them work. The task at hand is to enhance express with predefined code patterns that can be shared across various apps through additional methods. What com ...

javascriptnode.jsexpress

The module 'react/lib/React' could not be located within the file 'ReactTestUtils.js'

Setting up unit-tests for a React Native project using ReactTestUtils is causing an issue with npm test. The error message I receive is: Cannot find module 'react/lib/React' from 'ReactTestUtils.js' I suspect that my dependencies are ...

javascriptnode.jsreactjs

JavaScript, change syntax from arrow to regular

Currently I'm in the process of learning and grasping JavaScript. In a tutorial video that I'm following, the instructor utilized this specific code snippet: app.post('/content/uploads', (req,res) => { upload(req, res, (err) => ...

javascriptnode.jsexpress

Upon returning to the previous page, the checkbox remains checked and cannot be unchecked

Here is the code I'm using to append checkbox values with a hash in the URL. However, when navigating back, the checkboxes remain checked. Take a look at the code snippet below: <html> <head> <script src="http://ajax.googleapis.com/aja ...

javascriptphpjqueryhtmlcheckbox

Performing an Ajax call in the correct order within an MVC framework

One challenge I face is ensuring that my series of Ajax calls to call stored procedures and load partial views always fire in the correct order. Sometimes, they do not fire as expected due to timing issues. How can I guarantee that these Ajax calls execu ...

javascriptjqueryajaxasp.net-mvcasp.net-mvc-5

Express Js EJS Layouts encountered an issue: No default engine was specified and no file extension was included

Hey there! I'm currently experimenting with implementing Express EJS Layouts in my application. However, as soon as I try to include app.use(expressEjsLayouts), an error is being thrown. The application functions perfectly fine without it, but I reall ...

javascriptnode.jsexpressflash

Utilize React to dynamically load diverse data arrays into a slick slider component

I am currently working on a component that includes a slider displaying photos linked to different rooms. The next step is to move this slider to a separate page or component, which will display content for rooms, news, and promotions using different arr ...

javascriptreactjsreduxslick.js