{"id":86,"date":"2023-11-07T19:23:45","date_gmt":"2023-11-07T19:23:45","guid":{"rendered":"https:\/\/blog.dataplatform.lt\/?p=86"},"modified":"2023-11-12T11:55:11","modified_gmt":"2023-11-12T11:55:11","slug":"sharing-charts","status":"publish","type":"post","link":"https:\/\/blog.dataplatform.lt\/?p=86","title":{"rendered":"Sharing charts"},"content":{"rendered":"\n<p>Sometimes we want to visualise data, in the form of infographic or chart\/dashboard. For example, this is interactive chart depicting salaries growth rate:<\/p>\n\n\n\n<div class=\"infogram-embed\" data-id=\"19664191-a29d-4da7-a07f-d24e3d2d0e99\" data-type=\"interactive\"><\/div><script>!function(e,t,s,i){var n=\"InfogramEmbeds\",o=e.getElementsByTagName(\"script\"),d=o[0],r=\/^http:\/.test(e.location)?\"http:\":\"https:\";if(\/^\\\/{2}\/.test(i)&&(i=r+i),window[n]&&window[n].initialized)window[n].process&&window[n].process();else if(!e.getElementById(s)){var a=e.createElement(\"script\");a.async=1,a.id=s,a.src=i,d.parentNode.insertBefore(a,d)}}(document,0,\"infogram-async\",\"\/\/e.infogram.com\/js\/dist\/embed-loader-min.js\");<\/script>\n\n\n\n<p>This could be used in media articles as well to back content with (live) data.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Infogram tool<\/h3>\n\n\n\n<p>We use <a href=\"https:\/\/infogram.com\/\">infogram<\/a> tool for data visualisation as it allows to share charts easily and have quite big collection of charts available.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/ch-1024x590.png\" alt=\"\" class=\"wp-image-97\" srcset=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/ch-1024x590.png 1024w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/ch-300x173.png 300w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/ch-768x443.png 768w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/ch.png 1183w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Example: line chart<\/h3>\n\n\n\n<p>We will use example above (charts) to demonstrate how to build interactive chart.<\/p>\n\n\n\n<p>Lets build static chart first. Pick line chart, and add data manually:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"610\" src=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall-1024x610.png\" alt=\"\" class=\"wp-image-98\" srcset=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall-1024x610.png 1024w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall-300x179.png 300w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall-768x457.png 768w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall-1200x714.png 1200w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/manuall.png 1270w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>To keep it interactive you will need to use JSON feeds option.<\/p>\n\n\n\n<p class=\"has-yellow-background-color has-background\">Important: works for static snapshot, for live updates (i.e. update real time) it requires paid version of app.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"589\" src=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v-1024x589.png\" alt=\"\" class=\"wp-image-99\" srcset=\"https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v-1024x589.png 1024w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v-300x173.png 300w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v-768x442.png 768w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v-1200x691.png 1200w, https:\/\/blog.dataplatform.lt\/wp-content\/uploads\/2023\/11\/feed-v.png 1277w\" sizes=\"auto, (max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px\" \/><\/figure>\n\n\n\n<p>Data should be in the proper JSON format with sheets as outer dimensions (similar to spreadsheets in Infogram), followed by rows and columns.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&#091;&#091;&#091;\"Index of Happiness\",\"09:00\",\"10:00\",\"11:00\",\"12:00\",\"13:00\"],&#091;\"Eden\",794,404,301,563,406],&#091;\"Shambhala\",470,940,142,575,294],&#091;\"Avalon\",332,914,860,616,741],&#091;\"Camelot\",351,686,720,447,467],&#091;\"El Dorado\",863,353,612,872,533],&#091;\"Atlantis\",382,882,240,320,420]]]<\/code><\/pre>\n\n\n\n<p>Here is the API link which returns JUST data, without other meta information (snapshot created date, etc). You will have to use this in Infogram tool when prompted &#8220;Enter JSON feed URL&#8221; (replace challenge with your ID):<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:\/\/api.dataplatform.lt\/snapshots\/latest\/json\/?challenge_id=<strong>459<\/strong><\/code><\/pre>\n\n\n\n<p>You can inspect results <a href=\"https:\/\/api.dataplatform.lt\/snapshots\/latest\/json\/?challenge_id=459\">here<\/a>. Here is example which would produce data in required format in data platform<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nimport requests\nimport json\n\n\ndef get_last_snapshot(challenge_id):\n  api_url = 'https:\/\/data-platform-backend-4ddpl.ondigitalocean.app\/snapshots\/latest\/?challenge_id=%d' % challenge_id\n  response = requests.get(api_url)\n  data = response.json()\n  return data.get('json_data', &#091;])\n\npayroll_data = get_last_snapshot(237)\n\nlocation = 'Vilnius'\npayroll_data = list(filter(lambda p: p.get('location') == location and p.get('salary') == 'Bruto' and p.get('company_status') == 'With', payroll_data))\npayroll_data.sort(key=lambda d: d.get('date'))\n\nresults = &#091;]\nresults.append(&#091;'Data', 'Alga'])\nfor item in payroll_data:\n  results.append(&#091;item.get('date'), item.get('value')])\n\ncombined_results = &#091;results]\nprint(json.dumps(combined_results))\n\n<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sometimes we want to visualise data, in the form of infographic or chart\/dashboard. For example, this is interactive chart depicting salaries growth rate: This could be used in media articles as well to back content with (live) data. Infogram tool We use infogram tool for data visualisation as it allows to share charts easily and &hellip; <a href=\"https:\/\/blog.dataplatform.lt\/?p=86\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Sharing charts&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-86","post","type-post","status-publish","format-standard","hentry","category-patterns-and-best-practises"],"_links":{"self":[{"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/posts\/86","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=86"}],"version-history":[{"count":7,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/posts\/86\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=\/wp\/v2\/posts\/86\/revisions\/106"}],"wp:attachment":[{"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=86"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=86"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.dataplatform.lt\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=86"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}