jaywon/demo1.js

## demo1.js
fetch('http://islandpulse.org/api/usage?limit=6')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    var chart = c3.generate({
      bindto: '#chart',
      data: {
        json: data,
        keys: {
//           x: 'name', // it's possible to specify 'x' when category axis
          value: ['energy_usage']
        },
        type: 'bar'
      },
      axis: {
        x: {
          type: 'category'
        },
//         y: {
//           label: {
//             text: 'Energy Used kwh',
//             position: 'outer-middle'
//           }
//         }
      }
    });
  });

## demo2.js
fetch('http://islandpulse.org/api/usage?limit=6')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    var dataArray = ['Current Use'];
//     var fakeArray = ['Fake Use'];
    var labelArray = ['labels'];
    var dateArray = ['date'];

    data.forEach((reading) => {
      dataArray.push(reading.energy_usage);
//       fakeArray.push(Math.floor((Math.random() * 1000) + 1))
      labelArray.push(reading.name);
      dateArray.push(reading.dateTime);
    });

    var chart = c3.generate({
      bindto: '#chart',
      data: {
        x : 'labels',
        columns: [
            labelArray,
            dataArray
        ],
        type: 'bar'
      },
      color: {
        pattern: ['blue']
      },
      axis: {
        x: {
          type: 'category'
        },
        y: {
          label: {
            text: 'Energy Used kwh',
            position: 'outer-middle'
          }
        }
      }
    });

// QUESTION: Does a line graph make sense?
//       var chart = c3.generate({
//       bindto: '#chart',
//       data: {
//         columns: [
//           dataArray
//         ]
//       },
//       axis: {
//         x: {
//           type: 'category'
//         },
//         y: {
//           label: {
//             text: 'Energy Used kwh',
//             position: 'outer-middle'
//           }
//         }
//       }
//     });

// QUESTION: What happens when you have multiple data points?
//     var chart = c3.generate({
//     data: {
//         columns: [
//             dataArray,
//             fakeArray
//         ],
//         types: {
//             energy: 'area',
//             energy2: 'area-spline'
//         }
//     }
//     });

//     var chart = c3.generate({
//       data: {
//         columns: [
//             dataArray,
//             fakeArray
//         ],
//         types: {
//             "Current Use": 'step',
//             "Fake Use": 'area-step'
//         }
//       }
//     });
  });

## demo3.js
fetch('http://islandpulse.org/api/highlow?date=2017-11-03%2000:00:00,2017-11-09%2023:00:00')
  .then(function(response) { return response.json(); })
  .then(function(data) {
    var dateValues = ['dates'];
    var highValues = [ 'high'];
    var lowValues = ['low'];
    var daysOfWeek = ['days'];

    data.forEach((reading) => {
      dateValues.push(reading.date);
      highValues.push(reading.High)
      lowValues.push(reading.Low);
      daysOfWeek.push(reading.dayOfWeek);
    });

    var chart = c3.generate({
      data: {
        x : 'dates',
        columns: [
            dateValues,
            highValues,
            lowValues
        ]
      },
      axis: {
        x: {
          type: 'timeseries'
        },
        y: {
          label: {
            text: 'Energy Used kwh',
            position: 'outer-middle'
          }
        }
      }
    });
  });

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" type="text/css">
</head>
<body>
   <div id="chart">
   </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/c3@0.4.18/c3.min.js"></script>
</body>
</html>
	fetch('http://islandpulse.org/api/usage?limit=6')
	.then(function(response) { return response.json(); })
	.then(function(data) {
	var chart = c3.generate({
	bindto: '#chart',
	data: {
	json: data,
	keys: {
	// x: 'name', // it's possible to specify 'x' when category axis
	value: ['energy_usage']
	},
	type: 'bar'
	},
	axis: {
	x: {
	type: 'category'
	},
	// y: {
	// label: {
	// text: 'Energy Used kwh',
	// position: 'outer-middle'
	// }
	// }
	}
	});
	});
	fetch('http://islandpulse.org/api/highlow?date=2017-11-03%2000:00:00,2017-11-09%2023:00:00')
	.then(function(response) { return response.json(); })
	.then(function(data) {
	var dateValues = ['dates'];
	var highValues = [ 'high'];
	var lowValues = ['low'];
	var daysOfWeek = ['days'];

	data.forEach((reading) => {
	dateValues.push(reading.date);
	highValues.push(reading.High)
	lowValues.push(reading.Low);
	daysOfWeek.push(reading.dayOfWeek);
	});

	var chart = c3.generate({
	data: {
	x : 'dates',
	columns: [
	dateValues,
	highValues,
	lowValues
	]
	},
	axis: {
	x: {
	type: 'timeseries'
	},
	y: {
	label: {
	text: 'Energy Used kwh',
	position: 'outer-middle'
	}
	}
	}
	});
	});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<div id="chart">
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/c3@0.4.18/c3.min.js"></script>
	</body>
	</html>