chrisamoore/Data.json

## Data.json
 var data = [
        {
            "client_name" : "foo",
            "date" : "2012-02-16"
        },
        {
            "client_name" : "foo",
            "date" : "2012-02-16"
        },
        {
            "client_name" : "foo",
            "date" : "2012-02-16"
        },
        {
            "client_name" : "bar",
            "date" : "2012-02-16"
        }
        {
            "client_name" : "baz",
            "date" : "2012-02-16"
        },
        {
            "client_name" : "foo",
            "date" : "2012-02-17"
        },
     ];

## functions.js
jQuery(document).ready(function($) {
    var fluctuationChart = dc.barChart("#fluctuation-chart");

    // set dc.js version in title
    $.ajax({
            url: 'dash_data.php',
            type: 'post',
            data: {},
            success: function(data) {

                // since its a csv file we need to format the data a bit
                var dateFormat = d3.time.format("%Y-%m-%d");
                var numberFormat = d3.format(".2f");

                data.forEach(function(e) {
                    e.dd = dateFormat.parse(e.date);
                    e.month = d3.time.month(e.dd); // pre-calculate month for better performance
                });

                // feed it through crossfilter
                var ndx = crossfilter(data);
                var all = ndx.groupAll();

                var client = ndx.dimension(function(d) {
                    // Here Is where I think I need to return the Volume by date
                    ///return Math.round((d.close - d.open) / d.open * 100);
                });
                var clientGroup = fluctuation.group();

                fluctuationChart.width(420)
                        .height(180)
                        .margins({top: 10, right: 50, bottom: 30, left: 40})
                        .dimension(client)
                        .group(clientGroup)
                        .elasticY(true)
                        .centerBar(true)
                        .gap(1)
                        .round(dc.round.floor)
                        .x(d3.scale.linear().domain([-25, 25]))
                        .renderHorizontalGridLines(true)
                        .xAxis()
                        .tickFormat(function(v) {
                            return v + "%";
                        });

                dc.renderAll();
        });
    });
});

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>dc.js - Dimensional Charting Javascript Library</title>
        <meta charset="UTF-8">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="css/dc.css"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div id="fluctuation-chart" >
                    <strong>Days by Fluctuation(%)</strong>
                    <div class="clearfix"></div>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/d3.js"></script>
        <script src="js/crossfilter.js"></script>
        <script src="js/dc.js"></script>
        <script src="js/functions.js"></script>
    </body>
</html>

## Requirements.txt
http://cl.ly/image/3b3I3x1H0a2Y
- Need to cross filter data by date and by volume
	var data = [
	{
	"client_name" : "foo",
	"date" : "2012-02-16"
	},
	{
	"client_name" : "foo",
	"date" : "2012-02-16"
	},
	{
	"client_name" : "foo",
	"date" : "2012-02-16"
	},
	{
	"client_name" : "bar",
	"date" : "2012-02-16"
	}
	{
	"client_name" : "baz",
	"date" : "2012-02-16"
	},
	{
	"client_name" : "foo",
	"date" : "2012-02-17"
	},
	];
	jQuery(document).ready(function($) {
	var fluctuationChart = dc.barChart("#fluctuation-chart");

	// set dc.js version in title
	$.ajax({
	url: 'dash_data.php',
	type: 'post',
	data: {},
	success: function(data) {

	// since its a csv file we need to format the data a bit
	var dateFormat = d3.time.format("%Y-%m-%d");
	var numberFormat = d3.format(".2f");

	data.forEach(function(e) {
	e.dd = dateFormat.parse(e.date);
	e.month = d3.time.month(e.dd); // pre-calculate month for better performance
	});

	// feed it through crossfilter
	var ndx = crossfilter(data);
	var all = ndx.groupAll();

	var client = ndx.dimension(function(d) {
	// Here Is where I think I need to return the Volume by date
	///return Math.round((d.close - d.open) / d.open * 100);
	});
	var clientGroup = fluctuation.group();

	fluctuationChart.width(420)
	.height(180)
	.margins({top: 10, right: 50, bottom: 30, left: 40})
	.dimension(client)
	.group(clientGroup)
	.elasticY(true)
	.centerBar(true)
	.gap(1)
	.round(dc.round.floor)
	.x(d3.scale.linear().domain([-25, 25]))
	.renderHorizontalGridLines(true)
	.xAxis()
	.tickFormat(function(v) {
	return v + "%";
	});

	dc.renderAll();
	});
	});
	});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>dc.js - Dimensional Charting Javascript Library</title>
	<meta charset="UTF-8">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/dc.css"/>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div id="fluctuation-chart" >
	<strong>Days by Fluctuation(%)</strong>
	<div class="clearfix"></div>
	</div>
	</div>
	</div>
	<script src="http://code.jquery.com/jquery-latest.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/d3.js"></script>
	<script src="js/crossfilter.js"></script>
	<script src="js/dc.js"></script>
	<script src="js/functions.js"></script>
	</body>
	</html>
	http://cl.ly/image/3b3I3x1H0a2Y
	- Need to cross filter data by date and by volume