parse JavaScript object to render highcharts

Question

I am trying to parse the following JavaScript object to fill a Highcharts grouped chart. I am using python flask framework here but looks like parsing this would be best done if I do it all in JavaScript. Unfortunately Im very new to JavaScript and not sure how to proceed to parse this correctly.

To add to this im looking to get the following arrays

action_count, action_list as well as find a way to pass the created_month and year. Probably would have to combine these two things since its two different components in this object.

here is JSFiddle of what im looking to achieve. jsfiddle.net/4bpjw0uq/6

# JSON Object I am trying to Parse.
 {
  "api_response": {
    "total_counts": [
      {
        "created_month": 2, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          16, 
          8, 
          0, 
        ], 
        "action_list": [
          "action 1", 
          "action 2", 
          "action 3", 
          "action 4", 
        ], 
        "total_monthly_actions": 27
      }, 
      {
        "created_month": 3, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          53, 
          50, 
          6, 
        ], 
        "action_list": [
            "action 1", 
            "action 2", 
            "action 3", 
            "action 4"
        ], 
        "total_monthly_actions": 154
      },       
    ], 
    "total_installations": 527
  }
}

Here is the highcharts example

    <div class="jumbotron text-center">
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>

        <script>


            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Actions'
                },
                xAxis: {
                    categories: [
                        '2-17',
                        '3-17',
                        '4-17',
                    ],
                    crosshair: true
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'action 1',
                    data: [49.9, 71.5, 106.4, 129.2]

                }, {
                    name: 'action 2',
                    data: [83.6, 78.8, 98.5, 93.4]

                }, {
                    name: 'action 3',
                    data: [48.9, 38.8, 39.3, 41.4]

                }, {
                    name: 'action 4',
                    data: [42.4, 33.2, 34.5, 39.7]

                }]
            });

        </script>
    </div>

Take care when spelling JavaScript to avoid search collision with Java. — Basil Bourque
– Basil Bourque, Commented Sep 20, 2017 at 21:54

Vinnie James · Accepted Answer · 2017-09-21 00:43:19Z

1

Something like this will work:

const api =  {
  "api_response": {
    "total_counts": [
      {
        "created_month": 2, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          16, 
          8, 
          0, 
        ], 
        "action_list": [
          "action 1", 
          "action 2", 
          "action 3", 
          "action 4", 
        ], 
        "total_monthly_actions": 27
      }, 
      {
        "created_month": 3, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          53, 
          50, 
          6, 
        ], 
        "action_list": [
            "action 1", 
            "action 2", 
            "action 3", 
            "action 4"
        ], 
        "total_monthly_actions": 154
      },       
    ], 
    "total_installations": 527
  }
};

const createHighChartData = (apiResponse) => {
  let series = [];
  const totalCounts = apiResponse.api_response.total_counts;
  //console.log(apiResponse.api_response.total_counts);

  let temp = []
  totalCounts.map((counts) => {
    //console.log(counts.action_counts);
    const actionCounts = counts.action_counts;
    actionCounts.map((action, i) => {
      //console.log(action, i);
      if (temp[i]){
       temp[i].push(action);
      } else {
        temp.push([action])
      }
    })
  })
  //console.log(temp);

  temp.map((dp, i) => {
    series.push({
      name: "Action " + (i + 1),
      data: dp
    })
  })

  console.log(series);
  return series
}

createHighChartData(api);

edited Sep 21, 2017 at 0:43

answered Sep 20, 2017 at 22:53

Vinnie James

6,0826 gold badges48 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Max Powers Over a year ago

First off thanks so much for your help. To share more insight on on the grouping and how im trying to build the chart. if you look at the JSON object each month has two arrays action_count and action_list for every month im trying give the action list with the count

Max Powers Over a year ago

I also created this jsfiddle to show what i'm trying to do as it might be a bit difficult to explain jsfiddle.net/4bpjw0uq/3

Vinnie James Over a year ago

Your fiddle doesnt make much sense either, action 4 data is [42.4, 33.2, 34]. You dont have those values anywhere in the response

Max Powers Over a year ago

Let me update the jsfiddle example to be more clear.

Max Powers Over a year ago

Thanks You! Thank You! Thank You. I cant thank you enough for this help. I really appreciate your help.

|

Collectives™ on Stack Overflow

parse JavaScript object to render highcharts

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related