javascript - Creating a categorical bar chart from csv file in c3.js -

-

i have code simple bar chart using c3.js:

<!doctype html> <html lang="en"> <head>     <title>c3</title>     <meta charset="utf-8" />     <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> </head> <body>     <div id="chart"></div>     <script>          var chart = c3.generate({             data: {                 url: 'data/output.csv'                 type: 'bar'             }         });     </script>  </body> </html>

the file output.csv looks this:

a,b,c,d 25,50,75,100

and graph ends looking this:

enter image description here

which of data in 1 group.

what i'd want producing following, without hard coding data, rather, getting csv file first example:

<!doctype html> <html lang="en"> <head>     <title>c3</title>     <meta charset="utf-8" />     <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>     <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> </head> <body>     <div id="chart"></div>      <script>          var chart = c3.generate({                   bar: {                       width: 15                   },                   padding: {                       left: 60                   },                   data: {                       x: 'letter',                       columns:                           [                         ['letter', 'a','b','c','d'],                         ['value', 25,50,75,100]                         ],                        type: 'bar',                       onclick: function(e) { console.log(ylist[e.x]);a = this;}                    },                   axis: {                       x: {                           type: 'category'                       }                   },                   legend: {                       show: false                   }         });      </script>  </body> </html>

which give graph looks this:

enter image description here

here jfiddle link.

my main issue not knowing if there way split csv file categories, since seems c3.js put csv file time series.

c3 uses first line in csv header line , returns set of objects {a:25},{b:50} c3 find difficult/impossible use in way you'd like.

instead parse csv outside chart using d3's parserows function. prepend row descriptor c3 can use know bit of file what.

https://jsfiddle.net/bm57gye5/2/

// separate bit of html explained below <pre id="data"> a,b,c,d 25,50,75,100 </pre>  // actual javascript var unparseddata = d3.select("pre#data").text(); var data = d3.csv.parserows( unparseddata ); data[0].splice (0,0,"letter"); data[1].splice (0,0,"data"); console.log ("data", data);  var chart = c3.generate({   bar: {     width: 15   },   padding: {     left: 60   },   data: {     columns: data,         x: "letter",     type: 'bar',     onclick: function(e) { console.log(ylist[e.x]);a = this;}    },   axis: {       x: {           type: 'category'        }    },   legend: {     show: false   } });

to access csv url (in jsfiddle reference data part of html) feed csv.parserows you'll need use d3.text , callback so: 

d3.text("data/output.csv", function(unparseddata)   {    var data = d3.csv.parserows(unparseddata); ... parsing / c3 chart generation continues on here above ...  }

Comments

Post a Comment

Popular posts from this blog

wordpress - (T_ENDFOREACH) php error -

-
creating wordpress website , i'm getting following php error: parse error: syntax error, unexpected 'endforeach' (t_endforeach) in /home/soralmedia/public_html/wp-content/themes/soral media/woocommerce/myaccount/my-orders.php on line 98 here's code file: <?php /** * orders * * shows recent orders on account page. * * template can overridden copying yourtheme/woocommerce/myaccount/my-orders.php. * * however, on occasion woocommerce need update template files , (the theme developer). * need copy new files theme maintain compatibility. try this. * little possible, happen. when occurs version of template file will. * bumped , readme list important changes. * * @see http://docs.woothemes.com/document/template-structure/ * @author woothemes * @package woocommerce/templates * @version 2.5.0 */ if ( ! defined( 'abspath' ) ) { exit; } $my_orders_columns = apply_filters( 'woocommerce_my_account_my_orders_columns', array( ...
Read more

Export Excel workseet into txt file using vba - (text and numbers with formulas) -

-
i new vba have developed code use in excel move text/numbers txt file. issue have 3 functions need go same txt file. when run first function has set fs = createobject("scripting.filesystemobject") set = fs.createtextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the other 2 functions had save. set fs = createobject("scripting.filesystemobject") set = fs.savetextfile(module1.nys45uploadfilename, true) a.writeline (str) a.close. the first function go txt file, other 2 error object doesn't support property or method. when changed 3 create last function goes txt file. can not figure out word use in order make other 2 functions follow txt file in order keyed. the entire code follows private sub addrecord_click() on error goto errhandler module1.nys45uploadfilename = application.getsaveasfilename(filefilter:="textfiles (*.txt), *.txt") if module1.nys45uploadfilename = "false" exit sub ...
Read more

Using django-mptt to get only the categories that have items -

-
sample structure: all uppercase: category mixed case: item root ├── books │   ├── fiction │   │   └── classics │   └── non-fiction ├── clothing └── electronics ├── laptops ├── phones │   ├── apple │   │   ├── iphone 6 │   │   ├── iphone 6 plus │   │   ├── iphone 6s │   │   └── iphone 6s plus │   ├── motorola │   │   ├── moto g4 │   │   ├── moto g4 play │   │   ├── moto g4 plus │   │   └── moto x │   └── samsung └── tablets └── apple i'm trying have index page show "electronics" category. "clothing" category shouldn't show since it's empty , "books" category shouldn't show either since, although has child categories, child categories don't have items. similarly, "electronics" page should show "phones" category. "laptops" category shouldn't show since it's empty , "tablets" category shouldn't show either since...
Read more