CODEWITHSUNDEEP
javascriptarraysjsonhighcharts
Sr070960
Sr070960

Reputation: 67

parsing JSON data to render high chart graph

This is my Sample Json, I am trying to display this data as a high charts graph,

My plan is to choose battery Average on Y-axis and on x-axis os-version.

So I can compare each model with all os-versions.

For example, As shown in the image

values as battery average city names will be as Os-version, each projected bar in the graph is same model but with diffrent OS version.

I could not figure it out how to parse Json data to display as it in the graph

enter image description here

[
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "100",
      "sampleyqty": "42"
   },
   {
      "model": "LG-H961S",
      "osversion": "6.0",
      "batteryavg": "98",
      "sampleyqty": "73"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "5.1.0",
      "batteryavg": "50",
      "sampleyqty": "53"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.2.0",
      "batteryavg": "100",
      "sampleyqty": "55"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "6.0",
      "batteryavg": "20",
      "sampleyqty": "9"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "98",
      "sampleyqty": "4"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "12",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "46",
      "sampleyqty": "64"
   },
   {
      "model": "F5121",
      "osversion": "6.0.1",
      "batteryavg": "94",
      "sampleyqty": "15"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "34",
      "sampleyqty": "55"
   },
   {
      "model": "SM-A500F",
      "osversion": "5.0.2",
      "batteryavg": "44",
      "sampleyqty": "33"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "74",
      "sampleyqty": "81"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "75",
      "sampleyqty": "62"
   },
   {
      "model": "REDMI NOTE 3",
      "osversion": "5.0.2",
      "batteryavg": "13",
      "sampleyqty": "12"
   },
   {
      "model": "GOOGLE NEXUS 5",
      "osversion": "5.1",
      "batteryavg": "87",
      "sampleyqty": "72"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "52",
      "sampleyqty": "21"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "85",
      "sampleyqty": "34"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "56",
      "sampleyqty": "51"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "56",
      "sampleyqty": "11"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "86",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6",
      "osversion": "7.0",
      "batteryavg": "88",
      "sampleyqty": "11"
   },
   {
      "model": "SAMSUNG GALAXY S6",
      "osversion": "5.0",
      "batteryavg": "23",
      "sampleyqty": "84"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "7.1.1",
      "batteryavg": "87",
      "sampleyqty": "12"
   },
   {
      "model": "SAMSUNG GALAXY S6",
      "osversion": "5.0",
      "batteryavg": "65",
      "sampleyqty": "42"
   },
   {
      "model": "GOOGLE NEXUS 4",
      "osversion": "5.1",
      "batteryavg": "56",
      "sampleyqty": "32"
   },
   {
      "model": "LG-H961S",
      "osversion": "6.0",
      "batteryavg": "64",
      "sampleyqty": "54"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "53",
      "sampleyqty": "17"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "75",
      "sampleyqty": "32"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "64",
      "sampleyqty": "52"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "64",
      "sampleyqty": "22"
   },
   {
      "model": "ALE-L21",
      "osversion": "5.0.1",
      "batteryavg": "76",
      "sampleyqty": "52"
   },
   {
      "model": "HUAWEI MT7-TL10",
      "osversion": "6.0",
      "batteryavg": "53",
      "sampleyqty": "4"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "43",
      "sampleyqty": "51"
   },
   {
      "model": "HUAWEI MT7-TL10",
      "osversion": "6.0",
      "batteryavg": "22",
      "sampleyqty": "20"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "32",
      "sampleyqty": "31"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "74",
      "sampleyqty": "13"
   },
   {
      "model": "F5321",
      "osversion": "6.0.1",
      "batteryavg": "86",
      "sampleyqty": "52"
   },
   {
      "model": "NEXUS 5",
      "osversion": "6.0",
      "batteryavg": "54",
      "sampleyqty": "22"
   },
   {
      "model": "NEXUS 6P",
      "osversion": "6.0",
      "batteryavg": "77",
      "sampleyqty": "32"
   },
   {
      "model": "GOOGLE NEXUS 5X",
      "osversion": "7.0",
      "batteryavg": "99",
      "sampleyqty": "12"
   }
]

I am expecting userSeriesData data as 

[{
    "data": [
        ["GOOGLE NEXUS 5X", 100],
        ["NEXUS 6P", 77],
        ["HUAWEI MT7-TL10", 53],
        ["LG-H961S", 64],
        ["GOOGLE NEXUS 5", 20],
        ....,
        ....,
        so on

    ],
    "osversion": "6.0"
},{
    "data": [
        ["GOOGLE NEXUS 5X", 50],
        ["GOOGLE NEXUS4", 98],
        ["GOOGLE NEXUS 5", 34],
        ....,
        ....,
        so on

    ],
    "osversion": "5.1.0"
}]

This is how i started: 

