1

I am wondering and sadly I don't know where else to ask the question.

I want to make a interactive chart using the top 5 downloaded movies. And the current box office top 5. How i'm going to make this interactive is beyond me yet.

What I would like to know first is, if there is any way to manipulate or change the given chart from Mojo.

Right now I use: http://boxofficemojo.com/about/data.htm

With the code given by Mojo: 

<script type="text/javascript" language="javascript" src="http://www.boxofficemojo.com/data/js/wknd5.php?h=myclass1&r=myclass2"></script>

This just shows me the top 5 (see example at the previously provided URL). Is there any way that I can use that chart and make a, pie chart or any other chart or graph out of it?

And if this is possible will it still update with money and new movies every time the site does, like the given chart with the javascript code does right now?

Hopefully someone can help me or maybe has a different way of making a chart/graph out of this data (the box office top 5).

So to be more clear. I would like to create my own chart/graph with the box office top 5 data. And I would also like it to be "live" and update itself when ever the top 5 changes or the numbers change. There for it doesn't seem like the best idea to create my own Json with data since it won't update when the data updates without me making changes into the Json file. The interactive part doesn't matter yet.

Xereoth
  • 47
  • 8
  • Are you looking to stick with pure Javascript? There's loads of Javascript libraries out there that are used solely for data visualization; for instance, Data Driven Documents, Highcharts, etc. – alex Dec 29 '14 at 21:16
  • @alex It doesn't really matter that much. As long as I end up with a data visualisation that eventually will be interactive + it needs to show a story. It this case I chose the story to compare the downloads and how it influences the money a movie makes. The important thing is that I there for need to be able to manipulate the data feed of the top 5 from the box office. How ever I don't know how to do it since it's not just a CSV/Json or RSS feed etc. If it's possible at all to change or use the data given with this javascript code to create a different chart/graph – Xereoth Dec 29 '14 at 21:18
  • 1
    Interactivity means a million things, can you be more specific. Anyway you could use [Chart.js](http://www.chartjs.org/). You should create your data structures - arrays,K-V pairs whatever you need - from the feed you are getting. First create the data and store it in variables and then proceed to visualize the data you created using the Charts. That's how it *usually* works – nicholaswmin Dec 29 '14 at 21:19
  • @NicholasKyriakides obviously interactivity means a million things. But that is not what I'm asking. What I am asking is if there's anyway to use the data/javascript code given by Mojo's box office to create a new/self styled chart of graph without entering the data in a Json or something and using it that way. (since it won't be live data anymore and I would like it to update itself with new movies (like the RSS feed from my top 5 downloads will do) – Xereoth Dec 29 '14 at 21:22
  • you will build the `JSON` yourself. You are getting the data in a format that you need to process yourself in Javascript to get the desired results. The `JSON` you've built can then be passed into a chart library to visualize it. Obviously the feed does not give you what you want in the exact format that you want it so you'd have to do it yourself by reading that feed and calculating/filtering what you really need to show. Thing is, that feed you are including is creating the charts for you. So it doesn't directly provide a feed for you. I'd look around for a better feed that just spits data – nicholaswmin Dec 29 '14 at 21:24
  • @NicholasKyriakides I was afraid of that. The issue is the assignment needs to be "live" so it has to update itself every week or something. If I create a Json file myself with the desired data it doesn't update anymore and basically every day a new movie comes in or the numbers/money changes. I would need to change it by hand in my Json aswel? – Xereoth Dec 29 '14 at 21:27
  • I'll answer this below right now – nicholaswmin Dec 29 '14 at 21:29

1 Answers1

2

You want to create a chart with live data.

First thing is getting the data.

The script you are including basically creates the chart for you. So you don't have direct access to the data itself, so it would be a little tricky to use that.

You should google around for a,preferrably REST API, that provides you with data on-demand.

1. Find a suitable REST API and perform calls to fetch data

You perform HTTP requests to the API and it provides data - so on page-load for example you will request data from this API. So each time a user loads your website a call is made and it fetches the most recent data on movies.

2. Parse the data, perform calculations and built your own custom JSON

Then you need to parse that data - Take from this raw feed the data you actually need - perform calculations if needed(from what I take from your question, it's gonna be simple elementary school maths), then build you own custom JSON data structure that can be used to display the data.

3. Visualize the JSON

Include a JS library that renders Charts. Chart.js, is an excellent example and it's dead-simple to provide a JSON and render a really nice looking chart.

That's how it ,usually, goes.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • Thanks, I guess that means I need to start looking for the REST API. I chose this subject (box office top 5) expecting that there would be plenty of data feeds on it but... it seems to have come back and bite me in the ass ^^ Thanks for your help and explaining this properly! – Xereoth Dec 29 '14 at 21:42
  • 1
    If you can't find one then go with [this RSS feed](http://www.boxofficemojo.com/data/rss.php?file=charts.xml) from Mojo itself - just substitute the first step I described with XML instead of JSON. Read on [RSS feed reader](http://stackoverflow.com/questions/17604071/parse-xml-using-javascript) and [XML parsing](https://www.google.com.cy/webhp?sourceid=chrome-instant&rlz=1C1CHMO_enCY556CY556&ion=1&espv=2&ie=UTF-8#q=xml%20reader%20javascript). `XML` is just an alternative to `JSON`, tad harder to read – nicholaswmin Dec 29 '14 at 21:48
  • Will do! thanks a lot, this will hopefully get me closer to what I need :) – Xereoth Dec 29 '14 at 21:58