score:1
in this case, you need some custom data formatting. below you may find the code which takes the .csv data you provided us before, then parses it, groups and formats. after that creates gantt project chart. this code helps to get the data structure you want.
//parse .csv data and group by workstation_id
d3.csv("data.csv", function (data1) {
var workstation = d3.nest()
.key(function (d) {
return d.workstation_id;
})
.entries(data1);
//get formatted data as a tree
var formatteddata = formatdata(workstation);
console.log(formatteddata);
//set formatted data as a tree
var treedata = anychart.data.tree(formatteddata, "as-tree");
// chart type
chart = anychart.ganttproject();
// set data for the chart
chart.data(treedata);
// set container id for the chart
chart.container('container').draw();
// fit all visible data to timeline.
chart.fitall();
});
//helper function to format data in apropriate way
//to set to the gantt chart
function formatdata(data) {
var outputdata = [];
data.foreach(function (item) {
var itemobj = {};
itemobj['name'] = item['key'];
itemobj['children'] = [];
var childs = item['values'];
for (var i = 0; i < childs.length; i++) {
var childobj = {};
childobj['name'] = 'order id: ' + childs[i]['order_id'] + '-' + i;
childobj['actualstart'] = new date(childs[i]['scheduledtime']).gettime();
childobj['actualend'] = childobj['actualstart'] + childs[i]['duration(seconds)'] * 1000;
childobj['order_id'] = childs[i]['order_id'];
itemobj['children'].push(childobj);
}
outputdata.push(itemobj);
});
return outputdata;
}
below is a screenshot of the chart which is built by this code.
Source: stackoverflow.com
Related Query
- convert multilevel nested array using into json using javascript
- Convert Clusterfck array to JavaScript InfoVis Toolkit json hierarchical
- Sum of nested JSON array using D3 .rollup
- How do you call data from nested JSON array using d3?
- How to manipulate JSON objects into an array with javascript
- Convert a JSON parsed array containing dates to array type date Javascript
- Javascript returns undefined when indexing into an array using a property of an object
- convert a nested JSON file to a table using D3
- How to access a nested key in json using javascript
- Extracting data from excel sheet into csv (or) Json using Javascript
- How to convert DataFrame into nested JSON
- render bar charts in javascript using svg and 2D array from json
- Convert JSON made by PHP "json_encode", into array to plot those values with D3
- How can we create multi column table using multi array JSON using d3 and crossfilter javascript frameworks
- How to update and insert into databse using PHP when array in Javascript is updated?
- Retrieving Keys from JSON Array key-value pair dynamically - Javascript
- Using JSON data in D3 Javascript visualisation
- How to divide a map into zipcodes using d3, javascript, and a json file?
- Turn a JSON array of arrays into <ul> and <li> elements
- How to count and convert an array with specific condition javascript
- Using D3.js with a javascript object instead of an external JSON file
- How do I read a CSV file into an array using d3js v5
- Javascript manipulate data into array of object for d3 stacked chart
- Using D3 to access nested JSON data
- How do I access values in a d3 json file with nested array objects
- How would I import a single column CSV file into a pie chart using Javascript D3?
- Creating a D3 Line Graph with Points using 2 Level Nested JSON
- Nested JSON array and D3JS
- How to convert d3.value() iterable and d3.rollup from javaScript into TypeScript
- Convert Javascript object to array of numbers
More Query from same tag
- Resize the SVGs according to windows size
- Transition a chart dependent on another chart
- Why do I get JavaScript undefined property in Observable but not in HTML?
- D3.js how it's done?
- d3 Network with Multiple Links in the Same Direction
- How to view axis label and values in d3 js bar chart?
- D3.js Multiple GeoJSON objects
- accessing d3js visualizations offline
- Using D3, how can I update circles on a map after panning?
- in nvd3 multibarchart, some stacks lose their colors or otherwise become invisible
- Custom x-axis labels in d3 bar charts?
- Update multi-line graph with D3
- d3 classed() not working as expected with multiple classes?
- d3 Selection merge error in TypeScript: Types of property 'merge' are incompatible
- Search functionality in a d3.js graph
- D3: hide voronoi strokes that fall 'in the sea'
- Legend not aligned properly in d3 responsive chart
- Need assistance with adding text into nodes in codeflower graph via D3.js
- D3 Parent Node index parameter returning Zero for additional enter() data
- D3 Sankey link scaling issue
- D3 Leaf Nodes - many elements overlaps
- d3js: make new parent data descend into child nodes
- Bullet Chart Example
- Cannot click div when it overlays clickable d3 elements
- javascript d3 visualization doesn't load/appear until clicking HTML input
- d3.js: Text too sharp
- Fill the inside of a pie donut chart d3
- Explain d3js projection fundamentals
- Group time intervals by date (in d3.js)
- D3.JS Bar chart rounded corners