Skip to main content
Participant
April 23, 2015
Question

How do I use a json file to animate a bar graph?

  • April 23, 2015
  • 2 replies
  • 4706 views

I am very new to javascript, so forgive me if my terminology is wrong.

I have created a json file with all of the data for a bar graph.

How do I bring it into after effects to be able to parse the data and use it to drive my animations?

Here is an example. The three sections move independently, and dynamically adjust to each other.

I have a Null Object that I am using to control the bars.

What I want to be able to do is parse the data from the json, so that all updates to the data can be made in the json file instead of adjusting each individual slider for each bar.

This topic has been closed for replies.

2 replies

markush95319924
Participant
November 21, 2018

Maybe this question/answer is as easy as this:

To import the JSON file

Just import it to your project panel as any other footage. File - import.

To connect to the data

myData = footage("myJasonFile.json").sourceData;

Depending on the structure of your JSON file you can extract the data from the variable myData like this:

myData.City.Stockholm.Price;

or if it's an array, perhaps:

myData[2].Price;

Use a validator for your JSON file if you have problems getting the data. It might be a comma (,) at the wrong place. And be sure to use dots (.) for decimals and not commas (,)

Best wishes

Markus

Alex White
Legend
April 24, 2015

Here is super useful tutorial from Lloyd about interacting with JSON files:

http://aescripts.com/learn/After-Effects-Scripting-JSON-Tutorial/

After you`ll import JSON file, I think you can use such construction to change your values:

var theComp = app.project.activeItem;

var DataBar01 = theComp.layer("Data Controls").effect("Data Bar01")("Slider"); // grab slider

var time =  1 // specify where you want to set graph value

var jsonBar01 =  jsonFile.bar01;    // parsed value from JSON

DataBar01.setValueAtTime(time, jsonBar01);    // set keyframe

/*or apply several values at different time with*/

DataBar01.setValuesAtTimes(time, jsonBar01);    // where "time" is an array with your time and "jsonBar01" is an array with value

jbone1543Author
Participant
April 24, 2015

I went through this video once before, I guess this is where I don't fully understand what is going on. He outputs a file around 4:30 then as he says "pretifies" it at 5:45, but then I guess this is where I don't fully understand what is going on. He then change the code to do the open, read and parse function. How does all of this interact with After Effects? I guess my first question, what do I do with the first json fille that is created? You said I need to import it, here is my ignorance, how do I do that?

Alex White
Legend
April 24, 2015

He "pretifies" data for output. You don`t need it for now, because you gonna read the file.

After importing the file you can work with it as JavaScript Objects .


If it is still hard, you can send example of your json file that I could provide you live example.