const userSeriesData = userData.reduce((topAccum, parent, index) => {
    if (parent && Object.keys(parent).length > 0) {
        const childReduce = Object.keys(parent).reduce((childAccum, child, i) => {
            childAccum.osversion = parent['osversion']
            childAccum.data.push(parent['modelcode'], parent['sampleqty'])
            return childAccum
        }, {
            osversion: '',
            data: []
        })
        topAccum.series.push(childReduce)
    }
    return topAccum;
}, {
    series: []
})

JFYI: Sample JSON is dummy data, but it will look more or less same, with random OS versions, model number, battery average values

Thank you so much for your help.

Upvotes: 1

Views: 2341

Answers (2)

stpoa
stpoa

Reputation: 5573

Here is a complete solution using part of your data:

const json = [{
  "model": "GOOGLE NEXUS 5X",
  "osversion": "7.0",
  "batteryavg": "100",
  "sampleyqty": "42"
}, {
  "model": "LG-H961S",
  "osversion": "6.0",
  "batteryavg": "98",
  "sampleyqty": "73"
}, {
  "model": "GOOGLE NEXUS 5X",
  "osversion": "5.1.0",
  "batteryavg": "50",
  "sampleyqty": "53"
}, {
  "model": "NEXUS 6P",
  "osversion": "6.2.0",
  "batteryavg": "100",
  "sampleyqty": "55"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "6.0",
  "batteryavg": "20",
  "sampleyqty": "9"
}, {
  "model": "GOOGLE NEXUS 4",
  "osversion": "5.1",
  "batteryavg": "98",
  "sampleyqty": "4"
}, {
  "model": "NEXUS 6P",
  "osversion": "7.1.1",
  "batteryavg": "12",
  "sampleyqty": "22"
}, {
  "model": "NEXUS 6P",
  "osversion": "7.1.1",
  "batteryavg": "46",
  "sampleyqty": "64"
}, {
  "model": "F5121",
  "osversion": "6.0.1",
  "batteryavg": "94",
  "sampleyqty": "15"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "34",
  "sampleyqty": "55"
}, {
  "model": "SM-A500F",
  "osversion": "5.0.2",
  "batteryavg": "44",
  "sampleyqty": "33"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "74",
  "sampleyqty": "81"
}, {
  "model": "GOOGLE NEXUS 4",
  "osversion": "5.1",
  "batteryavg": "75",
  "sampleyqty": "62"
}, {
  "model": "REDMI NOTE 3",
  "osversion": "5.0.2",
  "batteryavg": "13",
  "sampleyqty": "12"
}, {
  "model": "GOOGLE NEXUS 5",
  "osversion": "5.1",
  "batteryavg": "87",
  "sampleyqty": "72"
}, {
  "model": "GOOGLE NEXUS 5X",
  "osversion": "7.0",
  "batteryavg": "52",
  "sampleyqty": "21"
}]

// Create categories object in order to remove duplicates
const cats = {}
json.forEach((o) => cats[o.model] = 1)
const categories = Object.keys(cats)

// Parse your data
let series = json.reduce((acc, o) => {
    // Check if array already defined
    if (acc[o.osversion] && acc[o.osversion].data) {
      // Push to array new values
      acc[o.osversion].data.push({x: categories.indexOf(o.model), y: Number(o.batteryavg)})
    } else {
      // Create new array with first value
      acc[o.osversion] = { data: [{x: categories.indexOf(o.model), y: Number(o.batteryavg)}] }
    }
    return acc
  }, {})

// Convert object to array
series = Object.keys(series).map((key) => {
series[key].name = key
  return series[key]
})

series = series.map(serie => {
serie.data.sort((a, b) => a.x - b.x)
  return serie
})
console.log(series, categories)

// Chart options
const options = {
xAxis: { categories: categories },
chart: { type: 'column' },
  series: series
}

// Create chart
const chart = Highcharts.chart('container', options)

Live example: https://jsfiddle.net/t698oqmm/

Example output: enter image description here

Upvotes: 2

Rafael Castelani
Rafael Castelani

Reputation: 100

$.ajax({
                type: 'post',
                url: "Relatorios/getJobsPie",
                data:  { "startDate" : datastart, "endDate": dataend , "cliente" : $("#cliente").val() , 'statusjob':$("#status").val()  , 'search' :$("#search").val()},
                success: function($response) {
                        response = $.parseJSON(reponse);
                        var objects =[];
                        $.each(response, function(k, v) {
                            var date = new Date(v.data_conclusao);
                            objects.push([date.getMonth(), v.qnt.toNum()]);
                        }); 

                        var datos = [{
                            name: 'Name',
                            data: objects      
                        }];     

                        $('.piechart').highcharts({
                            chart: {
                                marginTop: 80,          
                                type: 'column',
                                spacingLeft: -15
                            },
                            title: {
                                text: ''
                            },      
                            series: datos
                        })                          

                }
            });

Upvotes: 0

Related Questions