json 데이터로 HighChart를 그리는 법

Question

저는 그래프에 익숙하지 않고 다양한 그래프 프레임 워크를 사용하고 있습니다. 나는 json 데이터를 가지고 있고 그것으로부터 다중 시리즈 라인 차트를 그리기를 원합니다. 나는 Highchart에서 지금 시도하고있는 d3js를 위해 이것을 가지고 있습니다. 내 문제는 축의 데이터를 중첩하는 방법입니다. casecount - y 축 caseCreatedMonth - a 축 groupName - 라인입니다.

미리 감사드립니다. 나는 그것을 해결되었다

http://jsfiddle.net/j_verma/juj55050/

var data = [{ 
    "groupName": "Casio GzOne", 
     "caseCount": 8, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "GALAXY", 
     "caseCount": 80, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "HTC ", 
     "caseCount": 14, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "LG Mobile Phones", 
     "caseCount": 27, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "Motorola", 
     "caseCount": 29, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "Nokia Lumia", 
     "caseCount": 3, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "Sony Ericsson Xperia", 
     "caseCount": 4, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "Verizon Ellipsis", 
     "caseCount": 18, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "iPhone 5", 
     "caseCount": 29, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "iPhone 6", 
     "caseCount": 33, 
     "caseCreatedMonth": "10-2014" 
}, { 
    "groupName": "Casio GzOne", 
     "caseCount": 4, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "DEFAULT", 
     "caseCount": 32, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "GALAXY", 
     "caseCount": 83, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "HTC", 
     "caseCount": 14, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "HTC ", 
     "caseCount": 7, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "LG Mobile Phones", 
     "caseCount": 14, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "Motorola", 
     "caseCount": 29, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "Nokia Lumia", 
     "caseCount": 3, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "Sony Ericsson Xperia", 
     "caseCount": 3, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "Verizon Ellipsis", 
     "caseCount": 3, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "iPHONE", 
     "caseCount": 14, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "iPhone 5", 
     "caseCount": 13, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "iPhone 6", 
     "caseCount": 16, 
     "caseCreatedMonth": "11-2014" 
}, { 
    "groupName": "DEFAULT", 
     "caseCount": 15, 
     "caseCreatedMonth": "12-2014" 
}, { 
    "groupName": "GALAXY", 
     "caseCount": 22, 
     "caseCreatedMonth": "12-2014" 
}, { 
    "groupName": "Motorola", 
     "caseCount": 3, 
     "caseCreatedMonth": "12-2014" 
}, { 
    "groupName": "Nokia Lumia", 
     "caseCount": 1, 
     "caseCreatedMonth": "12-2014" 
}, { 
    "groupName": "Samsung Galaxy Note", 
     "caseCount": 4, 
     "caseCreatedMonth": "12-2014" 
}, { 
    "groupName": "iPhone 6", 
     "caseCount": 4, 
     "caseCreatedMonth": "12-2014" 
}] 


console.log('Sorting Data'); 
    var groupMap = []; 
    for(var i = 0;i < data.length ; i++){ 
     console.log('Reading '+i); 
     var d = data[i]; 

     if(d == undefined) 
      continue; 
     var arr = groupMap[d.groupName]; 

     if(arr == undefined){ 
      console.log('Adding new '+d.groupName); 
      groupMap[d.groupName] = { 
       name: d.groupName, 
       data: new Array() 
      }; 
      arr = groupMap[d.groupName].data; 
     } else { 
      arr = arr.data; 
      console.log('Not Adding New :' +d.groupName); 
     } 

     arr.push( 
      d.caseCount 
     ); 
    } 
    console.log(groupMap); 
    $('#container').highcharts({ 
      title: { 
       text: 'Request Resolved', 
       x: -20 //center 
      }, 
      subtitle: { 
       text: '', 
       x: -20 
      }, 
      xAxis: { 
       categories: ['10-2014', '11-2014', '12-2014', ] 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Case Count' 
       } 
      }, 
      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0 
      }, 
      series:groupMap 
     }); 


    }); 

Answer 1

jsfiddle 링크. 비슷한 문제가있는 사람이면 누구나이 피들을 확인할 수 있습니다.

http://jsfiddle.net/j_verma/juj55050/2/

$ (함수() {

var seriesData = []; 
    var xCategories = []; 
    var i, cat; 
    for(i = 0; i < jsonMonthData.length; i++){ 
     cat = '' + jsonMonthData[i].caseCreatedMonth; 
     if(xCategories.indexOf(cat) === -1){ 
      xCategories[xCategories.length] = cat; 
     } 
    } 
    console.log(xCategories); 

    for(i = 0; i < jsonMonthData.length; i++){ 

if(seriesData){ 

    var currSeries = seriesData.filter(function(seriesObject){ return 

seriesObject.name == jsonMonthData [I] .groupName});

if(currSeries.length === 0){ 

     seriesData[seriesData.length] = currSeries = {name: 

jsonMonthData [i] .groupName, data : []}; 다른

} 

다른 {

 currSeries = currSeries[0]; 

    } 

    var index = currSeries.data.length; 

    currSeries.data[index] = jsonMonthData[i].caseCount; 

} 

{

seriesData[0] = {name: jsonMonthData[i].groupName, data: 

    [jsonMonthData[i].caseCount]} 

} 

};

 $('#container').highcharts({ 

      title: { 
       text: 'Request Resolved', 
       x: -20 //center 
      }, 

      subtitle: { 
       text: '', 
       x: -20 
      }, 

      xAxis: { 
       categories: xCategories 
      }, 
      yAxis: { 
       min: 0, 
       title: { 
        text: 'Case Count' 
       } 
      }, 

      legend: { 
       layout: 'vertical', 
       align: 'right', 
       verticalAlign: 'middle', 
       borderWidth: 0 
      }, 

      series:seriesData 

     }); 

});