2 Replies Latest reply on Mar 12, 2015 9:53 AM by barryh46566004

    JSON into array and then CSS styling with data

    barryh46566004

      Hello,

       

      I'm desperate to solve this little problem creating a bar chart and I think my coding ability is letting me down. I have a simple .js file which contains a JSON object as follows:

       

      var bars = [

           {"type" : "data1",  "total" : 5},

           {"type" : "data2",  "total" : 10},

           {"type" : "data3",  "total" : 30}

      ];

       

      I have added this file to EA's scripts. I now want to pull all the "total" data into an array. Would the following work?

       

      var totals = new Array();

      for (i=0, i<3, i++) {

           totals[i] = bars[i].total;

      }

       

      Once I have my array populated with the data I would like to use that data to set the heights of some elements. How do I put a variable into CSS code? For example:

       

      var elementHeight = 30;

      sym.$("element").css({"transform" : "scaleY(elementHeight)"});

       

      I can get this second line to work with just a number but I don't know how to pass a variable. Any help would be a lifesaver to a desperate man.

       

      Many thanks

       

      Barry

        • 1. Re: JSON into array and then CSS styling with data
          proberts Level 2

          You're not referencing the variable in the example you posted, but rather defining the transform-scaleY as "elementHeight".


          sym.$("element").css({ "transform" : "scaleY(" + elementHeight + ")" });

          • 2. Re: JSON into array and then CSS styling with data
            barryh46566004 Level 1

            Thank you so much! I really appreciate that.

             

            That's one problem solved. I really struggle to find these little details sometimes.

             

            Now that I can use my variables in the css, any advice on how to populate my array?

             

            Here is the JSON in the js file I have attached to my EA session.

             

            var bars = [

                 {"type" : "data1",  "total" : 5},

                 {"type" : "data2",  "total" : 10},

                 {"type" : "data3",  "total" : 30}

            ];

             

            How do I access this data to transform the "scaleY" value for multiple elements through a for loop? My guess would be:

             

            for (var i=0, i<3, i++) {

                 sym.$("element" + i + " ").css({ "transform" : "scaleY(" + bars[i].total + ")" });

            }

             

            Is this correct?

             

            Thanks again.