{"id":2082,"date":"2014-05-19T09:40:02","date_gmt":"2014-05-19T14:10:02","guid":{"rendered":"http:\/\/www.danielpradilla.info\/blog\/?p=2082"},"modified":"2014-05-19T09:42:28","modified_gmt":"2014-05-19T14:12:28","slug":"amcharts-a-charting-library-for-creating-interactive-web-charts","status":"publish","type":"post","link":"https:\/\/www.danielpradilla.info\/blog\/amcharts-a-charting-library-for-creating-interactive-web-charts\/","title":{"rendered":"amCharts, a charting library for creating interactive web charts"},"content":{"rendered":"<p><a href=\"http:\/\/live.amcharts.com\/\"><img loading=\"lazy\" decoding=\"async\" data-attachment-id=\"2084\" data-permalink=\"https:\/\/www.danielpradilla.info\/blog\/amcharts-a-charting-library-for-creating-interactive-web-charts\/amcharts\/\" data-orig-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg\" data-orig-size=\"800,521\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;}\" data-image-title=\"amcharts\" data-image-description=\"\" data-image-caption=\"\" data-medium-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts-300x195.jpg\" data-large-file=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg\" src=\"http:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg\" alt=\"amcharts\" width=\"800\" height=\"521\" class=\"aligncenter size-full wp-image-2084\" srcset=\"https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts.jpg 800w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts-300x195.jpg 300w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts-160x104.jpg 160w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts-260x169.jpg 260w, https:\/\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/05\/amcharts-360x234.jpg 360w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><br \/>\n<a href=\"http:\/\/amcharts.com\" target=\"_blank\">amCharts<\/a> is a new JavaScript library for creating charts on the web. It handles many types of charts and it&#8217;s somewhat reminiscent of <a href=\"http:\/\/d3js.org\/\" target=\"_blank\">D3.js<\/a>.<\/p>\n<p>Its most exciting feature is a live editor, which removes the grunt work related to your typical JavaScript charting library and enables you to design, change and export your chart to HTML and include it in your website or dashboard. <a href=\"http:\/\/live.amcharts.com\/\" target=\"_blank\">You can try it out for free here<\/a>. Amazing work and amazing tool.<\/p>\n<p>For me, the most important feature is the ability to show a chart scrollbar that enables you to zoom in and out of a section of the chart, in less than 5 minutes, like so:<br \/>\n<script type=\"text\/javascript\" src=\"http:\/\/cdn.amcharts.com\/lib\/3\/amcharts.js\"><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/cdn.amcharts.com\/lib\/3\/serial.js\"><\/script><br \/>\n\t\t<script type=\"text\/javascript\" src=\"http:\/\/cdn.amcharts.com\/lib\/3\/themes\/light.js\"><\/script><br \/>\n\t\t<script type=\"text\/javascript\">\n\t\t\tAmCharts.makeChart(\"chartdiv\",\n\t\t\t\t{\n\t\t\t\t\t\"type\": \"serial\",\n\t\t\t\t\t\"pathToImages\": \"http:\/\/cdn.amcharts.com\/lib\/3\/images\/\",\n\t\t\t\t\t\"categoryField\": \"date\",\n\t\t\t\t\t\"autoMarginOffset\": 40,\n\t\t\t\t\t\"marginRight\": 60,\n\t\t\t\t\t\"marginTop\": 60,\n\t\t\t\t\t\"color\": \"#333333\",\n\t\t\t\t\t\"fontSize\": 10,\n\t\t\t\t\t\"theme\": \"light\",\n\t\t\t\t\t\"categoryAxis\": {\n\t\t\t\t\t\t\"parseDates\": true\n\t\t\t\t\t},\n\t\t\t\t\t\"chartCursor\": {},\n\t\t\t\t\t\"chartScrollbar\": {\n\t\t\t\t\t\t\"backgroundAlpha\": 0.14,\n\t\t\t\t\t\t\"dragIconHeight\": 29,\n\t\t\t\t\t\t\"graph\": \"g1\",\n\t\t\t\t\t\t\"graphType\": \"line\",\n\t\t\t\t\t\t\"maximum\": 140,\n\t\t\t\t\t\t\"minimum\": 115,\n\t\t\t\t\t\t\"scrollbarHeight\": 34\n\t\t\t\t\t},\n\t\t\t\t\t\"trendLines\": [],\n\t\t\t\t\t\"graphs\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"balloonText\": \"Open:<b>[[open]]<\/b><br \/>Low:<b>[[low]]<\/b><br \/>High:<b>[[high]]<\/b><br \/>Close:<b>[[close]]<\/b><br \/>\",\n\t\t\t\t\t\t\t\"closeField\": \"close\",\n\t\t\t\t\t\t\t\"fillAlphas\": 0.9,\n\t\t\t\t\t\t\t\"fillColors\": \"#7f8da9\",\n\t\t\t\t\t\t\t\"highField\": \"high\",\n\t\t\t\t\t\t\t\"id\": \"g1\",\n\t\t\t\t\t\t\t\"lineColor\": \"#7f8da9\",\n\t\t\t\t\t\t\t\"lineThickness\": 0,\n\t\t\t\t\t\t\t\"lowField\": \"low\",\n\t\t\t\t\t\t\t\"negativeFillColors\": \"#db4c3c\",\n\t\t\t\t\t\t\t\"negativeLineColor\": \"#db4c3c\",\n\t\t\t\t\t\t\t\"openField\": \"open\",\n\t\t\t\t\t\t\t\"title\": \"Price:\",\n\t\t\t\t\t\t\t\"type\": \"candlestick\",\n\t\t\t\t\t\t\t\"valueField\": \"close\"\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\t\"guides\": [],\n\t\t\t\t\t\"valueAxes\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"id\": \"ValueAxis-1\"\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\t\"allLabels\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"align\": \"center\",\n\t\t\t\t\t\t\t\"id\": \"\",\n\t\t\t\t\t\t\t\"size\": 31,\n\t\t\t\t\t\t\t\"text\": \"5-minute chart\"\n\t\t\t\t\t\t}\n\t\t\t\t\t],\n\t\t\t\t\t\"balloon\": {},\n\t\t\t\t\t\"titles\": [],\n\t\t\t\t\t\"dataProvider\": [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-01\",\n\t\t\t\t\t\t\t\"open\": \"136.65\",\n\t\t\t\t\t\t\t\"high\": \"136.96\",\n\t\t\t\t\t\t\t\"low\": \"134.15\",\n\t\t\t\t\t\t\t\"close\": \"136.49\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-02\",\n\t\t\t\t\t\t\t\"open\": \"135.26\",\n\t\t\t\t\t\t\t\"high\": \"135.95\",\n\t\t\t\t\t\t\t\"low\": \"131.50\",\n\t\t\t\t\t\t\t\"close\": \"131.85\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-05\",\n\t\t\t\t\t\t\t\"open\": \"132.90\",\n\t\t\t\t\t\t\t\"high\": \"135.27\",\n\t\t\t\t\t\t\t\"low\": \"128.30\",\n\t\t\t\t\t\t\t\"close\": \"135.25\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-06\",\n\t\t\t\t\t\t\t\"open\": \"134.94\",\n\t\t\t\t\t\t\t\"high\": \"137.24\",\n\t\t\t\t\t\t\t\"low\": \"132.63\",\n\t\t\t\t\t\t\t\"close\": \"135.03\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-07\",\n\t\t\t\t\t\t\t\"open\": \"136.76\",\n\t\t\t\t\t\t\t\"high\": \"136.86\",\n\t\t\t\t\t\t\t\"low\": \"132.00\",\n\t\t\t\t\t\t\t\"close\": \"134.01\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-08\",\n\t\t\t\t\t\t\t\"open\": \"131.11\",\n\t\t\t\t\t\t\t\"high\": \"133.00\",\n\t\t\t\t\t\t\t\"low\": \"125.09\",\n\t\t\t\t\t\t\t\"close\": \"126.39\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-09\",\n\t\t\t\t\t\t\t\"open\": \"123.12\",\n\t\t\t\t\t\t\t\"high\": \"127.75\",\n\t\t\t\t\t\t\t\"low\": \"120.30\",\n\t\t\t\t\t\t\t\"close\": \"125.00\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-12\",\n\t\t\t\t\t\t\t\"open\": \"128.32\",\n\t\t\t\t\t\t\t\"high\": \"129.35\",\n\t\t\t\t\t\t\t\"low\": \"126.50\",\n\t\t\t\t\t\t\t\"close\": \"127.79\"\n\t\t\t\t\t\t},\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\"date\": \"2011-08-13\",\n\t\t\t\t\t\t\t\"open\": \"128.29\",\n\t\t\t\t\t\t\t\"high\": \"128.30\",\n\t\t\t\t\t\t\t\"low\": \"123.71\",\n\t\t\t\t\t\t\t\"close\": \"124.03\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t}\n\t\t\t);\n\t\t<\/script><\/p>\n<div id=\"chartdiv\" style=\"width: 100%; height: 400px;\" ><\/div>\n","protected":false},"excerpt":{"rendered":"<p>amCharts is a new JavaScript library for creating charts on the web. It handles many types of charts and it&#8217;s somewhat reminiscent of D3.js. Its most exciting feature is a live editor, which removes the grunt work related to your typical JavaScript charting library and enables you to design, change and export your chart to&hellip; <a class=\"more-link\" href=\"https:\/\/www.danielpradilla.info\/blog\/amcharts-a-charting-library-for-creating-interactive-web-charts\/\">Continue reading <span class=\"screen-reader-text\">amCharts, a charting library for creating interactive web charts<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[172],"tags":[198,197],"class_list":["post-2082","post","type-post","status-publish","format-standard","hentry","category-projectmanagement-en","tag-charts","tag-visualization","entry"],"aioseo_notices":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p1tlzy-xA","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2139,"url":"https:\/\/www.danielpradilla.info\/blog\/interactive-visualizations-javascript\/","url_meta":{"origin":2082,"position":0},"title":"Creating interactive visualizations of large datasets using JavaScript","author":"Daniel Pradilla","date":"09\/04\/2015","format":false,"excerpt":"Crossfilter is a JavaScript library initially designed by Square to explore large multivariate datasets in a web browser. It basically allows you to create sorted indexes and feed them to a charting library like D3, and enable the user to filter by clicking and dragging, even when sifting through 200.000\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1973,"url":"https:\/\/www.danielpradilla.info\/blog\/improve-sap-business-objects\/","url_meta":{"origin":2082,"position":1},"title":"How to improve your Business Objects charts","author":"Daniel Pradilla","date":"13\/08\/2013","format":false,"excerpt":"Business Objects, SAP's BI platform, is notoriously bad for data visualization. Somehow, it empowers the developers to make all the wrong decisions at the same time and create really ugly and unusable \"dashboards\". Lately, I've seen my share of ugly bobip visualizations, like the one above. Which would seem ok\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"disaster, disguised as a \"dashboard\"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/08\/Slide-5-SAP-BusinessObjects-4.0-Event-Insight2.jpg?resize=525%2C300 1.5x"},"classes":[]},{"id":2020,"url":"https:\/\/www.danielpradilla.info\/blog\/zoomdata-bi-without-etl\/","url_meta":{"origin":2082,"position":2},"title":"Zoomdata: BI without ETL","author":"Daniel Pradilla","date":"29\/10\/2013","format":false,"excerpt":"This weekend I took a few minutes to test Zoomdata. And when I say minutes, I literally mean minutes. These guys have done an amazing job to provide a quick mobile-ready demo that you can download as a VM, or as I did, install from an RPM package in a\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"zoomdata","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2013\/10\/zoomdata.jpg?resize=700%2C400 2x"},"classes":[]},{"id":2071,"url":"https:\/\/www.danielpradilla.info\/blog\/build-free-quick-charts\/","url_meta":{"origin":2082,"position":3},"title":"How to build quick and free charts","author":"Daniel Pradilla","date":"03\/03\/2014","format":false,"excerpt":"Back in July 2013, the guys from released their Chartbuilder tool to the rest of the world. Quartz\u00a0is a very successful online magazine. For their charting needs they use Chartbuilder, a web tool they built to streamline their cumbersome Excel-based process and convert it to a three step copy+paste, copy+paste,\u2026","rel":"","context":"In &quot;Project Mgmt.&quot;","block_context":{"text":"Project Mgmt.","link":"https:\/\/www.danielpradilla.info\/blog\/category\/projectmanagement-en\/"},"img":{"alt_text":"apples-oranges_chartbuilder","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/03\/apples-oranges_chartbuilder.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/03\/apples-oranges_chartbuilder.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/03\/apples-oranges_chartbuilder.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2014\/03\/apples-oranges_chartbuilder.png?resize=700%2C400 2x"},"classes":[]},{"id":1884,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-create-better-charts\/","url_meta":{"origin":2082,"position":4},"title":"How to create better charts","author":"Daniel Pradilla","date":"10\/11\/2012","format":false,"excerpt":"We're often tempted to include some kind of accessorizing effect in our charts without knowing that deep down we're making them impossible to interpret and thus ruining their purpose. A typical case is the 3D pie chart. Many people, including executives, have a certain likeness for 3D charts. Somehow they\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/Tufte-Chartjunk.png?resize=700%2C400 2x"},"classes":[]},{"id":1881,"url":"https:\/\/www.danielpradilla.info\/blog\/how-to-choose-the-right-chart\/","url_meta":{"origin":2082,"position":5},"title":"How to choose the right chart","author":"Daniel Pradilla","date":"06\/11\/2012","format":false,"excerpt":"There's a chart for every situation. Each type of information that you have and each analysis that you want to make can be benefited or harmed by the chart you choose. The idea of displaying data graphically is to help the other person understand what you mean to say. Do\u2026","rel":"","context":"In &quot;Best of&quot;","block_context":{"text":"Best of","link":"https:\/\/www.danielpradilla.info\/blog\/category\/bestof\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/d3charts.jpg?resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/d3charts.jpg?resize=350%2C200 1x, https:\/\/i0.wp.com\/www.danielpradilla.info\/blog\/wp-content\/uploads\/2012\/11\/d3charts.jpg?resize=525%2C300 1.5x"},"classes":[]}],"_links":{"self":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2082","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/comments?post=2082"}],"version-history":[{"count":0,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/posts\/2082\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/media?parent=2082"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/categories?post=2082"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.danielpradilla.info\/blog\/wp-json\/wp\/v2\/tags?post=2082"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}