We Keep Coding

Unable to output useState to imported chart

I have a simple form where i will add a task and add the amount of minutes that task has taken, i am having trouble trying to get the chart which i have imported from 'Recharts' to see the state, it looks like the state is returning an empty array and my chart is not seeing the data.
The Recharts chart takes an array with an object inside with two values, example shown below
const data = [
{ name: "Group A", data: 400 },
{ name: "Group B", data: 300 },
{ name: "Group C", data: 300 },
{ name: "Group D", data: 200 },
{ name: "Group E", data: 278 },
{ name: "Test Data", data: 189 }
];
However after i have moved my state as props to the component and mapped the result to take the same names as input the charts is not displaying anything
(my mapped props)
const activityData = [
...props.pieData.map(el => ({
name: el.title,
data: el.amount
}))
];
I have put a simplified version on codesandbox to make it a little bit easier if anyone wants to see the output i'm getting
https://codesandbox.io/s/hidden-dew-676xc

Found the issue as soon as i posted this, the 'data' value which i had mapped in my props was getting outputted as a string, when the object was expecting a number

How to change randomised data used for graph values with my input data? D3js donut graph

I am fairly new to coding and I need to use d3js library to make graphs. While I get the basics, I don't yet comprehend the whole thing...
So, I found this graph in D3js examples that i want to use. but don't know how to change data showing in graph. I want donut chart to have my input data instead of randomised data as it is shown in example
http://bl.ocks.org/dbuezas/9306799
This is a graph I want to use.

the key function is change(), just replace randomData() to getYourData()
function getYourData() {
let yourData = [
{
label: 'label1',
value: 12,
},
{
label: 'label2',
value: 6,
}
]
return yourData;
}
change(getYourData());

Hopefully you can understand this syntax more easily
change([ { label: "Label 1", value: 10 },
{ label: "Label 2", value: 20 },
{ label: "Label 3", value: 30 } ])
The function change takes an array of objects, each object is a segment of the pie graph.

How to make multiple api calls to display a single data in a d3 chart

I'm trying to display a data in a chart using d3, by making 2 separate api calls with same data but different dates.
1st api call:
var data1 = { 'name' : 'test',
'id' : 7948237982937,
'startDate': startDate1,
'endDate': endDate1,
'tz': getTimezoneOffset() };
var data2: { 'name' : 'test',
'id' : 7948237982937,
'startDate': startDate2,
'endDate': endDate2,
'tz': getTimezoneOffset() };
I'm trying to make the calls and display the graph as follows:
Where the bold line represents one set of start and end dates (startDate1 and endDate1) and the dotted line represents the second set of start and ends dates(startDate2 and endDate2).
i tried this:
draw: function(){
getData();
getData2();
},
getData: function() {
var self = this;
self.showLoading();
$.get('url', data1, function(response) {
console.log("success" + response);
});
},
getData2: function() {
var self = this;
self.showLoading();
$.get('url', data2, function(response) {
console.log("success" + response);
});
}
However this does not work for me at all...it just displays only one data info in the graph.
EDIT:::::
This is what i tried with the given ex below: I have rest call that returns data in this format: all the data is similar except for the date..
data: //returns
Object {sale: "202", year: "2000", date: "12"}
data2: //returns
Object {sale: "202", year: "2000", date: "24"}
Now when i tried accessing the lineGen(data), it returns null.
http://jsfiddle.net/nv4x78t6/
and I see no data displayed...

You have two data sets and two lines. This means you want one path to be drawn using data1, and another path to be drawn using data2.
Here's an example. At the end, he just appends a second svg:path to the chart and draws data2 on it.
http://code.tutsplus.com/tutorials/building-a-multi-line-chart-using-d3js--cms-22935
In your case you probably want to pre-insert two paths, and add classes to them like "seriesOneLine" and "seriesTwoLine". Then always draw your "getData" response into "seriesOneLine", and always draw your "getData2" into "seriesTwoLine".
I can't really be more specific without seeing some of your rendering code.
Edit (after question update)
Your fiddle data is two series with one data point each. You are trying to draw a line chart with a single point. I changed your data to this:
var data = [{
"sale": "202",
"year": "2000",
},{
"sale": "200",
"year": "2001"
}];
var data2 = [{
"sale": "202",
"year": "2000",
}, {
"sale": "140",
"year": "2001"
}];
And two lines showed up.

GetOrgChart: Nodes whose parent haven't been defined

I'm using the GetOrgChart JQuery plugin and running into a JavaScript error of:
Uncaught Type Error: Cannot read property '_ap' of null
I was able to determine that this is occurring in the case from my dataset where a user occurs earlier in the list than their manager does. My hierarchy is based around NTLogins, so the NTLogin of a given user is the id and the parentId is their manager's NTLogin.
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: "bobeans125",
parentId: null,
Name: "Bob Beans"
}, {
id: "franklin884",
parentId: "tdawl756",
Name: "Frank Lin"
}, {
id: "tdawl756",
parentId: "bobeans125",
Name: "Tim Dawl"
}]
});
JSFIDDLE Demo
I have no good way that I can think of to order the data so that this doesn't occur other than finding all of the many root nodes and drilling down into the hierarchy manually so that the dataset being sent to GetOrgChart is ordered. However, the assumption of not having to do so was the primary driver for choosing GetOrgChart.

I ended up just recursively walking the tree and building the object in the right order. I was able to get it to load without error, however, the tree is too large to be displayed and requires being zoomed out too far to be useful.

Id : and ParentId: is integer value but you gave string value so your output is Error: Cannot read property '_ap' of null.
Correct Example:
$("#people").getOrgChart({
primaryColumns: ["Name"],
dataSource: [{
id: 1,
parentId: null,
Name: "Bob Beans"
}, {
id: 2,
parentId: 1,
Name: "Frank Lin"
}, {
id: "3",
parentId: "1",
Name: "Tim Dawl"
}]
});

Can handontable pivot data

Handsontable really fits my needs when it comes to UI interaction. But was wondering if it can also pivot data.
I have Json data that looks like this:
var objectData = [
{id: 1, name: "Ted Right", gender: "male"},
{id: 2, name: "Bill Allan", gender: "male"},
{id: 1, name: "Joan Well", gender: "female"},
{id: 2, name: "Jane Doe", gender: "female"}
];
where id value should be the row name and the gender value should be the column header and the name is the value in the table.

I'm not sure it's possible natively within the framework, but it looks like you can dynamically pass an array containing the column definitions to the table instance while creating it, so you could potentially handle it that way in javascript - you might want to check out this example.
How to create dynamic columns for Handsontable?
Old thread I know, but it's the first one that comes up for handsontable pivot table, so hopefully this helps someone.

To set custom row/column headers, have a look here:
http://handsontable.com/demo/renderers_html.html#header
Portion from above page:
$container.handsontable({
colHeaders: [
"<b>Bold</b> and <em>Beautiful</em>",
"Some <input type='checkbox' class='checker'> checkbox"
]
})