CODEWITHSUNDEEP
c3.js
Jim Julian
Jim Julian

Reputation: 29

C3 : selecting csv column input

How do I select which columns will be graphed in C3.js from a csv data file containing 1200 rows and thirteen columns. Addendum: I've edited the file and made changes. The file works. All issues resolved. For general information, I retrieved the basic document from a copy of the JSFiddle page. Apparently, each JSFiddle page source code contains links to two (offline) functional copies of the code on the JSFiddle. The code as written in the JSFiddle page did not work offline.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="./resources/d3.v3.min.js"></script>
<script type="text/javascript" src="./resources/c3.js"></script>
<link rel="stylesheet" type="text/css" href="./resources/c3.css">
<style type="text/css"></style>
<title>once again</title>
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
d3.csv("./data/dataXY_11-21-2016.csv")
    .row(function(d) { return [d.time12, d.PVpower, d.Elevation]; })
    .get(function(error,rows) { 
        rows.unshift (["time 12", "PV array power(W)", "Elevation"])
        console.log(rows); 
      var chart = c3.generate({
        size:{
        width: 1000,
        height: 400
        },
    bindto: '#chart',
          data: {
              rows: rows,
              type: 'line',
                x: 'time 12',
                xFormat:'%I:%M:%S %p'
          },
            point: {show: false},
            tooltip: {show: false},
        axis: {
            x: {
                localtime: true,
                type:'timeseries',
                tick:{
                    //culling:{max: 50},
                    fit: true,
                    count: 50,
                    format: '%I:%M:%S %p',
                    rotate: 65,         
                      }//end tick
                },//end x

            y: {
                max: 350,
                min: 0
                } //end y
            },//end axis

        grid:{
            x:{
                show: true
            },//end x
            y:{
                show: true
              }//end y
            }//end grid
      });
});
}//]]> 
</script>
<body>
  <div id="chart"></div>
<script>
  if (window.parent && window.parent.parent){
    window.parent.parent.postMessage(["resultsFrame", {
      height: document.body.getBoundingClientRect().height,
      slug: "None"
    }], "*")
  }
</script>
</body>
</html>

Upvotes: 1

Views: 1054

Answers (1)

mgraham
mgraham

Reputation: 6207

Have a look at this example I've messed about with on jsfiddle (code below)

http://jsfiddle.net/Lpatkpj1/

I load the csv, the .row function then filters each row into a new format (array as opposed to object), cherry-picking just two columns on the way, which is then all returned in .get(csv example is just one that was handy on the web). Then I add the names of the data to the front of the rows array using unshift. A very minimal c3.generate can then show this information using the rows: option, anything else you want can be added on.

d3.csv("https://raw.githubusercontent.com/stedy/Machine-Learning-with-R-datasets/master/usedcars.csv")
    .row(function(d) { return [d.price, d.mileage]; })
    .get(function(error, rows) { 
        rows.unshift (["Price", "Mileage"])

        var chart = c3.generate({
          data: {
              rows: rows,
              type: 'line'
          },
        });
});

"I have, since, discovered that d3.csv is a separate file in the d3 distribution" - it can be, but you can get d3.js all bundled up including the csv functionality. Bear in mind c3 does not currently work with v4 of d3, only v3 - https://github.com/c3js/c3/issues/1648.

Upvotes: 0

Related Questions