{"id":5030,"date":"2016-03-29T19:12:32","date_gmt":"2016-03-29T17:12:32","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=5030"},"modified":"2026-01-08T08:53:37","modified_gmt":"2026-01-08T08:53:37","slug":"208-visualizing-comparing-the-highest-grossing-films","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/208-visualizing-comparing-the-highest-grossing-films\/","title":{"rendered":"Visualizing and comparing the highest-grossing films"},"content":{"rendered":"<address dir=\"ltr\"><strong>Did you see <em>Star Wars VII<\/em>? Probably yes. <em>Star Wars: The Force Awakens<\/em> is without question the highest grossing movie of all time. But do you know how it compared to <em>Avatar<\/em>?<\/strong><\/address>\n<p dir=\"ltr\">There is no reason to let this question keep you up at night anymore:<\/p>\n<p>Below you will find a few visualizations that compare various blockbusters, from both a revenue and longevity perspective.<\/p>\n<p dir=\"ltr\">I sourced the data for these visualizations from<a href=\"http:\/\/www.boxofficemojo.com\/\" target=\"_blank\" rel=\"noopener\">http:\/\/www.boxofficemojo.com<\/a>\u00a0(a site maintained by <a href=\"http:\/\/imbd.com\/\" target=\"_blank\" rel=\"noopener\">imbd.com<\/a>). Here one can find the daily gross income from the release date of almost every movie that hit the theaters. For example, check this<a href=\"http:\/\/www.boxofficemojo.com\/movies\/?page=daily&amp;view=chart&amp;id=avatar.htm\" target=\"_blank\" rel=\"noopener\">link<\/a> to see the \u201craw\u201d data for <em>Avatar<\/em>.<\/p>\n<p dir=\"ltr\">With this data in hand, how do we most effectively compare gross income between the movies? The first and safe approach would be a bar chart, but with such rich data, why make it boring? Let\u2019s be a little more adventurous and chart each movie along a time-series, considering the cumulative gross income. (Be patient, let the data load&#8230;)<\/p>\n<p><iframe title=\"Highcharts movie cumulative gross income\" style=\"width: 100%; height: 670px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/movie-gross-income\" allow=\"fullscreen\"><\/iframe><\/p>\n<p dir=\"ltr\">Cool or what? With this approach we can visualize the gross income (like a bar chart), but also see when the movie was released and how the highest-grossing films are distributed across time.<\/p>\n<p dir=\"ltr\">Did you know that <em>E.T.<\/em> and <em>Jurassic Park<\/em> have reached the same cumulative income, although they were released over a decade apart? \u00a0Now you do. I enabled the zoom in this Highcharts visualization so that you may can explore with more detail particular date. (Just draw a selection on the chart with your mouse to zoom to that area).<\/p>\n<h2 dir=\"ltr\">WHICH MOVIES HAVE STAYING-POWER?<\/h2>\n<p dir=\"ltr\">There is another story here that the first graph doesn\u2019t tell well, which is the longevity of each movie as a revenue generator. For that we&#8217;ll chart each movie as a trend-line showing gross income from the release date to present time (making each movie\u2019s release date day zero).<\/p>\n<p dir=\"ltr\">Wow. Check out the ever-green titles: <em>Jurassic Park, E.T., Lord of The Rings, Gladiator<\/em>, and even <em>My Big Fat Greek Wedding<\/em>. It will be interesting to see if <em>The Force Awakens<\/em> will have this kind of staying-power. <em>Avatar<\/em>, as you can see, has already gone into retirement.<\/p>\n<p dir=\"ltr\"><iframe title=\"Highcharts movie cumulative gross income\" style=\"width: 100%; height: 670px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/movie-cummulative-income\" allow=\"fullscreen\"><\/iframe><\/p>\n<p dir=\"ltr\">With this chart is may be easier to compare revenue trends, but the density of data in the lower left corner makes a big chunk of the chart rather un-informative. Still, it beautifully illustrates how some movies remain audience favorites.<\/p>\n<h3 dir=\"ltr\">DATA OVERLOAD, FILTER FAILURE<\/h3>\n<p dir=\"ltr\">It has been said that there is no such thing as data overload, just filter failure. For this chart, it could be smart to group by genre as a way to clean up the display. Let&#8217;s use the legend as a filter. Click each genre below the chart to turn them on or off for comparison.<\/p>\n<p dir=\"ltr\"><iframe title=\"Highcharts movie cumulative gross income\" style=\"width: 100%; height: 670px; border: none;\" src=\"https:\/\/www.highcharts.com\/samples\/embed\/highcharts\/blog\/movie-gross-income-filter\" allow=\"fullscreen\"><\/iframe><\/p>\n<p dir=\"ltr\">(I also attempted to make each individual movie title a legend you could turn on\/off, but as you can see <a href=\"https:\/\/jsfiddle.net\/jbkunst\/9u0fg3dh\/\" target=\"_blank\" rel=\"noopener\">here<\/a>, now the legends themselves become data overload.)<\/p>\n<h3>STATISTICALLY PROVEN<\/h3>\n<p dir=\"ltr\">Hopefully, by now you agree with me in that there is more than just one way to illustrate the same data. Every representation tells a different story, and once you go beyond the regular bar, line or pie charts, data comes to life in new ways.<\/p>\n<p dir=\"ltr\">Can you think of other or even better ways to bring this data to life?<\/p>\n<p dir=\"ltr\">Are there other data-sets where this chart type would make sense?<\/p>\n<p dir=\"ltr\">Add your comments below and share a link to your JSFiddle or other site where you show off your work.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Go beyond the usual bar, line or pie charts if you want to make your data-visualization exciting.<\/p>\n","protected":false},"author":42,"featured_media":11889,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,793],"coauthors":[714],"class_list":["post-5030","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-r"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5030","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=5030"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5030\/revisions"}],"predecessor-version":[{"id":29039,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/5030\/revisions\/29039"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/11889"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=5030"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=5030"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=5030"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=5030"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}