{"id":12337,"date":"2014-07-29T14:01:06","date_gmt":"2014-07-29T12:01:06","guid":{"rendered":"https:\/\/blog.trifork.com\/?p=12337"},"modified":"2014-07-29T14:01:06","modified_gmt":"2014-07-29T12:01:06","slug":"creating-charts-with-c3-js","status":"publish","type":"post","link":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/","title":{"rendered":"Creating charts with C3.js"},"content":{"rendered":"

\"TriforkEverybody remembers that project where you need to display some data in a chart. When you select a library to create these charts you will obviously have a few requirements. One of the requirements will probably be that the charts must look good to impress your customer and if they don\u2019t look the way you want, they must be at least be easy to style. But the most important requirement will be that the code to achieve your goal must be minimal and easy to understand. So one of the well known JavaScript library to create all kind of charts is D3.js<\/a>. This library provided us the option to create a simple line chart with a tooltip that shows some data. So we thought that this would be a good fit for our project and started to create a chart. But wait\u2026 I see you thinking.. the title said C3.js<\/a> and now you\u2019re using D3.js?! Keep on reading to find out why! <\/p>\n

Line chart with tooltip<\/h2>\n

So my colleague (Jettro Coenradie) and I started to find some D3.js examples of a simple line chart with a tooltip and every time that we found one, we had a lot of code, didn\u2019t really understand what happened and could get it working the way we wanted. So after half a day and a bad mood, Jettro started to create his own version of a line chart. Once finished we had a line chart with a tooltip in less code than all the examples we found so far. After that we needed an extra horizontal line in our chart and Jettro started to look for an example. At one point he told me to look at this library that he found.. He said: This looks really easy.. to easy to be true..<\/p>\n

C3.js<\/h2>\n

So we found C3.js and tried to create the same chart with this library:<\/p>\n

\nvar chart = c3.generate({\n  data: {\n    columns: [ ['data1', 30, 200, 100, 400, 150, 250] ]\n   }\n});\n<\/pre>\n
\"c3-chart1\"<\/a> That was all code necessary to create our simple line chart with tooltip\u2026 We even got a legend and the option to temporary disable a line for free! Now let us try to create an extra horizontal line.<\/p>\n
\ngrid: {\n  y: {\n    lines: [{value: 150, text: 'My cool label at value 150'}]\n  }\n}\n<\/pre>\n
\"c3-chart2\"<\/a> As you can see, that adding a extra line requires minimal code and is really understandable. We liked it a lot and of course continued the use of this library in our project. C3.js has a lot of examples on their website, but the documentation is not complete yet. Which was not really a problem for us, as everything we used was self explaining. I will show you a few more of the nice features that we have used in our project. We wanted to create a more advanced chart (a mix of a bar and line chart) with multiple axes. First lets take a look at the data in our chart. We have a column for the date, the temperature and two with actual data.<\/p>\n
\ncolumns: [\n  ['x', '2014-07-24', '2014-07-25', '2014-07-26', '2014-07-27', '2014-07-28', '2014-07-29'],\n  ['temperature', 5, 2, 4, -3, 6, 5],\n  ['data1', 130, 340, 200, 500, 250, 350],\n  ['data2', 500, 50, 250, 450, 60, 350]\n]\n<\/pre>\n
The default type of the chart must be a bar, but I want the temperature to be displayed as a line:<\/p>\n
\ntype: 'bar',\ntypes: {\n  temperature: 'line'\n}\n<\/pre>\n
The temperature has a different scale than the two data columns. If we would keep them on the same y-axis the temperature line would barely be visible. Luckily it is really easy to add another axis:<\/p>\n
\naxis: {\n x: {\n   type: 'timeseries',\n   tick: {\n     format: '%Y-%m-%d'\n   }\n },\n y2: {\n   show: true,\n   label: {\n     text: 'avg. temperature',\n     position: 'outer-middle'\n   },\n   max: 30,\n   min: -10\n }\n}\n<\/pre>\n
I have added a few more things now. First I tell the x-axis to be of the type \u2018timeseries<\/em>\u2019 and apply a formatter. Next part in the code above is introducing y-axis \u2018y2<\/em>\u2019. Add a label, the minimum and maximum value and we have a good fit for our temperature axis. All we need to do now is tell the chart to display the temperature on the \u2018y2<\/em>\u2019-axis:<\/p>\n
\naxes: {\n  'temperature': 'y2'\n}\n<\/pre>\n
\"c3-chart3\"<\/a> The data in our chart can become big, so big that it is not readable anymore. So we added two more nice features from C3. One is to be able to zoom and the other is to show a sub chart, which allows us to select a range of the chart.<\/p>\n
\nsubchart: {\n  show: true\n},\nzoom: {\n  enabled: true\n}\n<\/pre>\n
Here is what the result looks like (note: the example might not work properly in this embedded view, go to the codepen site to see the example in full view): [codepen_embed height=”450″ theme_id=”1″ slug_hash=”AzvJq” default_tab=”result”][\/codepen_embed] This library made the visualization of our data\u00a0really easy for us. So next time I will definitely use this library if\u00a0it will fit our needs. Make sure you check out the examples<\/a>\u00a0for some other great charts!<\/p>\n","protected":false},"excerpt":{"rendered":"
Everybody remembers that project where you need to display some data in a chart. When you select a library to create these charts you will obviously have a few requirements. One of the requirements will probably be that the charts must look good to impress your customer and if they don\u2019t look the way you […]<\/p>\n","protected":false},"author":102,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"categories":[78,10],"tags":[390,391,392,101],"class_list":["post-12337","post","type-post","status-publish","format-standard","hentry","category-frontend","category-development","tag-c3-js","tag-charts","tag-d3-js","tag-javascript"],"acf":[],"yoast_head":"\nCreating charts with C3.js - Trifork Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creating charts with C3.js - Trifork Blog\" \/>\n<meta property=\"og:description\" content=\"Everybody remembers that project where you need to display some data in a chart. When you select a library to create these charts you will obviously have a few requirements. One of the requirements will probably be that the charts must look good to impress your customer and if they don\u2019t look the way you […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Trifork Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-29T12:01:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png\" \/>\n<meta name=\"author\" content=\"Roberto van der Linden\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Roberto van der Linden\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/\",\"url\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/\",\"name\":\"Creating charts with C3.js - Trifork Blog\",\"isPartOf\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png\",\"datePublished\":\"2014-07-29T12:01:06+00:00\",\"author\":{\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\"},\"breadcrumb\":{\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage\",\"url\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png\",\"contentUrl\":\"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/trifork.nl\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Creating charts with C3.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/trifork.nl\/blog\/#website\",\"url\":\"https:\/\/trifork.nl\/blog\/\",\"name\":\"Trifork Blog\",\"description\":\"Keep updated on the technical solutions Trifork is working on!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/trifork.nl\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35\",\"name\":\"Roberto van der Linden\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g\",\"caption\":\"Roberto van der Linden\"},\"url\":\"https:\/\/trifork.nl\/blog\/author\/roberto\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Creating charts with C3.js - Trifork Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/","og_locale":"en_US","og_type":"article","og_title":"Creating charts with C3.js - Trifork Blog","og_description":"Everybody remembers that project where you need to display some data in a chart. When you select a library to create these charts you will obviously have a few requirements. One of the requirements will probably be that the charts must look good to impress your customer and if they don\u2019t look the way you […]","og_url":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/","og_site_name":"Trifork Blog","article_published_time":"2014-07-29T12:01:06+00:00","og_image":[{"url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png","type":"","width":"","height":""}],"author":"Roberto van der Linden","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Roberto van der Linden","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/","url":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/","name":"Creating charts with C3.js - Trifork Blog","isPartOf":{"@id":"https:\/\/trifork.nl\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage"},"image":{"@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png","datePublished":"2014-07-29T12:01:06+00:00","author":{"@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35"},"breadcrumb":{"@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#primaryimage","url":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png","contentUrl":"https:\/\/trifork.nl\/articles\/wp-content\/uploads\/sites\/3\/2014\/06\/trifork_logo.png"},{"@type":"BreadcrumbList","@id":"https:\/\/trifork.nl\/blog\/creating-charts-with-c3-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/trifork.nl\/blog\/"},{"@type":"ListItem","position":2,"name":"Creating charts with C3.js"}]},{"@type":"WebSite","@id":"https:\/\/trifork.nl\/blog\/#website","url":"https:\/\/trifork.nl\/blog\/","name":"Trifork Blog","description":"Keep updated on the technical solutions Trifork is working on!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/trifork.nl\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/037974cf3e24a7b09a93770b190d6e35","name":"Roberto van der Linden","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/trifork.nl\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/afe49faf7ef8dd3753baefb334568b10?s=96&d=mm&r=g","caption":"Roberto van der Linden"},"url":"https:\/\/trifork.nl\/blog\/author\/roberto\/"}]}},"_links":{"self":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/12337","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/users\/102"}],"replies":[{"embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/comments?post=12337"}],"version-history":[{"count":0,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/posts\/12337\/revisions"}],"wp:attachment":[{"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/media?parent=12337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/categories?post=12337"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trifork.nl\/blog\/wp-json\/wp\/v2\/tags?post=12337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}