<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
</style>
<body>
<svg id="test1"></svg>
<script src="../lib/d3.v2.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/models/bar.js"></script>
<script>
var testdata = [
{
label: "One is a very long",
y: 5
},
{
label: "Two is also very long",
y: 2
},
{
label: "Three",
y: 9
},
{
label: "Four",
y: 7
},
{
label: "Five",
y: 4
},
{
label: "Six",
y: 3
}
];
var testdata2 = [
{
label: "One is a very long",
y: 1
},
{
label: "Two is also very long",
y: 12
},
{
label: "Three",
y: -9
},
{
label: "Four",
y: 4
},
{
label: "Five",
y: 6
}
];
var td = 0;
var a = (Math.random()*10)+1;
if (a > 5) td = 1;
//Format A
nv.addGraph({
generate: function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
var chart = nv.models.bar()
.width(width)
.height(height)
.labelField('label')
.dataField('y')
.showLabels(true)
.title("This is a sample chart title")
;
if (td === 0) {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata)
.call(chart);
} else {
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.datum(testdata2)
.call(chart);
}
return chart;
},
callback: function(graph) {
graph.dispatch.on('tooltipShow', function(e) {
var offsetElement = document.getElementById("chart"),
left = e.pos[0],
top = e.pos[1];
var content = '<h3>' + e.label + '</h3>' +
'<p>' +
e.value +
'</p>';
nv.tooltip.show([left, top], content);
});
graph.dispatch.on('tooltipHide', function(e) {
nv.tooltip.cleanup();
});
graph.dispatch.on('elementClick', function(e) {
console.log("Bar Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log("Chart Click",e);
});
graph.dispatch.on('chartClick', function(e) {
console.log('Click Switching to');
if (td === 0) {
d3.select("#test1")
.datum(testdata2)
.call(graph);
td = 1;
} else {
d3.select("#test1")
.datum(testdata)
.call(graph);
td = 0;
}
});
window.onresize = function() {
var width = nv.utils.windowSize().width - 40,
height = nv.utils.windowSize().height - 40;
d3.select("#test1")
.attr('width', width)
.attr('height', height)
.call(
graph
.width(width)
.height(height)
)
};
}
});
/*
//Format B
nv.addGraph(function() {
var selection = d3.select("body")
.datum(irwinHallDistribution(10000, 10));
var chart = nv.models.histogram()
.bins(d3.scale.linear().ticks(20))
.tickFormat(d3.format(".02f"));
chart(selection);
return chart;
}, function(g) { console.log(g.width(), g.height()) })
//Format C
nv.addGraph(function() {
return nv.models.histogram()
.bins(d3.scale.linear().ticks(20))
.tickFormat(d3.format(".02f"))(
d3.select("body")
.datum(irwinHallDistribution(10000, 10))
);
}, function(g) { console.log(g.width(), g.height()) })
*/
</script>