How can I assign multiple series from my json data? Highcharts - json

Question

UPDATE(2):
I got it to work so here is the working fiddle. See below for my solution. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
UPDATE(1):
I've continued working on it and here is my updated fiddle. I think I'm overriding my variable/data values each time I loop through. Any help is greatly appreciated.
ORIGINAL POST:
I have a jsfiddle here that shows what I'm trying to do.
I have a series of data in json format that has multiple objects(i.e.,
[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]}
]
)
and am graphing with HighCharts line graphs. Instead, I'd like to define the series data to objects from multiple subtasks all on the same graph. (the variable is better shown in the jsfiddle link)
[
{"subtask":"id1", "":[
{"name":"name1", "data":[[0,4.3],[1,2.47],[2,0.2],etc.]},
{"name":"name2", "data":[[0,3.5],[1,2.12],[2,0.1],etc.]}
]
},
{"subtask":"id2", "":[
{"name":"name1", "data":[[0,4.1],[1,2.23],[2,0.4],etc.]},
{"name":"name2", "data":[[0,3],[1,2.62],[2,0.15],etc.]}
]
}
]
and I'd like the graph to draw a line for each name/data for each subtask (i.e., the graph draw a line for id1.name1.data, id1.name2.data, id2.name1.data, and id2.name2.data)

Answer 1

My Solution:
I got it to work so here is the working fiddle. If you know of any other solutions, let me know. Thanks! otherwise...feel free to use this example :)
// what currently works
var jsonFormatThatWorks = [{
"name": "name1",
"data": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"name": "name2",
"data": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
// format I want/need to be able to access/graph
var jsonFormatIWant = [{
"p1": "12345",
"taskName": "z-echo",
"taskData": [{
"subTaskId": "z8-echo",
"someTaskStatus": "Rejected",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 90.80],
[20, 80.37],
[30, 75],
[40, 66],
[50, 33],
[60, 15],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 23],
[20, 15],
[30, 11],
[40, 8.5],
[50, 6.2],
[60, 3.44],
[70, 0.7],
[80, 0.5]
]
}
]
},
{
"subTaskId": "z9-echo",
"someTaskStatus": "Accepted",
"someTaskData": [{
"objectId": "name1",
"objectData": [
[0, 100],
[10, 70.02],
[20, 60.7],
[30, 45.3],
[40, 35],
[50, 32],
[60, 14],
[70, 0]
]
},
{
"objectId": "name2",
"objectData": [
[0, 100],
[10, 30],
[20, 13],
[30, 8],
[40, 7.5],
[50, 5.2],
[60, 4.54],
[70, 0.3],
[80, 0.01]
]
}
]
}
]
}]
// my chart
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: 'xy',
panning: true,
panKey: 'shift'
},
xAxis: {
title: {
text: 'Some X Label'
},
crosshair: true
},
plotOptions: {
series: {
marker: {
radius: 1
},
allowPointSelect: true
}
},
yAxis: {
labels: {
format: '{value} %'
},
floor: 0,
ceiling: 100,
title: {
text: 'Value (%)'
},
crosshair: true,
gridLineDashStyle: 'ShortDash',
gridLineColor: '#aaaaaa'
},
title: {
text: 'Sample Chart'
},
subtitle: {
text: 'Click and drag to zoom in. Hold down shift key to pan.'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: seriesOptions
};
var chart = new Highcharts.Chart(options);
});
var seriesOptions = [],
seriesCounter = 0
var data = jsonFormatIWant[0]
var taskData = data.taskData
taskData.forEach(function(element, i) {
element.someTaskData.forEach(function(childElement, j) {
seriesOptions[seriesCounter] = {
//task: element.subTaskId,
name: element.subTaskId + "_" + element.someTaskData[j].objectId,
data: element.someTaskData[j].objectData
}
seriesCounter += 1
//console.log(seriesCounter)
childElement.objectData.forEach(function(grandChildElement, h) {})
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<!-- I'd like to be able to graph each objects data for each subTask
(i.e., z8-echo and z9-echo from the data jsonFormatIWant variable beneath the chart definition)
something like: taskData[0].someTaskData and taskData[1].someTaskData -->