mirror of
https://github.com/wassname/DefinitelyTyped.git
synced 2026-08-27 11:40:08 +08:00
Horiuchi_H
@@ -0,0 +1,57 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
nv.addGraph(function() {
|
||||
var chart = nv.models.boxPlotChart()
|
||||
.x(function(d) { return d.label })
|
||||
.y(function(d) { return d.values.Q3 })
|
||||
.staggerLabels(true)
|
||||
.maxBoxWidth(75) // prevent boxes from being incredibly wide
|
||||
.yDomain([0, 500])
|
||||
;
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(exampleData())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function exampleData() {
|
||||
return [
|
||||
{
|
||||
label: "Sample A",
|
||||
values: {
|
||||
Q1: 120,
|
||||
Q2: 150,
|
||||
Q3: 200,
|
||||
whisker_low: 115,
|
||||
whisker_high: 210,
|
||||
outliers: [50, 100, 225]
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Sample B",
|
||||
values: {
|
||||
Q1: 300,
|
||||
Q2: 350,
|
||||
Q3: 400,
|
||||
whisker_low: 225,
|
||||
whisker_high: 425,
|
||||
outliers: [175]
|
||||
},
|
||||
},
|
||||
{
|
||||
label: "Sample C",
|
||||
values: {
|
||||
Q1: 50,
|
||||
Q2: 100,
|
||||
Q3: 125,
|
||||
whisker_low: 25,
|
||||
whisker_high: 175,
|
||||
outliers: [0]
|
||||
},
|
||||
}
|
||||
];
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_bullet {
|
||||
var width = 960,
|
||||
height = 55,
|
||||
margin = { top: 5, right: 40, bottom: 20, left: 120 };
|
||||
|
||||
var chart = nv.models.bullet()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
var data = [
|
||||
{ "title": "Revenue", "subtitle": "US$, in thousands", "ranges": [-150, -225, -300], "measures": [-220], "markers": [-250] }
|
||||
];
|
||||
|
||||
//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet nvd3")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
vis.transition().duration(1000).call(chart);
|
||||
|
||||
var transition = function () {
|
||||
vis.datum(randomize);
|
||||
vis.transition().duration(1000).call(chart);
|
||||
};
|
||||
|
||||
function randomize(d) {
|
||||
if (!d.randomizer) d.randomizer = randomizer(d);
|
||||
d.ranges = d.ranges.map(d.randomizer);
|
||||
d.markers = d.markers.map(d.randomizer);
|
||||
d.measures = d.measures.map(d.randomizer);
|
||||
return d;
|
||||
}
|
||||
|
||||
function randomizer(d) {
|
||||
var k = d3.max(d.ranges) * .2;
|
||||
return function (d) {
|
||||
return Math.max(0, d + k * (Math.random() - .5));
|
||||
};
|
||||
}
|
||||
|
||||
d3.select('body').on('click', transition);
|
||||
}
|
||||
@@ -0,0 +1,73 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_bulletChart {
|
||||
var width = 960,
|
||||
height = 80,
|
||||
margin = { top: 5, right: 40, bottom: 20, left: 120 };
|
||||
|
||||
var chart = nv.models.bulletChart()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
var chart2 = nv.models.bulletChart()
|
||||
.width(width - margin.right - margin.left)
|
||||
.height(height - margin.top - margin.bottom);
|
||||
|
||||
var data = [
|
||||
{ "title": "Revenue", "subtitle": "US$, in thousands", "ranges": [150, 225, 300], "measures": [220], "markers": [250] },
|
||||
{ "title": "Order Size", "subtitle": "US$, average", "ranges": [350, 500, 600], "measures": [100], "markers": [550] },
|
||||
{ "title": "Satisfaction", "subtitle": "out of 5", "ranges": [3.5, 4.25, 5], "measures": [3.2, 4.7], "markers": [4.4] }
|
||||
];
|
||||
|
||||
var dataWithLabels = [{
|
||||
"title": "Revenue",
|
||||
"subtitle": "US$, in thousands",
|
||||
"ranges": [150, 225, 300],
|
||||
"measures": [220],
|
||||
"markers": [250, 100],
|
||||
"markerLabels": ['Target Inventory', 'Low Inventory'],
|
||||
"rangeLabels": ['Maximum Inventory', 'Average Inventory', 'Minimum Inventory'],
|
||||
"measureLabels": ['Current Inventory']
|
||||
}];
|
||||
|
||||
//TODO: to be consistent with other models, should be appending a g to an already made svg, not creating the svg element
|
||||
var vis = d3.select("#chart").selectAll("svg")
|
||||
.data(data)
|
||||
.enter().append("svg")
|
||||
.attr("class", "bullet nvd3")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
vis.transition().duration(1000).call(chart);
|
||||
|
||||
var vis2 = d3.select("#chart2").selectAll("svg")
|
||||
.data(dataWithLabels)
|
||||
.enter().append('svg')
|
||||
.attr('class', "bullet nvd3")
|
||||
.attr("width", width)
|
||||
.attr("height", height);
|
||||
|
||||
vis2.transition().duration(1000).call(chart2);
|
||||
|
||||
var transition = function () {
|
||||
vis.datum(randomize).transition().duration(1000).call(chart);
|
||||
vis2.datum(randomize).transition().duration(1000).call(chart2);
|
||||
};
|
||||
|
||||
function randomize(d) {
|
||||
if (!d.randomizer) d.randomizer = randomizer(d);
|
||||
d.ranges = d.ranges.map(d.randomizer);
|
||||
d.markers = d.markers.map(d.randomizer);
|
||||
d.measures = d.measures.map(d.randomizer);
|
||||
return d;
|
||||
}
|
||||
|
||||
function randomizer(d) {
|
||||
var k = d3.max(d.ranges) * .2;
|
||||
return function (d) {
|
||||
return Math.max(0, d + k * (Math.random() - .5));
|
||||
};
|
||||
}
|
||||
|
||||
d3.select('body').on('click', transition);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_candlestick {
|
||||
var data = [{
|
||||
values: [
|
||||
{ "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 },
|
||||
{ "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 },
|
||||
{ "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 },
|
||||
{ "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 },
|
||||
{ "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 },
|
||||
{ "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 },
|
||||
{ "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 },
|
||||
{ "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 },
|
||||
{ "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 },
|
||||
{ "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 },
|
||||
{ "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 },
|
||||
{ "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 },
|
||||
{ "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 },
|
||||
{ "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 },
|
||||
{ "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 },
|
||||
{ "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 },
|
||||
{ "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 },
|
||||
{ "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 },
|
||||
{ "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 },
|
||||
{ "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 },
|
||||
{ "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 },
|
||||
{ "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 },
|
||||
{ "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 },
|
||||
{ "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 },
|
||||
{ "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 },
|
||||
{ "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 },
|
||||
{ "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 },
|
||||
{ "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 },
|
||||
{ "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 },
|
||||
{ "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 },
|
||||
{ "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 },
|
||||
{ "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 },
|
||||
{ "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 },
|
||||
{ "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 },
|
||||
{ "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 },
|
||||
{ "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 },
|
||||
{ "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 },
|
||||
{ "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 },
|
||||
{ "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 },
|
||||
{ "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 },
|
||||
{ "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 },
|
||||
{ "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 },
|
||||
{ "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 },
|
||||
{ "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 },
|
||||
{ "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 },
|
||||
{ "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 },
|
||||
{ "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 },
|
||||
{ "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 },
|
||||
{ "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 },
|
||||
{ "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 },
|
||||
{ "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 },
|
||||
{ "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 },
|
||||
{ "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 },
|
||||
{ "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 },
|
||||
{ "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 },
|
||||
{ "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 },
|
||||
{ "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 },
|
||||
{ "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 },
|
||||
{ "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 },
|
||||
{ "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 },
|
||||
{ "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 },
|
||||
{ "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 },
|
||||
{ "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 },
|
||||
{ "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 },
|
||||
{ "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 },
|
||||
{ "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 },
|
||||
{ "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 },
|
||||
{ "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 },
|
||||
{ "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 },
|
||||
{ "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 }
|
||||
]
|
||||
}];
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.candlestickBar()
|
||||
.x(function (d) { return d['date'] })
|
||||
.y(function (d) { return d['close'] });
|
||||
d3.select("#chart1 svg")
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_candlestickChart {
|
||||
var data = [{
|
||||
values: [
|
||||
{ "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 },
|
||||
{ "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 },
|
||||
{ "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 },
|
||||
{ "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 },
|
||||
{ "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 },
|
||||
{ "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 },
|
||||
{ "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 },
|
||||
{ "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 },
|
||||
{ "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 },
|
||||
{ "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 },
|
||||
{ "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 },
|
||||
{ "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 },
|
||||
{ "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 },
|
||||
{ "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 },
|
||||
{ "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 },
|
||||
{ "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 },
|
||||
{ "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 },
|
||||
{ "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 },
|
||||
{ "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 },
|
||||
{ "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 },
|
||||
{ "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 },
|
||||
{ "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 },
|
||||
{ "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 },
|
||||
{ "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 },
|
||||
{ "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 },
|
||||
{ "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 },
|
||||
{ "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 },
|
||||
{ "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 },
|
||||
{ "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 },
|
||||
{ "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 },
|
||||
{ "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 },
|
||||
{ "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 },
|
||||
{ "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 },
|
||||
{ "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 },
|
||||
{ "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 },
|
||||
{ "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 },
|
||||
{ "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 },
|
||||
{ "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 },
|
||||
{ "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 },
|
||||
{ "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 },
|
||||
{ "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 },
|
||||
{ "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 },
|
||||
{ "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 },
|
||||
{ "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 },
|
||||
{ "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 },
|
||||
{ "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 },
|
||||
{ "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 },
|
||||
{ "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 },
|
||||
{ "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 },
|
||||
{ "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 },
|
||||
{ "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 },
|
||||
{ "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 },
|
||||
{ "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 },
|
||||
{ "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 },
|
||||
{ "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 },
|
||||
{ "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 },
|
||||
{ "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 },
|
||||
{ "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 },
|
||||
{ "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 },
|
||||
{ "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 },
|
||||
{ "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 },
|
||||
{ "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 },
|
||||
{ "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 },
|
||||
{ "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 },
|
||||
{ "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 },
|
||||
{ "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 },
|
||||
{ "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 },
|
||||
{ "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 },
|
||||
{ "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 },
|
||||
{ "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 }
|
||||
]
|
||||
}];
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.candlestickBarChart()
|
||||
.x(function (d) { return d['date'] })
|
||||
.y(function (d) { return d['close'] })
|
||||
.duration(250)
|
||||
.margin({ left: 75, bottom: 50 });
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
chart.xAxis
|
||||
.axisLabel("Dates")
|
||||
.tickFormat(function (d) {
|
||||
// I didn't feel like changing all the above date values
|
||||
// so I hack it to make each value fall on a different date
|
||||
return d3.time.format('%x')(new Date(new Date().valueOf() - (20000 * 86400000) + (d * 86400000)));
|
||||
});
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Stock Price')
|
||||
.tickFormat(function (d, i) { return '$' + d3.format(',.1f')(d); });
|
||||
|
||||
|
||||
|
||||
d3.select("#chart1 svg")
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_cumulativeLineChart {
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs,
|
||||
// and may do more in the future... it's NOT required
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.cumulativeLineChart()
|
||||
.useInteractiveGuideline(true)
|
||||
.x(function (d) { return d[0] })
|
||||
.y(function (d) { return d[1] / 100 })
|
||||
.color(d3.scale.category10().range())
|
||||
.average(function (d) { return d.mean / 100; })
|
||||
.duration(300)
|
||||
.clipVoronoi(false);
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
console.log('render complete: cumulative line with guide line');
|
||||
});
|
||||
|
||||
chart.xAxis.tickFormat(function (d) {
|
||||
return d3.time.format('%m/%d/%y')(new Date(d))
|
||||
});
|
||||
|
||||
chart.yAxis.tickFormat(d3.format(',.1%'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(cumulativeTestData())
|
||||
.call(chart);
|
||||
|
||||
//TODO: Figure out a good way to do this automatically
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
chart.state.dispatch.on('change', function (state) {
|
||||
nv.log('state', JSON.stringify(state));
|
||||
});
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function flatTestData() {
|
||||
return [{
|
||||
key: "Snakes",
|
||||
values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (d) {
|
||||
var currentDate = new Date();
|
||||
currentDate.setDate(currentDate.getDate() + d);
|
||||
return [currentDate, 0]
|
||||
})
|
||||
}];
|
||||
}
|
||||
|
||||
function cumulativeTestData() {
|
||||
return [
|
||||
{
|
||||
key: "Long",
|
||||
values: [[1083297600000, -2.974623048543], [1085976000000, -1.7740300785979], [1088568000000, 4.4681318138177], [1091246400000, 7.0242541001353], [1093924800000, 7.5709603667586], [1096516800000, 20.612245065736], [1099195200000, 21.698065237316], [1101790800000, 40.501189458018], [1104469200000, 50.464679413194], [1107147600000, 48.917421973355], [1109566800000, 63.750936549160], [1112245200000, 59.072499126460], [1114833600000, 43.373158880492], [1117512000000, 54.490918947556], [1120104000000, 56.661178852079], [1122782400000, 73.450103545496], [1125460800000, 71.714526354907], [1128052800000, 85.221664349607], [1130734800000, 77.769261392481], [1133326800000, 95.966528716500], [1136005200000, 107.59132116397], [1138683600000, 127.25740096723], [1141102800000, 122.13917498830], [1143781200000, 126.53657279774], [1146369600000, 132.39300992970], [1149048000000, 120.11238242904], [1151640000000, 118.41408917750], [1154318400000, 107.92918924621], [1156996800000, 110.28057249569], [1159588800000, 117.20485334692], [1162270800000, 141.33556756948], [1164862800000, 159.59452727893], [1167541200000, 167.09801853304], [1170219600000, 185.46849659215], [1172638800000, 184.82474099990], [1175313600000, 195.63155213887], [1177905600000, 207.40597044171], [1180584000000, 230.55966698196], [1183176000000, 239.55649035292], [1185854400000, 241.35915085208], [1188532800000, 239.89428956243], [1191124800000, 260.47781917715], [1193803200000, 276.39457482225], [1196398800000, 258.66530682672], [1199077200000, 250.98846121893], [1201755600000, 226.89902618127], [1204261200000, 227.29009273807], [1206936000000, 218.66476654350], [1209528000000, 232.46605902918], [1212206400000, 253.25667081117], [1214798400000, 235.82505363925], [1217476800000, 229.70112774254], [1220155200000, 225.18472705952], [1222747200000, 189.13661746552], [1225425600000, 149.46533007301], [1228021200000, 131.00340772114], [1230699600000, 135.18341728866], [1233378000000, 109.15296887173], [1235797200000, 84.614772549760], [1238472000000, 100.60810015326], [1241064000000, 141.50134895610], [1243742400000, 142.50405083675], [1246334400000, 139.81192372672], [1249012800000, 177.78205544583], [1251691200000, 194.73691933074], [1254283200000, 209.00838460225], [1256961600000, 198.19855877420], [1259557200000, 222.37102417812], [1262235600000, 234.24581081250], [1264914000000, 228.26087689346], [1267333200000, 248.81895126250], [1270008000000, 270.57301075186], [1272600000000, 292.64604322550], [1275278400000, 265.94088520518], [1277870400000, 237.82887467569], [1280548800000, 265.55973314204], [1283227200000, 248.30877330928], [1285819200000, 278.14870066912], [1288497600000, 292.69260960288], [1291093200000, 300.84263809599], [1293771600000, 326.17253914628], [1296450000000, 337.69335966505], [1298869200000, 339.73260965121], [1301544000000, 346.87865120765], [1304136000000, 347.92991526628], [1306814400000, 342.04627502669], [1309406400000, 333.45386231233], [1312084800000, 323.15034181243], [1314763200000, 295.66126882331], [1317355200000, 251.48014579253], [1320033600000, 295.15424257905], [1322629200000, 294.54766764397], [1325307600000, 295.72906119051], [1327986000000, 325.73351347613], [1330491600000, 340.16106061186], [1333166400000, 345.15514071490], [1335758400000, 337.10259395679], [1338436800000, 318.68216333837], [1341028800000, 317.03683945246], [1343707200000, 318.53549659997], [1346385600000, 332.85381464104], [1348977600000, 337.36534373477], [1351656000000, 350.27872156161], [1354251600000, 349.45128876100]]
|
||||
,
|
||||
mean: 250
|
||||
},
|
||||
{
|
||||
key: "Short",
|
||||
values: [[1083297600000, -0.77078283705125], [1085976000000, -1.8356366650335], [1088568000000, -5.3121322073127], [1091246400000, -4.9320975829662], [1093924800000, -3.9835408823225], [1096516800000, -6.8694685316805], [1099195200000, -8.4854877428545], [1101790800000, -15.933627197384], [1104469200000, -15.920980069544], [1107147600000, -12.478685045651], [1109566800000, -17.297761889305], [1112245200000, -15.247129891020], [1114833600000, -11.336459046839], [1117512000000, -13.298990907415], [1120104000000, -16.360027000056], [1122782400000, -18.527929522030], [1125460800000, -22.176516738685], [1128052800000, -23.309665368330], [1130734800000, -21.629973409748], [1133326800000, -24.186429093486], [1136005200000, -29.116707312531], [1138683600000, -37.188037874864], [1141102800000, -34.689264821198], [1143781200000, -39.505932105359], [1146369600000, -45.339572492759], [1149048000000, -43.849353192764], [1151640000000, -45.418353922571], [1154318400000, -44.579281059919], [1156996800000, -44.027098363370], [1159588800000, -41.261306759439], [1162270800000, -47.446018534027], [1164862800000, -53.413782948909], [1167541200000, -50.700723647419], [1170219600000, -56.374090913296], [1172638800000, -61.754245220322], [1175313600000, -66.246241587629], [1177905600000, -75.351650899999], [1180584000000, -81.699058262032], [1183176000000, -82.487023368081], [1185854400000, -86.230055113277], [1188532800000, -84.746914818507], [1191124800000, -100.77134971977], [1193803200000, -109.95435565947], [1196398800000, -99.605672965057], [1199077200000, -99.607249394382], [1201755600000, -94.874614950188], [1204261200000, -105.35899063105], [1206936000000, -106.01931193802], [1209528000000, -110.28883571771], [1212206400000, -119.60256203030], [1214798400000, -115.62201315802], [1217476800000, -106.63824185202], [1220155200000, -99.848746318951], [1222747200000, -85.631219602987], [1225425600000, -63.547909262067], [1228021200000, -59.753275364457], [1230699600000, -63.874977883542], [1233378000000, -56.865697387488], [1235797200000, -54.285579501988], [1238472000000, -56.474659581885], [1241064000000, -63.847137745644], [1243742400000, -68.754247867325], [1246334400000, -69.474257009155], [1249012800000, -75.084828197067], [1251691200000, -77.101028237237], [1254283200000, -80.454866854387], [1256961600000, -78.984349952220], [1259557200000, -83.041230807854], [1262235600000, -84.529748348935], [1264914000000, -83.837470195508], [1267333200000, -87.174487671969], [1270008000000, -90.342293007487], [1272600000000, -93.550928464991], [1275278400000, -85.833102140765], [1277870400000, -79.326501831592], [1280548800000, -87.986196903537], [1283227200000, -85.397862121771], [1285819200000, -94.738167050020], [1288497600000, -98.661952897151], [1291093200000, -99.609665952708], [1293771600000, -103.57099836183], [1296450000000, -104.04353411322], [1298869200000, -108.21382792587], [1301544000000, -108.74006900920], [1304136000000, -112.07766650960], [1306814400000, -109.63328199118], [1309406400000, -106.53578966772], [1312084800000, -103.16480871469], [1314763200000, -95.945078001828], [1317355200000, -81.226687340874], [1320033600000, -90.782206596168], [1322629200000, -89.484445370113], [1325307600000, -88.514723135326], [1327986000000, -93.381292724320], [1330491600000, -97.529705609172], [1333166400000, -99.520481439189], [1335758400000, -99.430184898669], [1338436800000, -93.349934521973], [1341028800000, -95.858475286491], [1343707200000, -95.522755836605], [1346385600000, -98.503848862036], [1348977600000, -101.49415251896], [1351656000000, -101.50099325672], [1354251600000, -99.487094927489]]
|
||||
,
|
||||
mean: -60
|
||||
},
|
||||
{
|
||||
key: "Gross",
|
||||
mean: 125,
|
||||
values: [[1083297600000, -3.7454058855943], [1085976000000, -3.6096667436314], [1088568000000, -0.8440003934950], [1091246400000, 2.0921565171691], [1093924800000, 3.5874194844361], [1096516800000, 13.742776534056], [1099195200000, 13.212577494462], [1101790800000, 24.567562260634], [1104469200000, 34.543699343650], [1107147600000, 36.438736927704], [1109566800000, 46.453174659855], [1112245200000, 43.825369235440], [1114833600000, 32.036699833653], [1117512000000, 41.191928040141], [1120104000000, 40.301151852023], [1122782400000, 54.922174023466], [1125460800000, 49.538009616222], [1128052800000, 61.911998981277], [1130734800000, 56.139287982733], [1133326800000, 71.780099623014], [1136005200000, 78.474613851439], [1138683600000, 90.069363092366], [1141102800000, 87.449910167102], [1143781200000, 87.030640692381], [1146369600000, 87.053437436941], [1149048000000, 76.263029236276], [1151640000000, 72.995735254929], [1154318400000, 63.349908186291], [1156996800000, 66.253474132320], [1159588800000, 75.943546587481], [1162270800000, 93.889549035453], [1164862800000, 106.18074433002], [1167541200000, 116.39729488562], [1170219600000, 129.09440567885], [1172638800000, 123.07049577958], [1175313600000, 129.38531055124], [1177905600000, 132.05431954171], [1180584000000, 148.86060871993], [1183176000000, 157.06946698484], [1185854400000, 155.12909573880], [1188532800000, 155.14737474392], [1191124800000, 159.70646945738], [1193803200000, 166.44021916278], [1196398800000, 159.05963386166], [1199077200000, 151.38121182455], [1201755600000, 132.02441123108], [1204261200000, 121.93110210702], [1206936000000, 112.64545460548], [1209528000000, 122.17722331147], [1212206400000, 133.65410878087], [1214798400000, 120.20304048123], [1217476800000, 123.06288589052], [1220155200000, 125.33598074057], [1222747200000, 103.50539786253], [1225425600000, 85.917420810943], [1228021200000, 71.250132356683], [1230699600000, 71.308439405118], [1233378000000, 52.287271484242], [1235797200000, 30.329193047772], [1238472000000, 44.133440571375], [1241064000000, 77.654211210456], [1243742400000, 73.749802969425], [1246334400000, 70.337666717565], [1249012800000, 102.69722724876], [1251691200000, 117.63589109350], [1254283200000, 128.55351774786], [1256961600000, 119.21420882198], [1259557200000, 139.32979337027], [1262235600000, 149.71606246357], [1264914000000, 144.42340669795], [1267333200000, 161.64446359053], [1270008000000, 180.23071774437], [1272600000000, 199.09511476051], [1275278400000, 180.10778306442], [1277870400000, 158.50237284410], [1280548800000, 177.57353623850], [1283227200000, 162.91091118751], [1285819200000, 183.41053361910], [1288497600000, 194.03065670573], [1291093200000, 201.23297214328], [1293771600000, 222.60154078445], [1296450000000, 233.35556801977], [1298869200000, 231.22452435045], [1301544000000, 237.84432503045], [1304136000000, 235.55799131184], [1306814400000, 232.11873570751], [1309406400000, 226.62381538123], [1312084800000, 219.34811113539], [1314763200000, 198.69242285581], [1317355200000, 168.90235629066], [1320033600000, 202.64725756733], [1322629200000, 203.05389378105], [1325307600000, 204.85986680865], [1327986000000, 229.77085616585], [1330491600000, 239.65202435959], [1333166400000, 242.33012622734], [1335758400000, 234.11773262149], [1338436800000, 221.47846307887], [1341028800000, 216.98308827912], [1343707200000, 218.37781386755], [1346385600000, 229.39368622736], [1348977600000, 230.54656412916], [1351656000000, 243.06087025523], [1354251600000, 244.24733578385]]
|
||||
},
|
||||
{
|
||||
key: "S&P 1500",
|
||||
values: [[1083297600000, -1.7798428181819], [1085976000000, -0.36883324836999], [1088568000000, 1.7312581046040], [1091246400000, -1.8356125950460], [1093924800000, -1.5396564170877], [1096516800000, -0.16867791409247], [1099195200000, 1.3754263993413], [1101790800000, 5.8171640898041], [1104469200000, 9.4350145241608], [1107147600000, 6.7649081510160], [1109566800000, 9.1568499314776], [1112245200000, 7.2485090994419], [1114833600000, 4.8762222306595], [1117512000000, 8.5992339354652], [1120104000000, 9.0896517982086], [1122782400000, 13.394644048577], [1125460800000, 12.311842010760], [1128052800000, 13.221003650717], [1130734800000, 11.218481009206], [1133326800000, 15.565352598445], [1136005200000, 15.623703865926], [1138683600000, 19.275255326383], [1141102800000, 19.432433717836], [1143781200000, 21.232881244655], [1146369600000, 22.798299192958], [1149048000000, 19.006125095476], [1151640000000, 19.151889158536], [1154318400000, 19.340022855452], [1156996800000, 22.027934841859], [1159588800000, 24.903300681329], [1162270800000, 29.146492833877], [1164862800000, 31.781626082589], [1167541200000, 33.358770738428], [1170219600000, 35.622684613497], [1172638800000, 33.332821711366], [1175313600000, 34.878748635832], [1177905600000, 40.582332613844], [1180584000000, 45.719535502920], [1183176000000, 43.239344722386], [1185854400000, 38.550955100342], [1188532800000, 40.585368816283], [1191124800000, 45.601374057981], [1193803200000, 48.051404337892], [1196398800000, 41.582581696032], [1199077200000, 40.650580792748], [1201755600000, 32.252222066493], [1204261200000, 28.106390258553], [1206936000000, 27.532698196687], [1209528000000, 33.986390463852], [1212206400000, 36.302660526438], [1214798400000, 25.015574480172], [1217476800000, 23.989494069029], [1220155200000, 25.934351445531], [1222747200000, 14.627592011699], [1225425600000, -5.2249403809749], [1228021200000, -12.330933408050], [1230699600000, -11.000291508188], [1233378000000, -18.563864948088], [1235797200000, -27.213097001687], [1238472000000, -20.834133840523], [1241064000000, -12.717886701719], [1243742400000, -8.1644613083526], [1246334400000, -7.9108408918201], [1249012800000, -0.77002391591209], [1251691200000, 2.8243816569672], [1254283200000, 6.8761411421070], [1256961600000, 4.5060912230294], [1259557200000, 10.487179794349], [1262235600000, 13.251375597594], [1264914000000, 9.2207594803415], [1267333200000, 12.836276936538], [1270008000000, 19.816793904978], [1272600000000, 22.156787167211], [1275278400000, 12.518039090576], [1277870400000, 6.4253587440854], [1280548800000, 13.847372028409], [1283227200000, 8.5454736090364], [1285819200000, 18.542801953304], [1288497600000, 23.037064683183], [1291093200000, 23.517422401888], [1293771600000, 31.804723416068], [1296450000000, 34.778247386072], [1298869200000, 39.584883855230], [1301544000000, 40.080647664875], [1304136000000, 44.180050667889], [1306814400000, 42.533535927221], [1309406400000, 40.105374449011], [1312084800000, 37.014659267156], [1314763200000, 29.263745084262], [1317355200000, 19.637463417584], [1320033600000, 33.157645345770], [1322629200000, 32.895053150988], [1325307600000, 34.111544824647], [1327986000000, 40.453985817473], [1330491600000, 46.435700783313], [1333166400000, 51.062385488671], [1335758400000, 50.130448220658], [1338436800000, 41.035476682018], [1341028800000, 46.591932296457], [1343707200000, 48.349391180634], [1346385600000, 51.913011286919], [1348977600000, 55.747238313752], [1351656000000, 52.991824077209], [1354251600000, 49.556311883284]]
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_discreteBarChart {
|
||||
var historicalBarChart = [
|
||||
{
|
||||
key: "Cumulative Return",
|
||||
values: [
|
||||
{
|
||||
"label": "A",
|
||||
"value": 29.765957771107
|
||||
},
|
||||
{
|
||||
"label": "B",
|
||||
"value": 0
|
||||
},
|
||||
{
|
||||
"label": "C",
|
||||
"value": 32.807804682612
|
||||
},
|
||||
{
|
||||
"label": "D",
|
||||
"value": 196.45946739256
|
||||
},
|
||||
{
|
||||
"label": "E",
|
||||
"value": 0.19434030906893
|
||||
},
|
||||
{
|
||||
"label": "F",
|
||||
"value": 98.079782601442
|
||||
},
|
||||
{
|
||||
"label": "G",
|
||||
"value": 13.925743130903
|
||||
},
|
||||
{
|
||||
"label": "H",
|
||||
"value": 5.1387322875705
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.discreteBarChart()
|
||||
.x(function (d) { return d.label })
|
||||
.y(function (d) { return d.value })
|
||||
.staggerLabels(true)
|
||||
//.staggerLabels(historicalBarChart[0].values.length > 8)
|
||||
.showValues(true)
|
||||
.duration(250)
|
||||
;
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(historicalBarChart)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_donutChart {
|
||||
var testdata = [
|
||||
{ key: "One", y: 5 },
|
||||
{ key: "Two", y: 2 },
|
||||
{ key: "Three", y: 9 },
|
||||
{ key: "Four", y: 7 },
|
||||
{ key: "Five", y: 4 },
|
||||
{ key: "Six", y: 3 },
|
||||
{ key: "Seven", y: 0.5 }
|
||||
];
|
||||
|
||||
var height = 350;
|
||||
var width = 350;
|
||||
|
||||
var chart1;
|
||||
nv.addGraph(function () {
|
||||
var chart1 = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
.donut(true)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.padAngle(.08)
|
||||
.cornerRadius(5)
|
||||
.id('donut1'); // allow custom CSS for this one svg
|
||||
|
||||
chart1.title("100%");
|
||||
chart1.pie.donutLabelsOutside(true).donut(true);
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(testdata)
|
||||
.transition().duration(1200)
|
||||
.call(chart1);
|
||||
|
||||
// LISTEN TO WINDOW RESIZE
|
||||
// nv.utils.windowResize(chart1.update);
|
||||
|
||||
// LISTEN TO CLICK EVENTS ON SLICES OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('elementClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// chart.pie.dispatch.on('chartClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// LISTEN TO DOUBLECLICK EVENTS ON SLICES OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('elementDblClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// LISTEN TO THE renderEnd EVENT OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('renderEnd', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// OTHER EVENTS DISPATCHED BY THE PIE INCLUDE: elementMouseover, elementMouseout, elementMousemove
|
||||
// @see nv.models.pie
|
||||
|
||||
return chart1;
|
||||
|
||||
});
|
||||
|
||||
var chart2;
|
||||
nv.addGraph(function () {
|
||||
var chart2 = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
//.labelThreshold(.08)
|
||||
//.showLabels(false)
|
||||
.color(d3.scale.category20().range().slice(10))
|
||||
.width(width)
|
||||
.height(height)
|
||||
.donut(true)
|
||||
.id('donut2')
|
||||
.titleOffset(-30)
|
||||
.title("woot");
|
||||
|
||||
// MAKES IT HALF CIRCLE
|
||||
chart2.pie
|
||||
.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2 })
|
||||
.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2 });
|
||||
|
||||
d3.select("#test2")
|
||||
//.datum(historicalBarChart)
|
||||
.datum(testdata)
|
||||
.transition().duration(1200)
|
||||
.call(chart2);
|
||||
|
||||
return chart2;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_furiousLegend {
|
||||
var width = 500,
|
||||
height = 40;
|
||||
|
||||
var legend = nv.models.legend().vers('furious');
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos());
|
||||
|
||||
var legend2 = nv.models.legend().vers('furious')
|
||||
.align(false);
|
||||
|
||||
d3.select('#test2')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos()).call(legend2);
|
||||
|
||||
var legend3 = nv.models.legend().vers('furious')
|
||||
.width(900)
|
||||
.padding(70);
|
||||
|
||||
d3.select('#test3')
|
||||
.attr('width', 900)
|
||||
.attr('height', 200)
|
||||
.datum(sinAndCos()).call(legend3);
|
||||
|
||||
var update = function (i, l) {
|
||||
d3.select('#test' + i).call(l);
|
||||
}
|
||||
|
||||
update(1, legend);
|
||||
legend.dispatch.on('stateChange', function (d) {
|
||||
console.log(d);
|
||||
update(1, legend);
|
||||
});
|
||||
|
||||
legend2.dispatch.on('stateChange', function (d) {
|
||||
console.log(d);
|
||||
update(2, legend2);
|
||||
});
|
||||
|
||||
legend3.dispatch.on('stateChange', function (d) {
|
||||
console.log(d);
|
||||
update(3, legend3);
|
||||
});
|
||||
|
||||
d3.select('#changeData').on('click', function () {
|
||||
var exp = legend.expanded();
|
||||
|
||||
legend.expanded(!exp);
|
||||
|
||||
d3.select('#test1')
|
||||
.call(legend);
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
return [
|
||||
{ key: "Sine Wave" },
|
||||
{ key: "averylongserieslabelthatcontainsmorethantwentycharacters" },
|
||||
{ key: "A Very Long Series Label" },
|
||||
{ key: "A Very Long Series Label" },
|
||||
{ key: "Cosine Wave" },
|
||||
{ key: "Another test label" },
|
||||
{ key: "Bonds", disengaged: true },
|
||||
{ key: "Stocks", disengaged: true },
|
||||
{ key: "Apple", disengaged: true }
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
nv.addGraph({
|
||||
generate: function() {
|
||||
var chart = nv.models.historicalBar();
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(sinData())
|
||||
.datum(sinData())
|
||||
.transition()
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function(graph) {
|
||||
graph.dispatch.on('elementMouseover', function(e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0],
|
||||
top = e.pos[1];
|
||||
var content = '<p>' + e.point.y + '</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content, e.value < 0 ? 'n' : 's');
|
||||
});
|
||||
|
||||
graph.dispatch.on('elementMouseout', function(e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Simple test data generators
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
cos.push({x: i, y: .5 * Math.cos(i/10)});
|
||||
}
|
||||
|
||||
return [
|
||||
{values: sin, key: "Sine Wave", color: "#ff7f0e"},
|
||||
{values: cos, key: "Cosine Wave", color: "#2ca02c"}
|
||||
];
|
||||
}
|
||||
|
||||
function sinData() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({x: i, y: Math.sin(i/10)});
|
||||
}
|
||||
|
||||
return [{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
}];
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
var data = [{
|
||||
values : []
|
||||
}];
|
||||
|
||||
var i, x;
|
||||
var gap = false;
|
||||
var prevVal = 3000;
|
||||
var tickCount = 100;
|
||||
var probEnterGap = 0.1;
|
||||
var probExitGap = 0.2;
|
||||
var barTimespan = 30 * 60; // thirty minutes in seconds
|
||||
var startOfTime = 1425096000;
|
||||
for (i = 0; i < tickCount; i++) {
|
||||
x = startOfTime + i * barTimespan;
|
||||
if (!gap) {
|
||||
if (Math.random() > probEnterGap) {
|
||||
prevVal += (Math.random() - 0.5) * 500;
|
||||
if (prevVal <= 0) {
|
||||
prevVal = Math.random() * 100;
|
||||
}
|
||||
data[0].values.push({x: x * 1000, y: prevVal});
|
||||
}
|
||||
else {
|
||||
gap = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (Math.random() < probExitGap) {
|
||||
gap = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart : nv.HistoricalBarChart;
|
||||
|
||||
var halfBarXMin = data[0].values[0].x - barTimespan / 2 * 1000;
|
||||
var halfBarXMax = data[0].values[data[0].values.length-1].x + barTimespan / 2 * 1000;
|
||||
|
||||
function renderChart(location, meaning) {
|
||||
nv.addGraph(function() {
|
||||
chart = nv.models.historicalBarChart();
|
||||
chart
|
||||
.xScale(d3.time.scale()) // use a time scale instead of plain numbers in order to get nice round default values in the axis
|
||||
.color(['#68c'])
|
||||
.forceX([halfBarXMin, halfBarXMax]) // fix half-bar problem on the first and last bars
|
||||
.useInteractiveGuideline(true) // check out the css that turns the guideline into this nice thing
|
||||
.margin({"left": 80, "right": 50, "top": 20, "bottom": 30})
|
||||
.duration(0)
|
||||
;
|
||||
|
||||
var tickMultiFormat = d3.time.format.multi([
|
||||
["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour
|
||||
["%-I%p", function(d) { return d.getHours(); }], // not midnight
|
||||
["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month
|
||||
["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st
|
||||
["%Y", function() { return true; }]
|
||||
]);
|
||||
chart.xAxis
|
||||
.showMaxMin(false)
|
||||
.tickPadding(10)
|
||||
.tickFormat(function (d) { return tickMultiFormat(new Date(d)); })
|
||||
;
|
||||
|
||||
chart.yAxis
|
||||
.showMaxMin(false)
|
||||
.tickFormat(d3.format(",.0f"))
|
||||
;
|
||||
|
||||
var svgElem = d3.select(location);
|
||||
svgElem
|
||||
.datum(data)
|
||||
.transition()
|
||||
.call(chart);
|
||||
|
||||
// make our own x-axis tick marks because NVD3 doesn't provide any
|
||||
var tickY2 = chart.yAxis.scale().range()[1];
|
||||
var lineElems = svgElem
|
||||
.select('.nv-x.nv-axis.nvd3-svg')
|
||||
.select('.nvd3.nv-wrap.nv-axis')
|
||||
.select('g')
|
||||
.selectAll('.tick')
|
||||
.data(chart.xScale().ticks())
|
||||
.append('line')
|
||||
.attr('class', 'x-axis-tick-mark')
|
||||
.attr('x2', 0)
|
||||
.attr('y1', tickY2 + 4)
|
||||
.attr('y2', tickY2)
|
||||
.attr('stroke-width', 1)
|
||||
;
|
||||
|
||||
// set up the tooltip to display full dates
|
||||
var tsFormat = d3.time.format('%b %-d, %Y %I:%M%p');
|
||||
var contentGenerator = chart.interactiveLayer.tooltip.contentGenerator();
|
||||
var tooltip = chart.interactiveLayer.tooltip;
|
||||
tooltip.contentGenerator(function (d) { d.value = d.series[0].data.x; return contentGenerator(d); });
|
||||
tooltip.headerFormatter(function (d) { return tsFormat(new Date(d)); });
|
||||
|
||||
// common stuff for the sections below
|
||||
var xScale = chart.xScale();
|
||||
var xPixelFirstBar = xScale(data[0].values[0].x);
|
||||
var xPixelSecondBar = xScale(data[0].values[0].x + barTimespan * 1000);
|
||||
var barWidth = xPixelSecondBar - xPixelFirstBar; // number of pixels representing time delta per bar
|
||||
|
||||
// fix the bar widths so they don't overlap when there are gaps
|
||||
function fixBarWidths(barSpacingFraction) {
|
||||
svgElem
|
||||
.selectAll('.nv-bars')
|
||||
.selectAll('rect')
|
||||
.attr('width', (1 - barSpacingFraction) * barWidth)
|
||||
.attr('transform', function(d, i) {
|
||||
var deltaX = xScale(data[0].values[i].x) - xPixelFirstBar;
|
||||
deltaX += barSpacingFraction / 2 * barWidth;
|
||||
return 'translate(' + deltaX + ', 0)';
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
/*
|
||||
If you're representing sample measurements spaced a certain time apart, the tick marks should
|
||||
be in the middle of the bars and some spacing between bars is recommended to aid with interpretation.
|
||||
On the other hand, if you want to represent a quantity measured over a span of time (one bar), you're
|
||||
better off placing the ticks on the edge of the bar and leaving no gap in between bars.
|
||||
*/
|
||||
function shiftXAxis() {
|
||||
var xAxisElem = svgElem.select('.nv-axis.nv-x');
|
||||
var transform = xAxisElem.attr('transform');
|
||||
var xShift = -barWidth/2;
|
||||
transform = transform.replace('0,', xShift + ',');
|
||||
xAxisElem.attr('transform', transform);
|
||||
}
|
||||
|
||||
if (meaning === 'instant') {
|
||||
fixBarWidths(0.2);
|
||||
}
|
||||
else if (meaning === 'timespan') {
|
||||
fixBarWidths(0.0);
|
||||
shiftXAxis();
|
||||
}
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
|
||||
renderChart('#test1', 'instant');
|
||||
renderChart('#test2', 'timespan');
|
||||
|
||||
window.setTimeout(function() {
|
||||
window.setTimeout(function() {
|
||||
document.getElementById('sc-one').style.display = 'block';
|
||||
document.getElementById('sc-two').style.display = 'none';
|
||||
}, 0);
|
||||
}, 0);
|
||||
|
||||
function switchChartStyle(style) {
|
||||
if (style === 'instant') {
|
||||
document.getElementById('sc-one').style.display = 'block';
|
||||
document.getElementById('sc-two').style.display = 'none';
|
||||
}
|
||||
else if (style === 'timespan') {
|
||||
document.getElementById('sc-one').style.display = 'none';
|
||||
document.getElementById('sc-two').style.display = 'block';
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_legend {
|
||||
var width = 500,
|
||||
height = 20;
|
||||
|
||||
var legend = nv.models.legend();
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos());
|
||||
|
||||
var legend2 = nv.models.legend()
|
||||
.align(false);
|
||||
|
||||
d3.select('#test2')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos()).call(legend2);
|
||||
|
||||
var legend3 = nv.models.legend()
|
||||
.width(900)
|
||||
.padding(70);
|
||||
|
||||
d3.select('#test3')
|
||||
.attr('width', 900)
|
||||
.attr('height', 200)
|
||||
.datum(sinAndCos()).call(legend3);
|
||||
|
||||
var update = function () {
|
||||
d3.select('#test1').call(legend);
|
||||
}
|
||||
|
||||
update();
|
||||
legend.dispatch.on('stateChange', function (d) {
|
||||
console.log(d);
|
||||
update();
|
||||
});
|
||||
|
||||
d3.select('#changeData').on('click', function () {
|
||||
d3.select('#test1')
|
||||
.datum(differentData())
|
||||
.call(legend);
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
return [
|
||||
{ key: "Sine Wave" },
|
||||
{ key: "A Very Long Label With Over Twenty Characters" },
|
||||
{ key: "A Very Long Series Label With Over Twenty Characters" },
|
||||
{ key: "A Very Long Series Label With Over Twenty Characters" },
|
||||
{ key: "Cosine Wave" },
|
||||
{ key: "Another test label" }
|
||||
];
|
||||
}
|
||||
|
||||
function differentData() {
|
||||
return [
|
||||
{ key: "Fixed Income" },
|
||||
{ key: "Derivatives" },
|
||||
{ key: "Credit Default Swaps" },
|
||||
{ key: "Equities" },
|
||||
{ key: "Bonds" },
|
||||
{ key: "Stocks" },
|
||||
{ key: "Apple" }
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_line {
|
||||
nv.addGraph({
|
||||
generate: function () {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40;
|
||||
|
||||
var chart = nv.models.line()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.margin({ top: 20, right: 20, bottom: 20, left: 20 });
|
||||
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
console.log('render complete');
|
||||
});
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function (graph) {
|
||||
window.onresize = function () {
|
||||
var width = nv.utils.windowSize().width - 40,
|
||||
height = nv.utils.windowSize().height - 40,
|
||||
margin = graph.margin();
|
||||
|
||||
if (width < margin.left + margin.right + 20)
|
||||
width = margin.left + margin.right + 20;
|
||||
|
||||
if (height < margin.top + margin.bottom + 20)
|
||||
height = margin.top + margin.bottom + 20;
|
||||
|
||||
graph.width(width).height(height);
|
||||
|
||||
d3.select('#test1')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(graph);
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: i, y: Math.sin(i / 10) });
|
||||
cos.push({ x: i, y: .5 * Math.cos(i / 10) });
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c",
|
||||
strokeWidth: 3
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_lineChart {
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
||||
var chart;
|
||||
var data;
|
||||
|
||||
var randomizeFillOpacity = function () {
|
||||
var rand = Math.random();
|
||||
for (var i = 0; i < 100; i++) { // modify sine amplitude
|
||||
data[4].values[i].y = Math.sin(i / (5 + rand)) * .4 * rand - .25;
|
||||
}
|
||||
data[4].fillOpacity = rand;
|
||||
chart.update();
|
||||
};
|
||||
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.lineChart()
|
||||
.options({
|
||||
transitionDuration: 300,
|
||||
useInteractiveGuideline: true
|
||||
})
|
||||
;
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
chart.xAxis
|
||||
.axisLabel("Time (s)")
|
||||
.tickFormat(d3.format(',.1f'))
|
||||
.staggerLabels(true)
|
||||
;
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(function (d) {
|
||||
if (d == null) {
|
||||
return 'N/A';
|
||||
}
|
||||
return d3.format(',.2f')(d);
|
||||
})
|
||||
;
|
||||
|
||||
data = sinAndCos();
|
||||
|
||||
d3.select('#chart1').append('svg')
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
sin2 = [],
|
||||
cos = [],
|
||||
rand = [],
|
||||
rand2 = []
|
||||
;
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: i, y: i % 10 == 5 ? null : Math.sin(i / 10) }); //the nulls are to show how defined works
|
||||
sin2.push({ x: i, y: Math.sin(i / 5) * 0.4 - 0.25 });
|
||||
cos.push({ x: i, y: .5 * Math.cos(i / 10) });
|
||||
rand.push({ x: i, y: Math.random() / 10 });
|
||||
rand2.push({ x: i, y: Math.cos(i / 10) + Math.random() / 10 })
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e",
|
||||
strokeWidth: 4,
|
||||
classed: 'dashed'
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
},
|
||||
{
|
||||
values: rand,
|
||||
key: "Random Points",
|
||||
color: "#2222ff"
|
||||
},
|
||||
{
|
||||
values: rand2,
|
||||
key: "Random Cosine",
|
||||
color: "#667711",
|
||||
strokeWidth: 3.5
|
||||
},
|
||||
{
|
||||
area: true,
|
||||
values: sin2,
|
||||
key: "Fill opacity",
|
||||
color: "#EF9CFB",
|
||||
fillOpacity: .1
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,67 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_lineChartLogScale {
|
||||
var chart;
|
||||
var data;
|
||||
|
||||
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.lineChart()
|
||||
.x(function (d) { return d.x; })
|
||||
.options({
|
||||
showLegend: true,
|
||||
showYAxis: true,
|
||||
showXAxis: true,
|
||||
useInteractiveGuideline: true
|
||||
});
|
||||
|
||||
data = GenerateData();
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("x axis")
|
||||
.tickFormat(d3.format('0.2f'));
|
||||
|
||||
chart.yScale(d3.scale.log());
|
||||
chart.yAxis
|
||||
.axisLabel("Log axis")
|
||||
.tickFormat(d3.format('.4e'));
|
||||
|
||||
d3.select('#chart1').append('svg')
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
|
||||
});
|
||||
|
||||
function GenerateData() {
|
||||
var sin = [],
|
||||
sin2 = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: i, y: Math.abs(i % 10 == 5 ? null : Math.sin(i / 10)) }); //the nulls are to show how defined works
|
||||
sin2.push({ x: i, y: Math.abs(Math.sin(i / 5) * 0.4 - 0.25) });
|
||||
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
area: true,
|
||||
values: sin,
|
||||
key: "l1",
|
||||
color: "#ff7f0e",
|
||||
strokeWidth: 4,
|
||||
classed: 'dashed'
|
||||
},
|
||||
{
|
||||
values: sin2,
|
||||
key: "l2",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_lineChartSVGResize {
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.lineChart();
|
||||
var fitScreen = false;
|
||||
var width = 600;
|
||||
var height = 300;
|
||||
var zoom = 1;
|
||||
|
||||
chart.useInteractiveGuideline(true);
|
||||
chart.xAxis
|
||||
.tickFormat(d3.format(',r'));
|
||||
|
||||
chart.lines.dispatch.on("elementClick", function (evt) {
|
||||
console.log(evt);
|
||||
});
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Voltage (v)')
|
||||
.tickFormat(d3.format(',.2f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('perserveAspectRatio', 'xMinYMid')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.datum(sinAndCos());
|
||||
|
||||
setChartViewBox();
|
||||
resizeChart();
|
||||
|
||||
nv.utils.windowResize(resizeChart);
|
||||
|
||||
d3.select('#zoomIn').on('click', zoomIn);
|
||||
d3.select('#zoomOut').on('click', zoomOut);
|
||||
|
||||
|
||||
function setChartViewBox() {
|
||||
var w = width * zoom,
|
||||
h = height * zoom;
|
||||
|
||||
chart
|
||||
.width(w)
|
||||
.height(h);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.attr('viewBox', '0 0 ' + w + ' ' + h)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
}
|
||||
|
||||
function zoomOut() {
|
||||
zoom += .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
function zoomIn() {
|
||||
if (zoom <= .5) return;
|
||||
zoom -= .25;
|
||||
setChartViewBox();
|
||||
}
|
||||
|
||||
// This resize simply sets the SVG's dimensions, without a need to recall the chart code
|
||||
// Resizing because of the viewbox and perserveAspectRatio settings
|
||||
// This scales the interior of the chart unlike the above
|
||||
function resizeChart() {
|
||||
var container = d3.select('#chart1');
|
||||
var svg = container.select('svg');
|
||||
|
||||
if (fitScreen) {
|
||||
// resize based on container's width AND HEIGHT
|
||||
var windowSize = nv.utils.windowSize();
|
||||
svg.attr("width", windowSize.width);
|
||||
svg.attr("height", windowSize.height);
|
||||
} else {
|
||||
// resize based on container's width
|
||||
var aspect = chart.width() / chart.height();
|
||||
var targetWidth = parseInt(container.style('width'));
|
||||
svg.attr("width", targetWidth);
|
||||
svg.attr("height", Math.round(targetWidth / aspect));
|
||||
}
|
||||
}
|
||||
return chart;
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
var sin = [],
|
||||
cos = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: i, y: Math.sin(i / 10) });
|
||||
cos.push({ x: i, y: .5 * Math.cos(i / 10) });
|
||||
}
|
||||
return [
|
||||
{
|
||||
values: sin,
|
||||
key: "Sine Wave",
|
||||
color: "#ff7f0e"
|
||||
},
|
||||
{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_linePlusBarChart {
|
||||
var testdata = [
|
||||
{
|
||||
"key": "Quantity",
|
||||
"bar": true,
|
||||
"values": <any>[[1136005200000, 1271000.0], [1138683600000, 1271000.0], [1141102800000, 1271000.0], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 0], [1154318400000, 0], [1156996800000, 0], [1159588800000, 3899486.0], [1162270800000, 3899486.0], [1164862800000, 3899486.0], [1167541200000, 3564700.0], [1170219600000, 3564700.0], [1172638800000, 3564700.0], [1175313600000, 2648493.0], [1177905600000, 2648493.0], [1180584000000, 2648493.0], [1183176000000, 2522993.0], [1185854400000, 2522993.0], [1188532800000, 2522993.0], [1191124800000, 2906501.0], [1193803200000, 2906501.0], [1196398800000, 2906501.0], [1199077200000, 2206761.0], [1201755600000, 2206761.0], [1204261200000, 2206761.0], [1206936000000, 2287726.0], [1209528000000, 2287726.0], [1212206400000, 2287726.0], [1214798400000, 2732646.0], [1217476800000, 2732646.0], [1220155200000, 2732646.0], [1222747200000, 2599196.0], [1225425600000, 2599196.0], [1228021200000, 2599196.0], [1230699600000, 1924387.0], [1233378000000, 1924387.0], [1235797200000, 1924387.0], [1238472000000, 1756311.0], [1241064000000, 1756311.0], [1243742400000, 1756311.0], [1246334400000, 1743470.0], [1249012800000, 1743470.0], [1251691200000, 1743470.0], [1254283200000, 1519010.0], [1256961600000, 1519010.0], [1259557200000, 1519010.0], [1262235600000, 1591444.0], [1264914000000, 1591444.0], [1267333200000, 1591444.0], [1270008000000, 1543784.0], [1272600000000, 1543784.0], [1275278400000, 1543784.0], [1277870400000, 1309915.0], [1280548800000, 1309915.0], [1283227200000, 1309915.0], [1285819200000, 1331875.0], [1288497600000, 1331875.0], [1291093200000, 1331875.0], [1293771600000, 1331875.0], [1296450000000, 1154695.0], [1298869200000, 1154695.0], [1301544000000, 1194025.0], [1304136000000, 1194025.0], [1306814400000, 1194025.0], [1309406400000, 1194025.0], [1312084800000, 1194025.0], [1314763200000, 1244525.0], [1317355200000, 475000.0], [1320033600000, 475000.0], [1322629200000, 475000.0], [1325307600000, 690033.0], [1327986000000, 690033.0], [1330491600000, 690033.0], [1333166400000, 514733.0], [1335758400000, 514733.0]]
|
||||
},
|
||||
{
|
||||
"key": "Price",
|
||||
"values": <any>[[1136005200000, 71.89], [1138683600000, 75.51], [1141102800000, 68.49], [1143781200000, 62.72], [1146369600000, 70.39], [1149048000000, 59.77], [1151640000000, 57.27], [1154318400000, 67.96], [1156996800000, 67.85], [1159588800000, 76.98], [1162270800000, 81.08], [1164862800000, 91.66], [1167541200000, 84.84], [1170219600000, 85.73], [1172638800000, 84.61], [1175313600000, 92.91], [1177905600000, 99.8], [1180584000000, 121.191], [1183176000000, 122.04], [1185854400000, 131.76], [1188532800000, 138.48], [1191124800000, 153.47], [1193803200000, 189.95], [1196398800000, 182.22], [1199077200000, 198.08], [1201755600000, 135.36], [1204261200000, 125.02], [1206936000000, 143.5], [1209528000000, 173.95], [1212206400000, 188.75], [1214798400000, 167.44], [1217476800000, 158.95], [1220155200000, 169.53], [1222747200000, 113.66], [1225425600000, 107.59], [1228021200000, 92.67], [1230699600000, 85.35], [1233378000000, 90.13], [1235797200000, 89.31], [1238472000000, 105.12], [1241064000000, 125.83], [1243742400000, 135.81], [1246334400000, 142.43], [1249012800000, 163.39], [1251691200000, 168.21], [1254283200000, 185.35], [1256961600000, 188.5], [1259557200000, 199.91], [1262235600000, 210.732], [1264914000000, 192.063], [1267333200000, 204.62], [1270008000000, 235.0], [1272600000000, 261.09], [1275278400000, 256.88], [1277870400000, 251.53], [1280548800000, 257.25], [1283227200000, 243.1], [1285819200000, 283.75], [1288497600000, 300.98], [1291093200000, 311.15], [1293771600000, 322.56], [1296450000000, 339.32], [1298869200000, 353.21], [1301544000000, 348.5075], [1304136000000, 350.13], [1306814400000, 347.83], [1309406400000, 335.67], [1312084800000, 390.48], [1314763200000, 384.83], [1317355200000, 381.32], [1320033600000, 404.78], [1322629200000, 382.2], [1325307600000, 405.0], [1327986000000, 456.48], [1330491600000, 542.44], [1333166400000, 599.55], [1335758400000, 583.98]]
|
||||
}
|
||||
].map(function (series) {
|
||||
series.values = series.values.map(function (d) { return { x: d[0], y: d[1] } });
|
||||
return series;
|
||||
});
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.linePlusBarChart()
|
||||
.margin({ top: 50, right: 80, bottom: 30, left: 80 })
|
||||
.legendRightAxisHint(' [Using Right Axis]')
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(function (d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
})
|
||||
.showMaxMin(false);
|
||||
|
||||
chart.y1Axis.tickFormat(function (d) { return '$' + d3.format(',f')(d) });
|
||||
chart.bars.forceY([0]).padData(false);
|
||||
|
||||
chart.x2Axis.tickFormat(function (d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
}).showMaxMin(false);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(testdata)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_lineWithFocusChart {
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.brushExtent([50, 70]);
|
||||
|
||||
chart.xAxis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1");
|
||||
chart.x2Axis.tickFormat(d3.format(',f'));
|
||||
chart.yAxis.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis.tickFormat(d3.format(',.2f'));
|
||||
chart.useInteractiveGuideline(true);
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(testData())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function testData() {
|
||||
return [3, 128, .1].map(function (data, i) {
|
||||
//todo resolve this return stream_layers(3, 128, .1).map(function (data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
area: i === 1,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_lineWithFocusChartx2AxisLabel {
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.lineWithFocusChart();
|
||||
|
||||
chart.brushExtent([50, 70]);
|
||||
|
||||
chart.xAxis.tickFormat(d3.format(',f'));
|
||||
chart.focusHeight(50 + 20);
|
||||
chart.focusMargin({ "bottom": 20 + 20 });
|
||||
chart.x2Axis.tickFormat(d3.format(',f')).axisLabel("Stream - 3,128,.1");
|
||||
chart.yAxis.tickFormat(d3.format(',.2f'));
|
||||
chart.y2Axis.tickFormat(d3.format(',.2f'));
|
||||
chart.useInteractiveGuideline(true);
|
||||
|
||||
d3.select('#chart svg')
|
||||
.datum(testData())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function testData() {
|
||||
return [3, 128, .1].map(function (data, i) {
|
||||
// todo reolve stream_layers return stream_layers(3, 128, .1).map(function (data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
area: i === 1,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_monitoringChart {
|
||||
|
||||
var testdata1 = [
|
||||
{ key: "Updated", y: 0 },
|
||||
{ key: "Pending", y: 100 }
|
||||
];
|
||||
|
||||
var arcRadius1 = [
|
||||
{ inner: 0.6, outer: 1 },
|
||||
{ inner: 0.65, outer: 0.95 }
|
||||
];
|
||||
|
||||
var colors = ["green", "gray"];
|
||||
|
||||
var testdata2 = [
|
||||
{ key: "One", y: 1 },
|
||||
{ key: "Two", y: 1 },
|
||||
{ key: "Three", y: 1 },
|
||||
{ key: "Four", y: 1 },
|
||||
{ key: "Five", y: 1 },
|
||||
{ key: "Six", y: 1 },
|
||||
{ key: "Seven", y: 1 }
|
||||
];
|
||||
|
||||
var arcRadius2 = [
|
||||
{ inner: 0.9, outer: 1 },
|
||||
{ inner: 0.8, outer: 1 },
|
||||
{ inner: 0.7, outer: 1 },
|
||||
{ inner: 0.6, outer: 1 },
|
||||
{ inner: 0.5, outer: 1 },
|
||||
{ inner: 0.4, outer: 1 },
|
||||
{ inner: 0.3, outer: 1 }
|
||||
];
|
||||
|
||||
var testdata3 = [
|
||||
{ key: "Updated", y: 80 },
|
||||
{ key: "Pending", y: 20 }
|
||||
];
|
||||
|
||||
var arcRadius3 = [
|
||||
{ inner: 0, outer: 1 },
|
||||
{ inner: 0, outer: 0.8 }
|
||||
];
|
||||
|
||||
var height = 350;
|
||||
var width = 350;
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
.donut(true)
|
||||
.showLabels(false)
|
||||
.color(colors)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.growOnHover(false)
|
||||
.arcsRadius(arcRadius1)
|
||||
.id('donut1'); // allow custom CSS for this one svg
|
||||
|
||||
chart.title("0%");
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(testdata1)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
// update chart data values randomly
|
||||
setInterval(function () {
|
||||
if (testdata1[0].y < 100) {
|
||||
testdata1[0].y = testdata1[0].y + 1;
|
||||
testdata1[1].y = testdata1[1].y - 1;
|
||||
}
|
||||
else {
|
||||
testdata1[0].y = 0;
|
||||
testdata1[1].y = 100;
|
||||
}
|
||||
chart.title(testdata1[0].y + "%");
|
||||
chart.update();
|
||||
}, 4000);
|
||||
|
||||
return chart;
|
||||
|
||||
});
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
.donut(true)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.arcsRadius(arcRadius2)
|
||||
.donutLabelsOutside(true)
|
||||
.labelSunbeamLayout(true)
|
||||
.id('donut2'); // allow custom CSS for this one svg
|
||||
|
||||
d3.select("#test2")
|
||||
.datum(testdata2)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
|
||||
});
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
.donut(true)
|
||||
.showLabels(true)
|
||||
.width(width)
|
||||
.height(height)
|
||||
.arcsRadius(arcRadius3)
|
||||
.donutLabelsOutside(true)
|
||||
.id('donut3'); // allow custom CSS for this one svg
|
||||
|
||||
d3.select("#test3")
|
||||
.datum(testdata3)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_multiChart {
|
||||
//todo resolve stream_layersIssue var testdata = stream_layers(9, 10 + Math.random() * 100, .1).map(function (data, i) {
|
||||
// return {
|
||||
// key: 'Stream' + i,
|
||||
// values: data.map(function (a) { a.y = a.y * (i <= 1 ? -1 : 1); return a })
|
||||
// };
|
||||
//});
|
||||
|
||||
var testdata = [1, 2, 3, 4, 5, 6, 7, 8, 9].map(function (data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: [1, 2],
|
||||
type: '',
|
||||
yAxis: 1
|
||||
};
|
||||
});
|
||||
|
||||
testdata[0].type = "area";
|
||||
testdata[0].yAxis = 1;
|
||||
testdata[1].type = "area";
|
||||
testdata[1].yAxis = 1;
|
||||
testdata[2].type = "line";
|
||||
testdata[2].yAxis = 1;
|
||||
testdata[3].type = "line";
|
||||
testdata[3].yAxis = 2;
|
||||
testdata[4].type = "scatter";
|
||||
testdata[4].yAxis = 1;
|
||||
testdata[5].type = "scatter";
|
||||
testdata[5].yAxis = 2;
|
||||
testdata[6].type = "bar";
|
||||
testdata[6].yAxis = 2;
|
||||
testdata[7].type = "bar";
|
||||
testdata[7].yAxis = 2;
|
||||
testdata[8].type = "bar";
|
||||
testdata[8].yAxis = 2;
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.multiChart()
|
||||
.margin({ top: 30, right: 60, bottom: 50, left: 70 })
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.xAxis.tickFormat(d3.format(',f'));
|
||||
chart.yAxis1.tickFormat(d3.format(',.1f'));
|
||||
chart.yAxis2.tickFormat(d3.format(',.1f'));
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(testdata)
|
||||
.transition().duration(500).call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_multibarChart {
|
||||
//todo resolve stream_layers var test_data = stream_layers(3, 10 + Math.random() * 100, .1).map(function (data, i) {
|
||||
var test_data = [3, 10 + Math.random() * 100, .1].map(function (data, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: data
|
||||
};
|
||||
});
|
||||
|
||||
console.log('td', test_data);
|
||||
|
||||
var negative_test_data = d3.range(0, 3).map(function (d, i) {
|
||||
return {
|
||||
key: 'Stream' + i,
|
||||
values: d3.range(0, 11).map(function (f, j) {
|
||||
return {
|
||||
y: 10 + Math.random() * 100 * (Math.floor(Math.random() * 100) % 2 ? 1 : -1),
|
||||
x: j
|
||||
}
|
||||
})
|
||||
};
|
||||
});
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.multiBarChart()
|
||||
.barColor(d3.scale.category20().range())
|
||||
.duration(300)
|
||||
.margin({ bottom: 100, left: 70 })
|
||||
.rotateLabels(45)
|
||||
.groupSpacing(0.1)
|
||||
;
|
||||
|
||||
chart.reduceXTicks(false).staggerLabels(true);
|
||||
|
||||
chart.xAxis
|
||||
.axisLabel("ID of Furry Cat Households")
|
||||
.axisLabelDistance(35)
|
||||
.showMaxMin(false)
|
||||
.tickFormat(d3.format(',.6f'))
|
||||
;
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel("Change in Furry Cat Population")
|
||||
.axisLabelDistance(-5)
|
||||
.tickFormat(d3.format(',.01f'))
|
||||
;
|
||||
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
nv.log('Render Complete');
|
||||
});
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(negative_test_data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function (e) {
|
||||
nv.log('New State:', JSON.stringify(e));
|
||||
});
|
||||
chart.state.dispatch.on('change', function (state) {
|
||||
nv.log('state', JSON.stringify(state));
|
||||
});
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_multibarChart2 {
|
||||
//todo resolve stream_layers var test_data = stream_layers(3, 128, .1).map(function (data, i) {
|
||||
var test_data = [3, 128, .1].map(function (data, i) {
|
||||
return {
|
||||
key: (i == 1) ? 'Non-stackable Stream' + i : 'Stream' + i,
|
||||
nonStackable: (i == 1),
|
||||
values: data
|
||||
};
|
||||
});
|
||||
nv.addGraph({
|
||||
generate: function () {
|
||||
var width = nv.utils.windowSize().width,
|
||||
height = nv.utils.windowSize().height;
|
||||
|
||||
var chart = nv.models.multiBarChart()
|
||||
.width(width)
|
||||
.height(height)
|
||||
.stacked(true)
|
||||
;
|
||||
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
console.log('Render Complete');
|
||||
});
|
||||
|
||||
var svg = d3.select('#test1 svg').datum(test_data);
|
||||
console.log('calling chart');
|
||||
svg.transition().duration(0).call(chart);
|
||||
|
||||
return chart;
|
||||
},
|
||||
callback: function (graph) {
|
||||
nv.utils.windowResize(function () {
|
||||
var width = nv.utils.windowSize().width;
|
||||
var height = nv.utils.windowSize().height;
|
||||
graph.width(width).height(height);
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.transition().duration(0)
|
||||
.call(graph);
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,159 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_multibarHorizontalChart {
|
||||
var long_short_data = [
|
||||
{
|
||||
key: 'Series1',
|
||||
values: [
|
||||
{
|
||||
"label": "Group A",
|
||||
"value": -1.8746444827653
|
||||
},
|
||||
{
|
||||
"label": "Group B",
|
||||
"value": -8.0961543492239
|
||||
},
|
||||
{
|
||||
"label": "Group C",
|
||||
"value": -0.57072943117674
|
||||
},
|
||||
{
|
||||
"label": "Group D",
|
||||
"value": -2.4174010336624
|
||||
},
|
||||
{
|
||||
"label": "Group E",
|
||||
"value": -0.72009071426284
|
||||
},
|
||||
{
|
||||
"label": "Group F",
|
||||
"value": -2.77154485523777
|
||||
},
|
||||
{
|
||||
"label": "Group G",
|
||||
"value": -9.90152097798131
|
||||
},
|
||||
{
|
||||
"label": "Group H",
|
||||
"value": 14.91445417330854
|
||||
},
|
||||
{
|
||||
"label": "Group I",
|
||||
"value": -3.055746319141851
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series2',
|
||||
values: [
|
||||
{
|
||||
"label": "Group A",
|
||||
"value": 25.307646510375
|
||||
},
|
||||
{
|
||||
"label": "Group B",
|
||||
"value": 16.756779544553
|
||||
},
|
||||
{
|
||||
"label": "Group C",
|
||||
"value": 18.451534877007
|
||||
},
|
||||
{
|
||||
"label": "Group D",
|
||||
"value": 8.6142352811805
|
||||
},
|
||||
{
|
||||
"label": "Group E",
|
||||
"value": 7.8082472075876
|
||||
},
|
||||
{
|
||||
"label": "Group F",
|
||||
"value": 5.259101026956
|
||||
},
|
||||
{
|
||||
"label": "Group G",
|
||||
"value": 7.0947953487127
|
||||
},
|
||||
{
|
||||
"label": "Group H",
|
||||
"value": 8
|
||||
},
|
||||
{
|
||||
"label": "Group I",
|
||||
"value": 21
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'Series3',
|
||||
values: [
|
||||
{
|
||||
"label": "Group A",
|
||||
"value": -14.307646510375
|
||||
},
|
||||
{
|
||||
"label": "Group B",
|
||||
"value": 16.756779544553
|
||||
},
|
||||
{
|
||||
"label": "Group C",
|
||||
"value": -18.451534877007
|
||||
},
|
||||
{
|
||||
"label": "Group D",
|
||||
"value": 8.6142352811805
|
||||
},
|
||||
{
|
||||
"label": "Group E",
|
||||
"value": -7.8082472075876
|
||||
},
|
||||
{
|
||||
"label": "Group F",
|
||||
"value": 15.259101026956
|
||||
},
|
||||
{
|
||||
"label": "Group G",
|
||||
"value": -0.30947953487127
|
||||
},
|
||||
{
|
||||
"label": "Group H",
|
||||
"value": 0
|
||||
},
|
||||
{
|
||||
"label": "Group I",
|
||||
"value": 0
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.multiBarHorizontalChart()
|
||||
.x(function (d) { return d.label })
|
||||
.y(function (d) { return d.value })
|
||||
.yErr(function (d) { return [-Math.abs(d.value * Math.random() * 0.3), Math.abs(d.value * Math.random() * 0.3)] })
|
||||
.barColor(d3.scale.category20().range())
|
||||
.duration(250)
|
||||
.margin({ left: 100 })
|
||||
.stacked(true);
|
||||
|
||||
chart.yAxis.tickFormat(d3.format(',.2f'));
|
||||
|
||||
chart.yAxis.axisLabel('Y Axis');
|
||||
chart.xAxis.axisLabel('X Axis').axisLabelDistance(20);
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(long_short_data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
chart.state.dispatch.on('change', function (state) {
|
||||
nv.log('state', JSON.stringify(state));
|
||||
});
|
||||
return chart;
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_ohlc {
|
||||
var data = [{
|
||||
values: [
|
||||
{ "date": 15707, "open": 145.11, "high": 146.15, "low": 144.73, "close": 146.06, "volume": 192059000, "adjusted": 144.65 },
|
||||
{ "date": 15708, "open": 145.99, "high": 146.37, "low": 145.34, "close": 145.73, "volume": 144761800, "adjusted": 144.32 },
|
||||
{ "date": 15709, "open": 145.97, "high": 146.61, "low": 145.67, "close": 146.37, "volume": 116817700, "adjusted": 144.95 },
|
||||
{ "date": 15712, "open": 145.85, "high": 146.11, "low": 145.43, "close": 145.97, "volume": 110002500, "adjusted": 144.56 },
|
||||
{ "date": 15713, "open": 145.71, "high": 145.91, "low": 144.98, "close": 145.55, "volume": 121265100, "adjusted": 144.14 },
|
||||
{ "date": 15714, "open": 145.87, "high": 146.32, "low": 145.64, "close": 145.92, "volume": 90745600, "adjusted": 144.51 },
|
||||
{ "date": 15715, "open": 146.73, "high": 147.09, "low": 145.97, "close": 147.08, "volume": 130735400, "adjusted": 145.66 },
|
||||
{ "date": 15716, "open": 147.04, "high": 147.15, "low": 146.61, "close": 147.07, "volume": 113917300, "adjusted": 145.65 },
|
||||
{ "date": 15719, "open": 146.89, "high": 147.07, "low": 146.43, "close": 146.97, "volume": 89567200, "adjusted": 145.55 },
|
||||
{ "date": 15720, "open": 146.29, "high": 147.21, "low": 146.2, "close": 147.07, "volume": 93172600, "adjusted": 145.65 },
|
||||
{ "date": 15721, "open": 146.77, "high": 147.28, "low": 146.61, "close": 147.05, "volume": 104849500, "adjusted": 145.63 },
|
||||
{ "date": 15722, "open": 147.7, "high": 148.42, "low": 147.15, "close": 148, "volume": 133833500, "adjusted": 146.57 },
|
||||
{ "date": 15723, "open": 147.97, "high": 148.49, "low": 147.43, "close": 148.33, "volume": 169906000, "adjusted": 146.9 },
|
||||
{ "date": 15727, "open": 148.33, "high": 149.13, "low": 147.98, "close": 149.13, "volume": 111797300, "adjusted": 147.69 },
|
||||
{ "date": 15728, "open": 149.13, "high": 149.5, "low": 148.86, "close": 149.37, "volume": 104596100, "adjusted": 147.93 },
|
||||
{ "date": 15729, "open": 149.15, "high": 150.14, "low": 149.01, "close": 149.41, "volume": 146426400, "adjusted": 147.97 },
|
||||
{ "date": 15730, "open": 149.88, "high": 150.25, "low": 149.37, "close": 150.25, "volume": 147211600, "adjusted": 148.8 },
|
||||
{ "date": 15733, "open": 150.29, "high": 150.33, "low": 149.51, "close": 150.07, "volume": 113357700, "adjusted": 148.62 },
|
||||
{ "date": 15734, "open": 149.77, "high": 150.85, "low": 149.67, "close": 150.66, "volume": 105694400, "adjusted": 149.2 },
|
||||
{ "date": 15735, "open": 150.64, "high": 150.94, "low": 149.93, "close": 150.07, "volume": 137447700, "adjusted": 148.62 },
|
||||
{ "date": 15736, "open": 149.89, "high": 150.38, "low": 149.6, "close": 149.7, "volume": 108975800, "adjusted": 148.25 },
|
||||
{ "date": 15737, "open": 150.65, "high": 151.42, "low": 150.39, "close": 151.24, "volume": 131173000, "adjusted": 149.78 },
|
||||
{ "date": 15740, "open": 150.32, "high": 151.27, "low": 149.43, "close": 149.54, "volume": 159073600, "adjusted": 148.09 },
|
||||
{ "date": 15741, "open": 150.35, "high": 151.48, "low": 150.29, "close": 151.05, "volume": 113912400, "adjusted": 149.59 },
|
||||
{ "date": 15742, "open": 150.52, "high": 151.26, "low": 150.41, "close": 151.16, "volume": 138762800, "adjusted": 149.7 },
|
||||
{ "date": 15743, "open": 151.21, "high": 151.35, "low": 149.86, "close": 150.96, "volume": 162490000, "adjusted": 149.5 },
|
||||
{ "date": 15744, "open": 151.22, "high": 151.89, "low": 151.22, "close": 151.8, "volume": 103133700, "adjusted": 150.33 },
|
||||
{ "date": 15747, "open": 151.74, "high": 151.9, "low": 151.39, "close": 151.77, "volume": 73775000, "adjusted": 150.3 },
|
||||
{ "date": 15748, "open": 151.78, "high": 152.3, "low": 151.61, "close": 152.02, "volume": 65392700, "adjusted": 150.55 },
|
||||
{ "date": 15749, "open": 152.33, "high": 152.61, "low": 151.72, "close": 152.15, "volume": 82322600, "adjusted": 150.68 },
|
||||
{ "date": 15750, "open": 151.69, "high": 152.47, "low": 151.52, "close": 152.29, "volume": 80834300, "adjusted": 150.82 },
|
||||
{ "date": 15751, "open": 152.43, "high": 152.59, "low": 151.55, "close": 152.11, "volume": 215226500, "adjusted": 150.64 },
|
||||
{ "date": 15755, "open": 152.37, "high": 153.28, "low": 152.16, "close": 153.25, "volume": 95105400, "adjusted": 151.77 },
|
||||
{ "date": 15756, "open": 153.14, "high": 153.19, "low": 151.26, "close": 151.34, "volume": 160574800, "adjusted": 149.88 },
|
||||
{ "date": 15757, "open": 150.96, "high": 151.42, "low": 149.94, "close": 150.42, "volume": 183257000, "adjusted": 148.97 },
|
||||
{ "date": 15758, "open": 151.15, "high": 151.89, "low": 150.49, "close": 151.89, "volume": 106356600, "adjusted": 150.42 },
|
||||
{ "date": 15761, "open": 152.63, "high": 152.86, "low": 149, "close": 149, "volume": 245824800, "adjusted": 147.56 },
|
||||
{ "date": 15762, "open": 149.72, "high": 150.2, "low": 148.73, "close": 150.02, "volume": 186596200, "adjusted": 148.57 },
|
||||
{ "date": 15763, "open": 149.89, "high": 152.33, "low": 149.76, "close": 151.91, "volume": 150781900, "adjusted": 150.44 },
|
||||
{ "date": 15764, "open": 151.9, "high": 152.87, "low": 151.41, "close": 151.61, "volume": 126866000, "adjusted": 150.14 },
|
||||
{ "date": 15765, "open": 151.09, "high": 152.34, "low": 150.41, "close": 152.11, "volume": 170634800, "adjusted": 150.64 },
|
||||
{ "date": 15768, "open": 151.76, "high": 152.92, "low": 151.52, "close": 152.92, "volume": 99010200, "adjusted": 151.44 },
|
||||
{ "date": 15769, "open": 153.66, "high": 154.7, "low": 153.64, "close": 154.29, "volume": 121431900, "adjusted": 152.8 },
|
||||
{ "date": 15770, "open": 154.84, "high": 154.92, "low": 154.16, "close": 154.5, "volume": 94469900, "adjusted": 153.01 },
|
||||
{ "date": 15771, "open": 154.7, "high": 154.98, "low": 154.52, "close": 154.78, "volume": 86101400, "adjusted": 153.28 },
|
||||
{ "date": 15772, "open": 155.46, "high": 155.65, "low": 154.66, "close": 155.44, "volume": 123477800, "adjusted": 153.94 },
|
||||
{ "date": 15775, "open": 155.32, "high": 156.04, "low": 155.13, "close": 156.03, "volume": 83746800, "adjusted": 154.52 },
|
||||
{ "date": 15776, "open": 155.92, "high": 156.1, "low": 155.21, "close": 155.68, "volume": 105755800, "adjusted": 154.17 },
|
||||
{ "date": 15777, "open": 155.76, "high": 156.12, "low": 155.23, "close": 155.9, "volume": 92550900, "adjusted": 154.39 },
|
||||
{ "date": 15778, "open": 156.31, "high": 156.8, "low": 155.91, "close": 156.73, "volume": 126329900, "adjusted": 155.21 },
|
||||
{ "date": 15779, "open": 155.85, "high": 156.04, "low": 155.31, "close": 155.83, "volume": 138601100, "adjusted": 155.01 },
|
||||
{ "date": 15782, "open": 154.34, "high": 155.64, "low": 154.2, "close": 154.97, "volume": 126704300, "adjusted": 154.15 },
|
||||
{ "date": 15783, "open": 155.3, "high": 155.51, "low": 153.59, "close": 154.61, "volume": 167567300, "adjusted": 153.8 },
|
||||
{ "date": 15784, "open": 155.52, "high": 155.95, "low": 155.26, "close": 155.69, "volume": 113759300, "adjusted": 154.87 },
|
||||
{ "date": 15785, "open": 154.76, "high": 155.64, "low": 154.1, "close": 154.36, "volume": 128605000, "adjusted": 153.55 },
|
||||
{ "date": 15786, "open": 154.85, "high": 155.6, "low": 154.73, "close": 155.6, "volume": 111163600, "adjusted": 154.78 },
|
||||
{ "date": 15789, "open": 156.01, "high": 156.27, "low": 154.35, "close": 154.95, "volume": 151322300, "adjusted": 154.13 },
|
||||
{ "date": 15790, "open": 155.59, "high": 156.23, "low": 155.42, "close": 156.19, "volume": 86856600, "adjusted": 155.37 },
|
||||
{ "date": 15791, "open": 155.26, "high": 156.24, "low": 155, "close": 156.19, "volume": 99950600, "adjusted": 155.37 },
|
||||
{ "date": 15792, "open": 156.09, "high": 156.85, "low": 155.75, "close": 156.67, "volume": 102932800, "adjusted": 155.85 },
|
||||
{ "date": 15796, "open": 156.59, "high": 156.91, "low": 155.67, "close": 156.05, "volume": 99194100, "adjusted": 155.23 },
|
||||
{ "date": 15797, "open": 156.61, "high": 157.21, "low": 156.37, "close": 156.82, "volume": 101504300, "adjusted": 155.99 },
|
||||
{ "date": 15798, "open": 156.91, "high": 157.03, "low": 154.82, "close": 155.23, "volume": 154167400, "adjusted": 154.41 },
|
||||
{ "date": 15799, "open": 155.43, "high": 156.17, "low": 155.09, "close": 155.86, "volume": 131885000, "adjusted": 155.04 },
|
||||
{ "date": 15800, "open": 153.95, "high": 155.35, "low": 153.77, "close": 155.16, "volume": 159666000, "adjusted": 154.34 },
|
||||
{ "date": 15803, "open": 155.27, "high": 156.22, "low": 154.75, "close": 156.21, "volume": 86571200, "adjusted": 155.39 },
|
||||
{ "date": 15804, "open": 156.5, "high": 157.32, "low": 155.98, "close": 156.75, "volume": 101922200, "adjusted": 155.92 },
|
||||
{ "date": 15805, "open": 157.17, "high": 158.87, "low": 157.13, "close": 158.67, "volume": 135711100, "adjusted": 157.83 },
|
||||
{ "date": 15806, "open": 158.7, "high": 159.71, "low": 158.54, "close": 159.19, "volume": 110142500, "adjusted": 158.35 },
|
||||
{ "date": 15807, "open": 158.68, "high": 159.04, "low": 157.92, "close": 158.8, "volume": 116359900, "adjusted": 157.96 },
|
||||
{ "date": 15810, "open": 158, "high": 158.13, "low": 155.1, "close": 155.12, "volume": 217259000, "adjusted": 154.3 },
|
||||
{ "date": 15811, "open": 156.29, "high": 157.49, "low": 155.91, "close": 157.41, "volume": 147507800, "adjusted": 156.58 },
|
||||
{ "date": 15812, "open": 156.29, "high": 156.32, "low": 154.28, "close": 155.11, "volume": 226834800, "adjusted": 154.29 },
|
||||
{ "date": 15813, "open": 155.37, "high": 155.41, "low": 153.55, "close": 154.14, "volume": 167583200, "adjusted": 153.33 },
|
||||
{ "date": 15814, "open": 154.5, "high": 155.55, "low": 154.12, "close": 155.48, "volume": 149687600, "adjusted": 154.66 },
|
||||
{ "date": 15817, "open": 155.78, "high": 156.54, "low": 154.75, "close": 156.17, "volume": 106553500, "adjusted": 155.35 },
|
||||
{ "date": 15818, "open": 156.95, "high": 157.93, "low": 156.17, "close": 157.78, "volume": 166141300, "adjusted": 156.95 },
|
||||
{ "date": 15819, "open": 157.83, "high": 158.3, "low": 157.54, "close": 157.88, "volume": 96781200, "adjusted": 157.05 },
|
||||
{ "date": 15820, "open": 158.34, "high": 159.27, "low": 158.1, "close": 158.52, "volume": 131060600, "adjusted": 157.69 },
|
||||
{ "date": 15821, "open": 158.33, "high": 158.6, "low": 157.73, "close": 158.24, "volume": 95918800, "adjusted": 157.41 },
|
||||
{ "date": 15824, "open": 158.67, "high": 159.65, "low": 158.42, "close": 159.3, "volume": 88572800, "adjusted": 158.46 },
|
||||
{ "date": 15825, "open": 159.27, "high": 159.72, "low": 158.61, "close": 159.68, "volume": 116010700, "adjusted": 158.84 },
|
||||
{ "date": 15826, "open": 159.33, "high": 159.41, "low": 158.1, "close": 158.28, "volume": 138874200, "adjusted": 157.45 },
|
||||
{ "date": 15827, "open": 158.68, "high": 159.89, "low": 158.53, "close": 159.75, "volume": 96407600, "adjusted": 158.91 },
|
||||
{ "date": 15828, "open": 161.14, "high": 161.88, "low": 159.78, "close": 161.37, "volume": 144202300, "adjusted": 160.52 },
|
||||
{ "date": 15831, "open": 161.49, "high": 162.01, "low": 161.42, "close": 161.78, "volume": 66882100, "adjusted": 160.93 },
|
||||
{ "date": 15832, "open": 162.13, "high": 162.65, "low": 161.67, "close": 162.6, "volume": 90359200, "adjusted": 161.74 },
|
||||
{ "date": 15833, "open": 162.42, "high": 163.39, "low": 162.33, "close": 163.34, "volume": 97419200, "adjusted": 162.48 },
|
||||
{ "date": 15834, "open": 163.27, "high": 163.7, "low": 162.47, "close": 162.88, "volume": 106738600, "adjusted": 162.02 },
|
||||
{ "date": 15835, "open": 162.99, "high": 163.55, "low": 162.51, "close": 163.41, "volume": 103203000, "adjusted": 162.55 },
|
||||
{ "date": 15838, "open": 163.2, "high": 163.81, "low": 162.82, "close": 163.54, "volume": 81843200, "adjusted": 162.68 },
|
||||
{ "date": 15839, "open": 163.67, "high": 165.35, "low": 163.67, "close": 165.23, "volume": 119000900, "adjusted": 164.36 },
|
||||
{ "date": 15840, "open": 164.96, "high": 166.45, "low": 164.91, "close": 166.12, "volume": 120718500, "adjusted": 165.25 },
|
||||
{ "date": 15841, "open": 165.78, "high": 166.36, "low": 165.09, "close": 165.34, "volume": 109913600, "adjusted": 164.47 },
|
||||
{ "date": 15842, "open": 165.95, "high": 167.04, "low": 165.73, "close": 166.94, "volume": 129801000, "adjusted": 166.06 },
|
||||
{ "date": 15845, "open": 166.78, "high": 167.58, "low": 166.61, "close": 166.93, "volume": 85071200, "adjusted": 166.05 },
|
||||
{ "date": 15846, "open": 167.08, "high": 167.8, "low": 166.5, "close": 167.17, "volume": 95804200, "adjusted": 166.29 },
|
||||
{ "date": 15847, "open": 167.34, "high": 169.07, "low": 165.17, "close": 165.93, "volume": 244031800, "adjusted": 165.06 },
|
||||
{ "date": 15848, "open": 164.16, "high": 165.91, "low": 163.94, "close": 165.45, "volume": 211064400, "adjusted": 164.58 },
|
||||
{ "date": 15849, "open": 164.47, "high": 165.38, "low": 163.98, "close": 165.31, "volume": 151573900, "adjusted": 164.44 },
|
||||
{ "date": 15853, "open": 167.04, "high": 167.78, "low": 165.81, "close": 166.3, "volume": 143679800, "adjusted": 165.42 },
|
||||
{ "date": 15854, "open": 165.42, "high": 165.8, "low": 164.34, "close": 165.22, "volume": 160363400, "adjusted": 164.35 },
|
||||
{ "date": 15855, "open": 165.35, "high": 166.59, "low": 165.22, "close": 165.83, "volume": 107793800, "adjusted": 164.96 },
|
||||
{ "date": 15856, "open": 165.37, "high": 166.31, "low": 163.13, "close": 163.45, "volume": 176850100, "adjusted": 162.59 },
|
||||
{ "date": 15859, "open": 163.83, "high": 164.46, "low": 162.66, "close": 164.35, "volume": 168390700, "adjusted": 163.48 },
|
||||
{ "date": 15860, "open": 164.44, "high": 165.1, "low": 162.73, "close": 163.56, "volume": 157631500, "adjusted": 162.7 },
|
||||
{ "date": 15861, "open": 163.09, "high": 163.42, "low": 161.13, "close": 161.27, "volume": 211737800, "adjusted": 160.42 },
|
||||
{ "date": 15862, "open": 161.2, "high": 162.74, "low": 160.25, "close": 162.73, "volume": 200225500, "adjusted": 161.87 },
|
||||
{ "date": 15863, "open": 163.85, "high": 164.95, "low": 163.14, "close": 164.8, "volume": 188337800, "adjusted": 163.93 },
|
||||
{ "date": 15866, "open": 165.31, "high": 165.4, "low": 164.37, "close": 164.8, "volume": 105667100, "adjusted": 163.93 },
|
||||
{ "date": 15867, "open": 163.3, "high": 164.54, "low": 162.74, "close": 163.1, "volume": 159505400, "adjusted": 162.24 },
|
||||
{ "date": 15868, "open": 164.22, "high": 164.39, "low": 161.6, "close": 161.75, "volume": 177361500, "adjusted": 160.9 },
|
||||
{ "date": 15869, "open": 161.66, "high": 164.5, "low": 161.3, "close": 164.21, "volume": 163587800, "adjusted": 163.35 },
|
||||
{ "date": 15870, "open": 164.03, "high": 164.67, "low": 162.91, "close": 163.18, "volume": 141197500, "adjusted": 162.32 },
|
||||
{ "date": 15873, "open": 164.29, "high": 165.22, "low": 163.22, "close": 164.44, "volume": 136295600, "adjusted": 163.57 },
|
||||
{ "date": 15874, "open": 164.53, "high": 165.99, "low": 164.52, "close": 165.74, "volume": 114695600, "adjusted": 164.87 },
|
||||
{ "date": 15875, "open": 165.6, "high": 165.89, "low": 163.38, "close": 163.45, "volume": 206149500, "adjusted": 162.59 },
|
||||
{ "date": 15876, "open": 161.86, "high": 163.47, "low": 158.98, "close": 159.4, "volume": 321255900, "adjusted": 158.56 },
|
||||
{ "date": 15877, "open": 159.64, "high": 159.76, "low": 157.47, "close": 159.07, "volume": 271956800, "adjusted": 159.07 },
|
||||
{ "date": 15880, "open": 157.41, "high": 158.43, "low": 155.73, "close": 157.06, "volume": 222329000, "adjusted": 157.06 },
|
||||
{ "date": 15881, "open": 158.48, "high": 160.1, "low": 157.42, "close": 158.57, "volume": 162262200, "adjusted": 158.57 },
|
||||
{ "date": 15882, "open": 159.87, "high": 160.5, "low": 159.25, "close": 160.14, "volume": 134848000, "adjusted": 160.14 },
|
||||
{ "date": 15883, "open": 161.1, "high": 161.82, "low": 160.95, "close": 161.08, "volume": 129483700, "adjusted": 161.08 },
|
||||
{ "date": 15884, "open": 160.63, "high": 161.4, "low": 159.86, "close": 160.42, "volume": 160402900, "adjusted": 160.42 },
|
||||
{ "date": 15887, "open": 161.26, "high": 162.48, "low": 161.08, "close": 161.36, "volume": 131954800, "adjusted": 161.36 },
|
||||
{ "date": 15888, "open": 161.12, "high": 162.3, "low": 160.5, "close": 161.21, "volume": 154863700, "adjusted": 161.21 },
|
||||
{ "date": 15889, "open": 160.48, "high": 161.77, "low": 160.22, "close": 161.28, "volume": 75216400, "adjusted": 161.28 },
|
||||
{ "date": 15891, "open": 162.47, "high": 163.08, "low": 161.3, "close": 163.02, "volume": 122416900, "adjusted": 163.02 },
|
||||
{ "date": 15894, "open": 163.86, "high": 164.39, "low": 163.08, "close": 163.95, "volume": 108092500, "adjusted": 163.95 },
|
||||
{ "date": 15895, "open": 164.98, "high": 165.33, "low": 164.27, "close": 165.13, "volume": 119298000, "adjusted": 165.13 },
|
||||
{ "date": 15896, "open": 164.97, "high": 165.75, "low": 164.63, "close": 165.19, "volume": 121410100, "adjusted": 165.19 },
|
||||
{ "date": 15897, "open": 167.11, "high": 167.61, "low": 165.18, "close": 167.44, "volume": 135592200, "adjusted": 167.44 },
|
||||
{ "date": 15898, "open": 167.39, "high": 167.93, "low": 167.13, "close": 167.51, "volume": 104212700, "adjusted": 167.51 },
|
||||
{ "date": 15901, "open": 167.97, "high": 168.39, "low": 167.68, "close": 168.15, "volume": 69450600, "adjusted": 168.15 },
|
||||
{ "date": 15902, "open": 168.26, "high": 168.36, "low": 167.07, "close": 167.52, "volume": 88702100, "adjusted": 167.52 },
|
||||
{ "date": 15903, "open": 168.16, "high": 168.48, "low": 167.73, "close": 167.95, "volume": 92873900, "adjusted": 167.95 },
|
||||
{ "date": 15904, "open": 168.31, "high": 169.27, "low": 168.2, "close": 168.87, "volume": 103620100, "adjusted": 168.87 },
|
||||
{ "date": 15905, "open": 168.52, "high": 169.23, "low": 168.31, "close": 169.17, "volume": 103831700, "adjusted": 169.17 },
|
||||
{ "date": 15908, "open": 169.41, "high": 169.74, "low": 169.01, "close": 169.5, "volume": 79428600, "adjusted": 169.5 },
|
||||
{ "date": 15909, "open": 169.8, "high": 169.83, "low": 169.05, "close": 169.14, "volume": 80829700, "adjusted": 169.14 },
|
||||
{ "date": 15910, "open": 169.79, "high": 169.86, "low": 168.18, "close": 168.52, "volume": 112914000, "adjusted": 168.52 },
|
||||
{ "date": 15911, "open": 168.22, "high": 169.08, "low": 167.94, "close": 168.93, "volume": 111088600, "adjusted": 168.93 },
|
||||
{ "date": 15912, "open": 168.22, "high": 169.16, "low": 167.52, "close": 169.11, "volume": 107814600, "adjusted": 169.11 },
|
||||
{ "date": 15915, "open": 168.68, "high": 169.06, "low": 168.11, "close": 168.59, "volume": 79695000, "adjusted": 168.59 },
|
||||
{ "date": 15916, "open": 169.1, "high": 169.28, "low": 168.19, "close": 168.59, "volume": 85209600, "adjusted": 168.59 },
|
||||
{ "date": 15917, "open": 168.94, "high": 169.85, "low": 168.49, "close": 168.71, "volume": 142388700, "adjusted": 168.71 },
|
||||
{ "date": 15918, "open": 169.99, "high": 170.81, "low": 169.9, "close": 170.66, "volume": 110438400, "adjusted": 170.66 },
|
||||
{ "date": 15919, "open": 170.28, "high": 170.97, "low": 170.05, "close": 170.95, "volume": 91116700, "adjusted": 170.95 },
|
||||
{ "date": 15922, "open": 170.57, "high": 170.96, "low": 170.35, "close": 170.7, "volume": 54072700, "adjusted": 170.7 },
|
||||
{ "date": 15923, "open": 170.37, "high": 170.74, "low": 169.35, "close": 169.73, "volume": 87495000, "adjusted": 169.73 },
|
||||
{ "date": 15924, "open": 169.19, "high": 169.43, "low": 168.55, "close": 169.18, "volume": 84854700, "adjusted": 169.18 },
|
||||
{ "date": 15925, "open": 169.98, "high": 170.18, "low": 168.93, "close": 169.8, "volume": 102181300, "adjusted": 169.8 },
|
||||
{ "date": 15926, "open": 169.58, "high": 170.1, "low": 168.72, "close": 169.31, "volume": 91757700, "adjusted": 169.31 },
|
||||
{ "date": 15929, "open": 168.46, "high": 169.31, "low": 168.38, "close": 169.11, "volume": 68593300, "adjusted": 169.11 },
|
||||
{ "date": 15930, "open": 169.41, "high": 169.9, "low": 168.41, "close": 169.61, "volume": 80806000, "adjusted": 169.61 },
|
||||
{ "date": 15931, "open": 169.53, "high": 169.8, "low": 168.7, "close": 168.74, "volume": 79829200, "adjusted": 168.74 },
|
||||
{ "date": 15932, "open": 167.41, "high": 167.43, "low": 166.09, "close": 166.38, "volume": 152931800, "adjusted": 166.38 },
|
||||
{ "date": 15933, "open": 166.06, "high": 166.63, "low": 165.5, "close": 165.83, "volume": 130868200, "adjusted": 165.83 },
|
||||
{ "date": 15936, "open": 165.64, "high": 166.21, "low": 164.76, "close": 164.77, "volume": 96437600, "adjusted": 164.77 },
|
||||
{ "date": 15937, "open": 165.04, "high": 166.2, "low": 164.86, "close": 165.58, "volume": 89294400, "adjusted": 165.58 },
|
||||
{ "date": 15938, "open": 165.12, "high": 166.03, "low": 164.19, "close": 164.56, "volume": 159530500, "adjusted": 164.56 },
|
||||
{ "date": 15939, "open": 164.9, "high": 166.3, "low": 164.89, "close": 166.06, "volume": 101471400, "adjusted": 166.06 },
|
||||
{ "date": 15940, "open": 166.55, "high": 166.83, "low": 165.77, "close": 166.62, "volume": 90888900, "adjusted": 166.62 },
|
||||
{ "date": 15943, "open": 166.79, "high": 167.3, "low": 165.89, "close": 166, "volume": 89702100, "adjusted": 166 },
|
||||
{ "date": 15944, "open": 164.36, "high": 166, "low": 163.21, "close": 163.33, "volume": 158619400, "adjusted": 163.33 },
|
||||
{ "date": 15945, "open": 163.26, "high": 164.49, "low": 163.05, "close": 163.91, "volume": 108113000, "adjusted": 163.91 },
|
||||
{ "date": 15946, "open": 163.55, "high": 165.04, "low": 163.4, "close": 164.17, "volume": 119200500, "adjusted": 164.17 },
|
||||
{ "date": 15947, "open": 164.51, "high": 164.53, "low": 163.17, "close": 163.65, "volume": 134560800, "adjusted": 163.65 },
|
||||
{ "date": 15951, "open": 165.23, "high": 165.58, "low": 163.7, "close": 164.39, "volume": 142322300, "adjusted": 164.39 },
|
||||
{ "date": 15952, "open": 164.43, "high": 166.03, "low": 164.13, "close": 165.75, "volume": 97304000, "adjusted": 165.75 },
|
||||
{ "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 }
|
||||
]
|
||||
}];
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.ohlcBar()
|
||||
.x(function (d) { return d['date'] })
|
||||
.y(function (d) { return d['close'] });
|
||||
d3.select("#chart1 svg")
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,40 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_ohlcChart {
|
||||
var data = [{
|
||||
values: [
|
||||
{ "date": 15707, "open": 145.11, "high": 146.15, "low": 144.73, "close": 146.06, "volume": 192059000, "adjusted": 144.65 },
|
||||
{ "date": 15953, "open": 165.85, "high": 166.4, "low": 165.73, "close": 165.96, "volume": 62930500, "adjusted": 165.96 }
|
||||
]
|
||||
}];
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.ohlcBarChart()
|
||||
.x(function (d) { return d['date'] })
|
||||
.y(function (d) { return d['close'] })
|
||||
.duration(250)
|
||||
.margin({ left: 75, bottom: 50 });
|
||||
|
||||
// chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the parent chart, so need to chain separately
|
||||
chart.xAxis
|
||||
.axisLabel("Dates")
|
||||
.tickFormat(function (d) {
|
||||
// I didn't feel like changing all the above date values
|
||||
// so I hack it to make each value fall on a different date
|
||||
return d3.time.format('%x')(new Date(new Date().valueOf() - (20000 * 86400000) + (d * 86400000)));
|
||||
});
|
||||
|
||||
chart.yAxis
|
||||
.axisLabel('Stock Price')
|
||||
.tickFormat(function (d, i) { return '$' + d3.format(',.1f')(d); });
|
||||
|
||||
|
||||
|
||||
d3.select("#chart1 svg")
|
||||
.datum(data)
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_parallelCoordinates {
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
|
||||
chart = nv.models.parallelCoordinates()
|
||||
.dimensionNames(["economy (mpg)", "cylinders", "displacement (cc)", "power (hp)", "weight (lb)", "0-60 mph (s)", "year"])
|
||||
.dimensionFormats(["0.5f", "e", "g", "d", "", "%", "p"])
|
||||
.lineTension(0.85);
|
||||
|
||||
|
||||
d3.select('#chart1 svg')
|
||||
.datum(data())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function data() {
|
||||
return [
|
||||
{
|
||||
"name": "AMC Ambassador Brougham",
|
||||
"economy (mpg)": "13",
|
||||
"cylinders": "8",
|
||||
"displacement (cc)": "360",
|
||||
"power (hp)": "175",
|
||||
"weight (lb)": "3821",
|
||||
"0-60 mph (s)": "11",
|
||||
"year": "73"
|
||||
},
|
||||
//skip to the end...
|
||||
{
|
||||
"name": "Volvo Diesel",
|
||||
"economy (mpg)": "30.7",
|
||||
"cylinders": "6",
|
||||
"displacement (cc)": "145",
|
||||
"power (hp)": "76",
|
||||
"weight (lb)": "3160",
|
||||
"0-60 mph (s)": "19.6",
|
||||
"year": "81"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_parallelCoordinatesChart {
|
||||
var chart;
|
||||
function resetBrush() {
|
||||
chart.filters([]);
|
||||
chart.active([]);
|
||||
chart.displayBrush(true);
|
||||
d3.select("#resetBrushButton").style("visibility", "hidden");
|
||||
chart.update();
|
||||
}
|
||||
|
||||
function resetSorting() {
|
||||
var dim = chart.dimensionData();
|
||||
dim.map(function (d) { return d.currentPosition = d.originalPosition; });
|
||||
dim.sort(function (a, b) { return a.originalPosition - b.originalPosition; });
|
||||
chart.dimensionData(dim);
|
||||
d3.select("#resetSortingButton").style("visibility", "hidden");
|
||||
chart.update();
|
||||
}
|
||||
|
||||
nv.addGraph(function () {
|
||||
|
||||
var dim = dimensions();
|
||||
chart = nv.models.parallelCoordinatesChart()
|
||||
.dimensionData(dim)
|
||||
.displayBrush(false)
|
||||
.lineTension(0.85);
|
||||
|
||||
var data = mydata();
|
||||
d3.select('#test')
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('brushEnd', function (e) {
|
||||
d3.select("#resetBrushButton").style("visibility", "visible");
|
||||
});
|
||||
|
||||
chart.dispatch.on('dimensionsOrder', function (e, b) {
|
||||
if (b) {
|
||||
d3.select("#resetSortingButton").style("visibility", "visible");
|
||||
}
|
||||
});
|
||||
|
||||
// update chart data values randomly
|
||||
setInterval(function () {
|
||||
data[0].values.P1 = Math.floor(Math.random() * 100).toString();
|
||||
chart.update();
|
||||
}, 4000);
|
||||
|
||||
// update chart data dimension randomly
|
||||
setInterval(function () {
|
||||
var element = {
|
||||
key: "P7",
|
||||
format: "p",
|
||||
tooltip: "year",
|
||||
}
|
||||
if (dim.length === 7) {
|
||||
dim.splice(dim.indexOf(element), 1);
|
||||
} else {
|
||||
dim.push(element);
|
||||
}
|
||||
chart.dimensionData(dim);
|
||||
chart.update();
|
||||
}, 10000);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function dimensions() {
|
||||
return [
|
||||
{
|
||||
key: "P1",
|
||||
format: "0.5f",
|
||||
tooltip: "economy (mpg)",
|
||||
},
|
||||
{
|
||||
key: "P2",
|
||||
format: "e",
|
||||
tooltip: "cylinders",
|
||||
},
|
||||
{
|
||||
key: "P3",
|
||||
format: "g",
|
||||
tooltip: "displacement (cc)",
|
||||
},
|
||||
{
|
||||
key: "P4",
|
||||
format: "d",
|
||||
tooltip: "power (hp)",
|
||||
},
|
||||
{
|
||||
key: "P5",
|
||||
format: "",
|
||||
tooltip: "weight (lb)",
|
||||
},
|
||||
{
|
||||
key: "P6",
|
||||
format: "%",
|
||||
tooltip: "0-60 mph (s)",
|
||||
},
|
||||
{
|
||||
key: "P7",
|
||||
format: "p",
|
||||
tooltip: "year",
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
function mydata() {
|
||||
return [
|
||||
{
|
||||
name: "Current design point",
|
||||
values: {
|
||||
"P1": "13",
|
||||
"P2": "8",
|
||||
"P3": "360",
|
||||
"P4": "175",
|
||||
"P5": "3821",
|
||||
"P6": "11",
|
||||
"P7": "73"
|
||||
},
|
||||
color: "red",
|
||||
strokeWidth: 2
|
||||
},
|
||||
{
|
||||
name: "DP1",
|
||||
values: {
|
||||
"P1": "15",
|
||||
"P2": "8",
|
||||
"P3": "390",
|
||||
"P4": "190",
|
||||
"P5": "3850",
|
||||
"P6": "8.5",
|
||||
"P7": "70"
|
||||
},
|
||||
color: "blue",
|
||||
strokeWidth: 1
|
||||
},
|
||||
{
|
||||
name: "DP2",
|
||||
values: {
|
||||
"P1": "17",
|
||||
"P2": "8",
|
||||
"P3": "304",
|
||||
"P4": "150",
|
||||
"P5": "3672",
|
||||
"P6": "11.5",
|
||||
"P7": "72"
|
||||
},
|
||||
color: "blue",
|
||||
strokeWidth: 2
|
||||
},
|
||||
{
|
||||
name: "DP3",
|
||||
values: {
|
||||
"P1": "20.2",
|
||||
"P2": "6",
|
||||
"P3": "232",
|
||||
"P4": "",
|
||||
"P5": "3265",
|
||||
"P6": "18.2",
|
||||
"P7": "79"
|
||||
},
|
||||
color: "blue",
|
||||
strokeWidth: 1
|
||||
},
|
||||
{
|
||||
name: "DP4",
|
||||
values: {
|
||||
"P1": "18.1",
|
||||
"P2": "6",
|
||||
"P3": "258",
|
||||
"P4": "120",
|
||||
"P5": "3410",
|
||||
"P6": "15.1",
|
||||
"P7": "78"
|
||||
},
|
||||
color: "blue",
|
||||
strokeWidth: 1
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_pie {
|
||||
|
||||
var testdata = [
|
||||
{ key: "One", y: 5 },
|
||||
{ key: "Two", y: 2 },
|
||||
{ key: "Three", y: 9 },
|
||||
{ key: "Four", y: 7 },
|
||||
{ key: "Five", y: 4 },
|
||||
{ key: "Six", y: 3 },
|
||||
{ key: "Seven", y: 0.5 }
|
||||
];
|
||||
|
||||
var width = 300;
|
||||
var height = 300;
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pie()
|
||||
.x(function (d) { return d.key; })
|
||||
.y(function (d) { return d.y; })
|
||||
.width(width)
|
||||
.height(height)
|
||||
.labelType(function (d, i, values) {
|
||||
return values.key + ':' + values.value;
|
||||
})
|
||||
;
|
||||
|
||||
d3.select("#test1")
|
||||
.datum([testdata])
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
// LISTEN TO CLICK EVENTS ON THE PIE CONTAINER
|
||||
// chart.dispatch.on('chartClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// LISTEN TO CLICK EVENTS ON THE SLICES OF THE PIE
|
||||
// chart.dispatch.on('elementClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// OTHER EVENTS DISPATCHED BY THE PIE INCLUDE: elementDblClick, elementMouseover, elementMouseout, elementMousemove, renderEnd
|
||||
// @see nv.models.pie
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pie()
|
||||
.x(function (d) { return d.key; })
|
||||
.y(function (d) { return d.y; })
|
||||
.width(width)
|
||||
.height(height)
|
||||
.labelType('percent')
|
||||
.valueFormat(d3.format('%'))
|
||||
.donut(true);
|
||||
|
||||
d3.select("#test2")
|
||||
.datum([testdata])
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,110 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_pieChart {
|
||||
|
||||
var testdata = [
|
||||
{ key: "One", y: 5, color: "#5F5" },
|
||||
{ key: "Two", y: 2 },
|
||||
{ key: "Three", y: 9 },
|
||||
{ key: "Four", y: 7 },
|
||||
{ key: "Five", y: 4 },
|
||||
{ key: "Six", y: 3 },
|
||||
{ key: "Seven", y: 0.5 }
|
||||
];
|
||||
var testdata2 = [
|
||||
{ key: "One", y: 5 },
|
||||
{ key: "Two", y: 2 },
|
||||
{ key: "Three", y: 9 },
|
||||
{ key: "Four", y: 7 },
|
||||
{ key: "Five", y: 4 },
|
||||
{ key: "Six", y: 3 },
|
||||
{ key: "Seven", y: 0.5 }
|
||||
];
|
||||
|
||||
var height = 350;
|
||||
var width = 350;
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(testdata2)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
// update chart data values randomly
|
||||
setInterval(function () {
|
||||
testdata2[0].y = Math.floor(Math.random() * 10);
|
||||
testdata2[1].y = Math.floor(Math.random() * 10);
|
||||
chart.update();
|
||||
}, 4000);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
nv.addGraph(function () {
|
||||
var chart = nv.models.pieChart()
|
||||
.x(function (d) { return d.key })
|
||||
.y(function (d) { return d.y })
|
||||
//.labelThreshold(.08)
|
||||
//.showLabels(false)
|
||||
.color(d3.scale.category20().range().slice(8))
|
||||
.growOnHover(false)
|
||||
.labelType('value')
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
// make it a half circle
|
||||
chart.pie
|
||||
.startAngle(function (d) { return d.startAngle / 2 - Math.PI / 2 })
|
||||
.endAngle(function (d) { return d.endAngle / 2 - Math.PI / 2 });
|
||||
|
||||
// MAKES LABELS OUTSIDE OF PIE/DONUT
|
||||
//chart.pie.donutLabelsOutside(true).donut(true);
|
||||
|
||||
// LISTEN TO CLICK EVENTS ON SLICES OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('elementClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// chart.pie.dispatch.on('chartClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// LISTEN TO DOUBLECLICK EVENTS ON SLICES OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('elementDblClick', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// LISTEN TO THE renderEnd EVENT OF THE PIE/DONUT
|
||||
// chart.pie.dispatch.on('renderEnd', function() {
|
||||
// code...
|
||||
// });
|
||||
|
||||
// OTHER EVENTS DISPATCHED BY THE PIE INCLUDE: elementMouseover, elementMouseout, elementMousemove
|
||||
// @see nv.models.pie
|
||||
|
||||
d3.select("#test2")
|
||||
.datum(testdata)
|
||||
.transition().duration(1200)
|
||||
.attr('width', width)
|
||||
.attr('height', height)
|
||||
.call(chart);
|
||||
|
||||
// disable and enable some of the sections
|
||||
var is_disabled = false;
|
||||
setInterval(function () {
|
||||
chart.dispatch['changeState']({ disabled: { 2: !is_disabled, 4: !is_disabled } });
|
||||
is_disabled = !is_disabled;
|
||||
}, 3000);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_scatter {
|
||||
nv.addGraph(function () {
|
||||
|
||||
var chart = nv.models.scatter()
|
||||
.margin({ top: 20, right: 20, bottom: 20, left: 20 })
|
||||
.pointSize(function (d) { return d.z })
|
||||
.useVoronoi(false);
|
||||
|
||||
d3.select('#test1')
|
||||
.datum(randomData())
|
||||
.transition().duration(500)
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
|
||||
function randomData() {
|
||||
var data = [];
|
||||
|
||||
for (var i = 0; i < 2; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (var j = 0; j < 100; j++) {
|
||||
data[i].values.push({ x: Math.random(), y: Math.random(), z: Math.random() });
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_scatterChart {
|
||||
// register our custom symbols to nvd3
|
||||
// make sure your path is valid given any size because size scales if the chart scales.
|
||||
nv.utils.symbolMap.set('thin-x', function (size) {
|
||||
size = Math.sqrt(size);
|
||||
return 'M' + (-size / 2) + ',' + (-size / 2) +
|
||||
'l' + size + ',' + size +
|
||||
'm0,' + -(size) +
|
||||
'l' + (-size) + ',' + size;
|
||||
});
|
||||
|
||||
// create the chart
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.scatterChart()
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
.useVoronoi(true)
|
||||
.color(d3.scale.category10().range())
|
||||
.duration(300)
|
||||
;
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
console.log('render complete');
|
||||
});
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'));
|
||||
chart.yAxis.tickFormat(d3.format('.02f'));
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(randomData(4, 40))
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
chart.dispatch.on('stateChange', function (e) { ('New State:', JSON.stringify(e)); });
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
// smiley and thin-x are our custom symbols!
|
||||
var data = [],
|
||||
shapes = ['thin-x', 'circle', 'cross', 'triangle-up', 'triangle-down', 'diamond', 'square'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: []
|
||||
});
|
||||
|
||||
for (var j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.round(Math.random() * 100) / 100,
|
||||
shape: shapes[j % shapes.length]
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,53 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_scatterPlusLineChart {
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.scatterChart()
|
||||
.showDistX(true)
|
||||
.showDistY(true)
|
||||
.duration(300)
|
||||
.color(d3.scale.category10().range());
|
||||
|
||||
chart.dispatch.on('renderEnd', function () {
|
||||
console.log('render complete');
|
||||
});
|
||||
|
||||
chart.xAxis.tickFormat(d3.format('.02f'));
|
||||
chart.yAxis.tickFormat(d3.format('.02f'));
|
||||
|
||||
d3.select('#test1 svg')
|
||||
.datum(nv.log(randomData(4, 40)))
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
chart.dispatch.on('stateChange', function (e) { nv.log('New State:', JSON.stringify(e)); });
|
||||
return chart;
|
||||
});
|
||||
|
||||
|
||||
function randomData(groups, points) { //# groups,# points per group
|
||||
var data = [],
|
||||
shapes = ['circle'],
|
||||
random = d3.random.normal();
|
||||
|
||||
for (i = 0; i < groups; i++) {
|
||||
data.push({
|
||||
key: 'Group ' + i,
|
||||
values: [],
|
||||
slope: Math.random() - .01,
|
||||
intercept: Math.random() - .5
|
||||
});
|
||||
|
||||
for (var j = 0; j < points; j++) {
|
||||
data[i].values.push({
|
||||
x: random(),
|
||||
y: random(),
|
||||
size: Math.random(),
|
||||
shape: shapes[j % shapes.length]
|
||||
});
|
||||
}
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_sparkLine {
|
||||
|
||||
nv.addGraph({
|
||||
generate: function () {
|
||||
var chart = nv.models.sparkline()
|
||||
.width(400)
|
||||
.height(30)
|
||||
|
||||
d3.select("#chart1")
|
||||
.datum(sine())
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
}
|
||||
});
|
||||
|
||||
function sine() {
|
||||
var sin = [];
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: i, y: Math.sin(i / 10) });
|
||||
}
|
||||
|
||||
return sin;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_sparkLinePlus {
|
||||
function defaultChartConfig(containerId, data) {
|
||||
nv.addGraph(function () {
|
||||
|
||||
var chart = nv.models.sparklinePlus();
|
||||
chart.margin({ left: 70 })
|
||||
.x(function (d, i) { return i })
|
||||
.showLastValue(true)
|
||||
.xTickFormat(function (d) {
|
||||
return d3.time.format('%x')(new Date(data[d].x))
|
||||
});
|
||||
|
||||
d3.select(containerId)
|
||||
.datum(data)
|
||||
.call(chart);
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
|
||||
defaultChartConfig("#chart1", sine());
|
||||
defaultChartConfig("#chart2", volatileChart(130.0, 0.02));
|
||||
defaultChartConfig("#chart3", volatileChart(25.0, 0.09, 30));
|
||||
|
||||
function sine() {
|
||||
var sin = [];
|
||||
var now = +new Date();
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
sin.push({ x: now + i * 1000 * 60 * 60 * 24, y: Math.sin(i / 10) });
|
||||
}
|
||||
|
||||
return sin;
|
||||
}
|
||||
|
||||
function volatileChart(startPrice, volatility, numPoints?) {
|
||||
var rval = [];
|
||||
var now = +new Date();
|
||||
numPoints = numPoints || 100;
|
||||
for (var i = 1; i < numPoints; i++) {
|
||||
|
||||
rval.push({ x: now + i * 1000 * 60 * 60 * 24, y: startPrice });
|
||||
var rnd = Math.random();
|
||||
var changePct = 2 * volatility * rnd;
|
||||
if (changePct > volatility) {
|
||||
changePct -= (2 * volatility);
|
||||
}
|
||||
startPrice = startPrice + startPrice * changePct;
|
||||
}
|
||||
return rval;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_stackArea {
|
||||
nv.addGraph({
|
||||
generate: function () {
|
||||
var n = 10, // number of layers
|
||||
m = 200; // number of samples per layer
|
||||
|
||||
//var data = stream_layers(n, m).map(function (data, i) {
|
||||
// return {
|
||||
// key: 'Stream' + i,
|
||||
// values: data
|
||||
// };
|
||||
//});
|
||||
var data: any;
|
||||
|
||||
|
||||
var width = nv.utils.windowSize().width;
|
||||
var height = nv.utils.windowSize().height;
|
||||
|
||||
var chart = nv.models.stackedArea()
|
||||
.width(width)
|
||||
.height(height);
|
||||
|
||||
var svg = d3.select('#chart svg').datum(data);
|
||||
svg.transition().duration(500).call(chart);
|
||||
return chart;
|
||||
},
|
||||
callback: function (graph) {
|
||||
|
||||
graph.dispatch.on('tooltipShow', function (e) {
|
||||
var offsetElement = document.getElementById("chart"),
|
||||
left = e.pos[0] + offsetElement.offsetLeft,
|
||||
top = e.pos[1] + offsetElement.offsetTop,
|
||||
formatterY = d3.format(",.2%"),
|
||||
formatterX = function (d) {
|
||||
return d3.time.format('%x')(new Date(d))
|
||||
};
|
||||
|
||||
var content = '<h3>' + e.series.key + '</h3>' +
|
||||
'<p>' +
|
||||
formatterY(graph.y()(e.point)) + ' at ' + formatterX(graph.x()(e.point)) +
|
||||
'</p>';
|
||||
|
||||
nv.tooltip.show([left, top], content);
|
||||
});
|
||||
|
||||
graph.dispatch.on('tooltipHide', function (e) {
|
||||
nv.tooltip.cleanup();
|
||||
});
|
||||
|
||||
nv.utils.windowResize(function () {
|
||||
var width = nv.utils.windowSize().width;
|
||||
var height = nv.utils.windowSize().height;
|
||||
|
||||
graph.width(width).height(height);
|
||||
d3.select('#chart svg').call(graph);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/* Inspired by Lee Byron's test data generator. */
|
||||
function stream_layers(n, m, o) {
|
||||
if (arguments.length < 3) o = 0;
|
||||
function bump(a) {
|
||||
var x = 1 / (.1 + Math.random()),
|
||||
y = 2 * Math.random() - .5,
|
||||
z = 10 / (.1 + Math.random());
|
||||
for (var i = 0; i < m; i++) {
|
||||
var w = (i / m - y) * z;
|
||||
a[i] += x * Math.exp(-w * w);
|
||||
}
|
||||
}
|
||||
return d3.range(n).map(function () {
|
||||
var a = [], i;
|
||||
for (i = 0; i < m; i++) a[i] = o + o * Math.random();
|
||||
for (i = 0; i < 5; i++) bump(a);
|
||||
return a.map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
/* Another layer generator using gamma distributions. */
|
||||
function stream_waves(n, m) {
|
||||
return d3.range(n).map(function (i) {
|
||||
return d3.range(m).map(function (j) {
|
||||
var x = 20 * j / m - i / 3;
|
||||
return 2 * x * Math.exp(-.5 * x);
|
||||
}).map(stream_index);
|
||||
});
|
||||
}
|
||||
|
||||
function stream_index(d, i) {
|
||||
return { x: i, y: Math.max(0, d) };
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_stackAreaChart {
|
||||
var histcatexplong = [
|
||||
{
|
||||
"key": "Consumer Discretionary",
|
||||
"values": [[1138683600000, 27.38478809681], [1141102800000, 27.371377218208], [1143781200000, 26.309915460827], [1146369600000, 26.425199957521], [1149048000000, 26.823411519395], [1151640000000, 23.850443591584], [1154318400000, 23.158355444054], [1156996800000, 22.998689393694], [1159588800000, 27.977128511299], [1162270800000, 29.073672469721], [1164862800000, 28.587640408904], [1167541200000, 22.788453687638], [1170219600000, 22.429199073597], [1172638800000, 22.324103271051], [1175313600000, 17.558388444186], [1177905600000, 16.769518096208], [1180584000000, 16.214738201302], [1183176000000, 18.729632971228], [1185854400000, 18.814523318848], [1188532800000, 19.789986451358], [1191124800000, 17.070049054933], [1193803200000, 16.121349575715], [1196398800000, 15.141659430091], [1199077200000, 17.175388025298], [1201755600000, 17.286592443521], [1204261200000, 16.323141626569], [1206936000000, 19.231263773952], [1209528000000, 18.446256391094], [1212206400000, 17.822632399764], [1214798400000, 15.539366475979], [1217476800000, 15.255131790216], [1220155200000, 15.660963922593], [1222747200000, 13.254482273697], [1225425600000, 11.920796202299], [1228021200000, 12.122809090925], [1230699600000, 15.691026271393], [1233378000000, 14.720881635107], [1235797200000, 15.387939360044], [1238472000000, 13.765436672229], [1241064000000, 14.6314458648], [1243742400000, 14.292446536221], [1246334400000, 16.170071367016], [1249012800000, 15.948135554337], [1251691200000, 16.612872685134], [1254283200000, 18.778338719091], [1256961600000, 16.75602606542], [1259557200000, 19.385804443147], [1262235600000, 22.950590240168], [1264914000000, 23.61159018141], [1267333200000, 25.708586989581], [1270008000000, 26.883915999885], [1272600000000, 25.893486687065], [1275278400000, 24.678914263176], [1277870400000, 25.937275793023], [1280548800000, 29.46138169384], [1283227200000, 27.357322961862], [1285819200000, 29.057235285673], [1288497600000, 28.549434189386], [1291093200000, 28.506352379723], [1293771600000, 29.449241421597], [1296450000000, 25.796838168807], [1298869200000, 28.740145449189], [1301544000000, 22.091744141872], [1304136000000, 25.079662545409], [1306814400000, 23.674906973064], [1309406400000, 23.41800274293], [1312084800000, 23.243644138871], [1314763200000, 31.591854066817], [1317355200000, 31.497112374114], [1320033600000, 26.672380820431], [1322629200000, 27.297080015495], [1325307600000, 20.174315530051], [1327986000000, 19.631084213899], [1330491600000, 20.366462219462], [1333166400000, 17.429019937289], [1335758400000, 16.75543633539], [1338436800000, 16.182906906042]]
|
||||
},
|
||||
{
|
||||
"key": "Consumer Staples",
|
||||
"values": [[1138683600000, 7.2800122043237], [1141102800000, 7.1187787503354], [1143781200000, 8.351887016482], [1146369600000, 8.4156698763993], [1149048000000, 8.1673298604231], [1151640000000, 5.5132447126042], [1154318400000, 6.1152537710599], [1156996800000, 6.076765091942], [1159588800000, 4.6304473798646], [1162270800000, 4.6301068469402], [1164862800000, 4.3466656309389], [1167541200000, 6.830104897003], [1170219600000, 7.241633040029], [1172638800000, 7.1432372054153], [1175313600000, 10.608942063374], [1177905600000, 10.914964549494], [1180584000000, 10.933223880565], [1183176000000, 8.3457524851265], [1185854400000, 8.1078413081882], [1188532800000, 8.2697185922474], [1191124800000, 8.4742436475968], [1193803200000, 8.4994601179319], [1196398800000, 8.7387319683243], [1199077200000, 6.8829183612895], [1201755600000, 6.984133637885], [1204261200000, 7.0860136043287], [1206936000000, 4.3961787956053], [1209528000000, 3.8699674365231], [1212206400000, 3.6928925238305], [1214798400000, 6.7571718894253], [1217476800000, 6.4367313362344], [1220155200000, 6.4048441521454], [1222747200000, 5.4643833239669], [1225425600000, 5.3150786833374], [1228021200000, 5.3011272612576], [1230699600000, 4.1203601430809], [1233378000000, 4.0881783200525], [1235797200000, 4.1928665957189], [1238472000000, 7.0249415663205], [1241064000000, 7.006530880769], [1243742400000, 6.994835633224], [1246334400000, 6.1220222336254], [1249012800000, 6.1177436137653], [1251691200000, 6.1413396231981], [1254283200000, 4.8046006145874], [1256961600000, 4.6647600660544], [1259557200000, 4.544865006255], [1262235600000, 6.0488249316539], [1264914000000, 6.3188669540206], [1267333200000, 6.5873958262306], [1270008000000, 6.2281189839578], [1272600000000, 5.8948915746059], [1275278400000, 5.5967320482214], [1277870400000, 0.99784432084837], [1280548800000, 1.0950794175359], [1283227200000, 0.94479734407491], [1285819200000, 1.222093988688], [1288497600000, 1.335093106856], [1291093200000, 1.3302565104985], [1293771600000, 1.340824670897], [1296450000000, 0], [1298869200000, 0], [1301544000000, 0], [1304136000000, 0], [1306814400000, 0], [1309406400000, 0], [1312084800000, 0], [1314763200000, 0], [1317355200000, 4.4583692315], [1320033600000, 3.6493043348059], [1322629200000, 3.8610064091761], [1325307600000, 5.5144800685202], [1327986000000, 5.1750695220792], [1330491600000, 5.6710066952691], [1333166400000, 8.5658461590953], [1335758400000, 8.6135447714243], [1338436800000, 8.0231460925212]]
|
||||
},
|
||||
{
|
||||
"key": "Energy",
|
||||
"values": [[1138683600000, 1.544303464167], [1141102800000, 1.4387289432421], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 1.328626801128], [1154318400000, 1.2874050802627], [1156996800000, 1.0872743105593], [1159588800000, 0.96042562635813], [1162270800000, 0.93139372870616], [1164862800000, 0.94432167305385], [1167541200000, 1.277750166208], [1170219600000, 1.2204893886811], [1172638800000, 1.207489123122], [1175313600000, 1.2490651414113], [1177905600000, 1.2593129913052], [1180584000000, 1.373329808388], [1183176000000, 0], [1185854400000, 0], [1188532800000, 0], [1191124800000, 0], [1193803200000, 0], [1196398800000, 0], [1199077200000, 0], [1201755600000, 0], [1204261200000, 0], [1206936000000, 0], [1209528000000, 0], [1212206400000, 0], [1214798400000, 0], [1217476800000, 0], [1220155200000, 0], [1222747200000, 1.4516108933695], [1225425600000, 1.1856025268225], [1228021200000, 1.3430470355439], [1230699600000, 2.2752595354509], [1233378000000, 2.4031560010523], [1235797200000, 2.0822430731926], [1238472000000, 1.5640902826938], [1241064000000, 1.5812873972356], [1243742400000, 1.9462448548894], [1246334400000, 2.9464870223957], [1249012800000, 3.0744699383222], [1251691200000, 2.9422304628446], [1254283200000, 2.7503075599999], [1256961600000, 2.6506701800427], [1259557200000, 2.8005425319977], [1262235600000, 2.6816184971185], [1264914000000, 2.681206271327], [1267333200000, 2.8195488011259], [1270008000000, 0], [1272600000000, 0], [1275278400000, 0], [1277870400000, 1.0687057346382], [1280548800000, 1.2539400544134], [1283227200000, 1.1862969445955], [1285819200000, 0], [1288497600000, 0], [1291093200000, 0], [1293771600000, 0], [1296450000000, 1.941972859484], [1298869200000, 2.1142247697552], [1301544000000, 2.3788590206824], [1304136000000, 2.5337302877545], [1306814400000, 2.3163370395199], [1309406400000, 2.0645451843195], [1312084800000, 2.1004446672411], [1314763200000, 3.6301875804303], [1317355200000, 2.454204664652], [1320033600000, 2.196082370894], [1322629200000, 2.3358418255202], [1325307600000, 0], [1327986000000, 0], [1330491600000, 0], [1333166400000, 0.39001201038526], [1335758400000, 0.30945472725559], [1338436800000, 0.31062439305591]]
|
||||
},
|
||||
{
|
||||
"key": "Financials",
|
||||
"values": [[1138683600000, 13.356778764352], [1141102800000, 13.611196863271], [1143781200000, 6.895903006119], [1146369600000, 6.9939633271352], [1149048000000, 6.7241510257675], [1151640000000, 5.5611293669516], [1154318400000, 5.6086488714041], [1156996800000, 5.4962849907033], [1159588800000, 6.9193153169279], [1162270800000, 7.0016334389777], [1164862800000, 6.7865422443273], [1167541200000, 9.0006454225383], [1170219600000, 9.2233916171431], [1172638800000, 8.8929316009479], [1175313600000, 10.345937520404], [1177905600000, 10.075914677026], [1180584000000, 10.089006188111], [1183176000000, 10.598330295008], [1185854400000, 9.968954653301], [1188532800000, 9.7740580198146], [1191124800000, 10.558483060626], [1193803200000, 9.9314651823603], [1196398800000, 9.3997715873769], [1199077200000, 8.4086493387262], [1201755600000, 8.9698309085926], [1204261200000, 8.2778357995396], [1206936000000, 8.8585045600123], [1209528000000, 8.7013756413322], [1212206400000, 7.7933605469443], [1214798400000, 7.0236183483064], [1217476800000, 6.9873088186829], [1220155200000, 6.8031713070097], [1222747200000, 6.6869531315723], [1225425600000, 6.138256993963], [1228021200000, 5.6434994016354], [1230699600000, 5.495220262512], [1233378000000, 4.6885326869846], [1235797200000, 4.4524349883438], [1238472000000, 5.6766520778185], [1241064000000, 5.7675774480752], [1243742400000, 5.7882863168337], [1246334400000, 7.2666010034924], [1249012800000, 7.519182132226], [1251691200000, 7.849651451445], [1254283200000, 10.383992037985], [1256961600000, 9.0653691861818], [1259557200000, 9.6705248324159], [1262235600000, 10.856380561349], [1264914000000, 11.27452370892], [1267333200000, 11.754156529088], [1270008000000, 8.2870811422456], [1272600000000, 8.0210264360699], [1275278400000, 7.5375074474865], [1277870400000, 8.3419527338039], [1280548800000, 9.4197471818443], [1283227200000, 8.7321733185797], [1285819200000, 9.6627062648126], [1288497600000, 10.187962234549], [1291093200000, 9.8144201733476], [1293771600000, 10.275723361713], [1296450000000, 16.796066079353], [1298869200000, 17.543254984075], [1301544000000, 16.673660675084], [1304136000000, 17.963944353609], [1306814400000, 16.637740867211], [1309406400000, 15.84857094609], [1312084800000, 14.767303362182], [1314763200000, 24.778452182432], [1317355200000, 18.370353229999], [1320033600000, 15.2531374291], [1322629200000, 14.989600840649], [1325307600000, 16.052539160125], [1327986000000, 16.424390322793], [1330491600000, 17.884020741105], [1333166400000, 7.1424929577921], [1335758400000, 7.8076213051482], [1338436800000, 7.2462684949232]]
|
||||
},
|
||||
{
|
||||
"key": "Health Care",
|
||||
"values": [[1138683600000, 14.212410956029], [1141102800000, 13.973193618249], [1143781200000, 15.218233920665], [1146369600000, 14.38210972745], [1149048000000, 13.894310878491], [1151640000000, 15.593086090032], [1154318400000, 16.244839695188], [1156996800000, 16.017088850646], [1159588800000, 14.183951830055], [1162270800000, 14.148523245697], [1164862800000, 13.424326059972], [1167541200000, 12.974450435753], [1170219600000, 13.23247041802], [1172638800000, 13.318762655574], [1175313600000, 15.961407746104], [1177905600000, 16.287714639805], [1180584000000, 16.246590583889], [1183176000000, 17.564505594809], [1185854400000, 17.872725373165], [1188532800000, 18.018998508757], [1191124800000, 15.584518016603], [1193803200000, 15.480850647181], [1196398800000, 15.699120036984], [1199077200000, 19.184281817226], [1201755600000, 19.691226605207], [1204261200000, 18.982314051295], [1206936000000, 18.707820309008], [1209528000000, 17.459630929761], [1212206400000, 16.500616076782], [1214798400000, 18.086324003979], [1217476800000, 18.929464156258], [1220155200000, 18.233728682084], [1222747200000, 16.315776297325], [1225425600000, 14.63289219025], [1228021200000, 14.667835024478], [1230699600000, 13.946993947308], [1233378000000, 14.394304684397], [1235797200000, 13.724462792967], [1238472000000, 10.930879035806], [1241064000000, 9.8339915513708], [1243742400000, 10.053858541872], [1246334400000, 11.786998438287], [1249012800000, 11.780994901769], [1251691200000, 11.305889670276], [1254283200000, 10.918452290083], [1256961600000, 9.6811395055706], [1259557200000, 10.971529744038], [1262235600000, 13.330210480209], [1264914000000, 14.592637568961], [1267333200000, 14.605329141157], [1270008000000, 13.936853794037], [1272600000000, 12.189480759072], [1275278400000, 11.676151385046], [1277870400000, 13.058852800017], [1280548800000, 13.62891543203], [1283227200000, 13.811107569918], [1285819200000, 13.786494560787], [1288497600000, 14.04516285753], [1291093200000, 13.697412447288], [1293771600000, 13.677681376221], [1296450000000, 19.961511864531], [1298869200000, 21.049198298158], [1301544000000, 22.687631094008], [1304136000000, 25.469010617433], [1306814400000, 24.883799437121], [1309406400000, 24.203843814248], [1312084800000, 22.138760964038], [1314763200000, 16.034636966228], [1317355200000, 15.394958944556], [1320033600000, 12.625642461969], [1322629200000, 12.973735699739], [1325307600000, 15.786018336149], [1327986000000, 15.227368020134], [1330491600000, 15.899752650734], [1333166400000, 18.994731295388], [1335758400000, 18.450055817702], [1338436800000, 17.863719889669]]
|
||||
},
|
||||
{
|
||||
"key": "Industrials",
|
||||
"values": [[1138683600000, 7.1590087090398], [1141102800000, 7.1297210970108], [1143781200000, 5.5774588290586], [1146369600000, 5.4977254491156], [1149048000000, 5.5138153113634], [1151640000000, 4.3198084032122], [1154318400000, 3.9179295839125], [1156996800000, 3.8110093051479], [1159588800000, 5.5629020916939], [1162270800000, 5.7241673711336], [1164862800000, 5.4715049695004], [1167541200000, 4.9193763571618], [1170219600000, 5.136053947247], [1172638800000, 5.1327258759766], [1175313600000, 5.1888943925082], [1177905600000, 5.5191481293345], [1180584000000, 5.6093625614921], [1183176000000, 4.2706312987397], [1185854400000, 4.4453235132117], [1188532800000, 4.6228003109761], [1191124800000, 5.0645764756954], [1193803200000, 5.0723447230959], [1196398800000, 5.1457765818846], [1199077200000, 5.4067851597282], [1201755600000, 5.472241916816], [1204261200000, 5.3742740389688], [1206936000000, 6.251751933664], [1209528000000, 6.1406852153472], [1212206400000, 5.8164385627465], [1214798400000, 5.4255846656171], [1217476800000, 5.3738499417204], [1220155200000, 5.1815627753979], [1222747200000, 5.0305983235349], [1225425600000, 4.6823058607165], [1228021200000, 4.5941481589093], [1230699600000, 5.4669598474575], [1233378000000, 5.1249037357], [1235797200000, 4.3504421250742], [1238472000000, 4.6260881026002], [1241064000000, 5.0140402458946], [1243742400000, 4.7458462454774], [1246334400000, 6.0437019654564], [1249012800000, 6.4595216249754], [1251691200000, 6.6420468254155], [1254283200000, 5.8927271960913], [1256961600000, 5.4712108838003], [1259557200000, 6.1220254207747], [1262235600000, 5.5385935169255], [1264914000000, 5.7383377612639], [1267333200000, 6.1715976730415], [1270008000000, 4.0102262681174], [1272600000000, 3.769389679692], [1275278400000, 3.5301571031152], [1277870400000, 2.7660252652526], [1280548800000, 3.1409983385775], [1283227200000, 3.0528024863055], [1285819200000, 4.3126123157971], [1288497600000, 4.594654041683], [1291093200000, 4.5424126126793], [1293771600000, 4.7790043987302], [1296450000000, 7.4969154058289], [1298869200000, 7.9424751557821], [1301544000000, 7.1560736250547], [1304136000000, 7.9478117337855], [1306814400000, 7.4109214848895], [1309406400000, 7.5966457641101], [1312084800000, 7.165754444071], [1314763200000, 5.4816702524302], [1317355200000, 4.9893656089584], [1320033600000, 4.498385105327], [1322629200000, 4.6776090358151], [1325307600000, 8.1350814368063], [1327986000000, 8.0732769990652], [1330491600000, 8.5602340387277], [1333166400000, 5.1293714074325], [1335758400000, 5.2586794619016], [1338436800000, 5.1100853569977]]
|
||||
},
|
||||
{
|
||||
"key": "Information Technology",
|
||||
"values": [[1138683600000, 13.242301508051], [1141102800000, 12.863536342042], [1143781200000, 21.034044171629], [1146369600000, 21.419084618803], [1149048000000, 21.142678863691], [1151640000000, 26.568489677529], [1154318400000, 24.839144939905], [1156996800000, 25.456187462167], [1159588800000, 26.350164502826], [1162270800000, 26.47833320519], [1164862800000, 26.425979547847], [1167541200000, 28.191461582256], [1170219600000, 28.930307448808], [1172638800000, 29.521413891117], [1175313600000, 28.188285966466], [1177905600000, 27.704619625832], [1180584000000, 27.490862424829], [1183176000000, 28.770679721286], [1185854400000, 29.060480671449], [1188532800000, 28.240998844973], [1191124800000, 33.004893194127], [1193803200000, 34.075180359928], [1196398800000, 32.548560664833], [1199077200000, 30.629727432728], [1201755600000, 28.642858788159], [1204261200000, 27.973575227842], [1206936000000, 27.393351882726], [1209528000000, 28.476095288523], [1212206400000, 29.29667866426], [1214798400000, 29.222333802896], [1217476800000, 28.092966093843], [1220155200000, 28.107159262922], [1222747200000, 25.482974832098], [1225425600000, 21.208115993834], [1228021200000, 20.295043095268], [1230699600000, 15.925754618401], [1233378000000, 17.162864628346], [1235797200000, 17.084345773174], [1238472000000, 22.246007102281], [1241064000000, 24.530543998509], [1243742400000, 25.084184918242], [1246334400000, 16.606166527358], [1249012800000, 17.239620011628], [1251691200000, 17.336739127379], [1254283200000, 25.478492475753], [1256961600000, 23.017152085245], [1259557200000, 25.617745423683], [1262235600000, 24.061133998642], [1264914000000, 23.223933318644], [1267333200000, 24.425887263937], [1270008000000, 35.501471156693], [1272600000000, 33.775013878676], [1275278400000, 30.417993630285], [1277870400000, 30.023598978467], [1280548800000, 33.327519522436], [1283227200000, 31.963388450371], [1285819200000, 30.498967232092], [1288497600000, 32.403696817912], [1291093200000, 31.47736071922], [1293771600000, 31.53259666241], [1296450000000, 41.760282761548], [1298869200000, 45.605771243237], [1301544000000, 39.986557966215], [1304136000000, 43.846330510051], [1306814400000, 39.857316881857], [1309406400000, 37.675127768208], [1312084800000, 35.775077970313], [1314763200000, 48.631009702577], [1317355200000, 42.830831754505], [1320033600000, 35.611502589362], [1322629200000, 35.320136981738], [1325307600000, 31.564136901516], [1327986000000, 32.074407502433], [1330491600000, 35.053013769976], [1333166400000, 26.434568573937], [1335758400000, 25.305617871002], [1338436800000, 24.520919418236]]
|
||||
},
|
||||
{
|
||||
"key": "Materials",
|
||||
"values": [[1138683600000, 5.5806167415681], [1141102800000, 5.4539047069985], [1143781200000, 7.6728842432362], [1146369600000, 7.719946716654], [1149048000000, 8.0144619912942], [1151640000000, 7.942223133434], [1154318400000, 8.3998279827444], [1156996800000, 8.532324572605], [1159588800000, 4.7324285199763], [1162270800000, 4.7402397487697], [1164862800000, 4.9042069355168], [1167541200000, 5.9583963430882], [1170219600000, 6.3693899239171], [1172638800000, 6.261153903813], [1175313600000, 5.3443942184584], [1177905600000, 5.4932111235361], [1180584000000, 5.5747393101109], [1183176000000, 5.3833633060013], [1185854400000, 5.5125898831832], [1188532800000, 5.8116112661327], [1191124800000, 4.3962296939996], [1193803200000, 4.6967663605521], [1196398800000, 4.7963004350914], [1199077200000, 4.1817985183351], [1201755600000, 4.3797643870182], [1204261200000, 4.6966642197965], [1206936000000, 4.3609995132565], [1209528000000, 4.4736290996496], [1212206400000, 4.3749762738128], [1214798400000, 3.3274661194507], [1217476800000, 3.0316184691337], [1220155200000, 2.5718140204728], [1222747200000, 2.7034994044603], [1225425600000, 2.2033786591364], [1228021200000, 1.9850621240805], [1230699600000, 0], [1233378000000, 0], [1235797200000, 0], [1238472000000, 0], [1241064000000, 0], [1243742400000, 0], [1246334400000, 0], [1249012800000, 0], [1251691200000, 0], [1254283200000, 0.44495950017788], [1256961600000, 0.33945469262483], [1259557200000, 0.38348269455195], [1262235600000, 0], [1264914000000, 0], [1267333200000, 0], [1270008000000, 0], [1272600000000, 0], [1275278400000, 0], [1277870400000, 0], [1280548800000, 0], [1283227200000, 0], [1285819200000, 0], [1288497600000, 0], [1291093200000, 0], [1293771600000, 0], [1296450000000, 0.52216435716176], [1298869200000, 0.59275786698454], [1301544000000, 0], [1304136000000, 0], [1306814400000, 0], [1309406400000, 0], [1312084800000, 0], [1314763200000, 0], [1317355200000, 0], [1320033600000, 0], [1322629200000, 0], [1325307600000, 0], [1327986000000, 0], [1330491600000, 0], [1333166400000, 0], [1335758400000, 0], [1338436800000, 0]]
|
||||
},
|
||||
{
|
||||
"key": "Telecommunication Services",
|
||||
"values": [[1138683600000, 3.7056975170243], [1141102800000, 3.7561118692318], [1143781200000, 2.861913700854], [1146369600000, 2.9933744103381], [1149048000000, 2.7127537218463], [1151640000000, 3.1195497076283], [1154318400000, 3.4066964004508], [1156996800000, 3.3754571113569], [1159588800000, 2.2965579982924], [1162270800000, 2.4486818633018], [1164862800000, 2.4002308848517], [1167541200000, 1.9649579750349], [1170219600000, 1.9385263638056], [1172638800000, 1.9128975336387], [1175313600000, 2.3412869836298], [1177905600000, 2.4337870351445], [1180584000000, 2.62179703171], [1183176000000, 3.2642864957929], [1185854400000, 3.3200396223709], [1188532800000, 3.3934212707572], [1191124800000, 4.2822327088179], [1193803200000, 4.1474964228541], [1196398800000, 4.1477082879801], [1199077200000, 5.2947122916128], [1201755600000, 5.2919843508028], [1204261200000, 5.1989783050309], [1206936000000, 3.5603057673513], [1209528000000, 3.3009087690692], [1212206400000, 3.1784852603792], [1214798400000, 4.5889503538868], [1217476800000, 4.401779617494], [1220155200000, 4.2208301828278], [1222747200000, 3.89396671475], [1225425600000, 3.0423832241354], [1228021200000, 3.135520611578], [1230699600000, 1.9631418164089], [1233378000000, 1.8963543874958], [1235797200000, 1.8266636017025], [1238472000000, 0.93136635895188], [1241064000000, 0.92737801918888], [1243742400000, 0.97591889805002], [1246334400000, 2.6841193805515], [1249012800000, 2.5664341140531], [1251691200000, 2.3887523699873], [1254283200000, 1.1737801663681], [1256961600000, 1.0953582317281], [1259557200000, 1.2495674976653], [1262235600000, 0.36607452464754], [1264914000000, 0.3548719047291], [1267333200000, 0.36769242398939], [1270008000000, 0], [1272600000000, 0], [1275278400000, 0], [1277870400000, 0], [1280548800000, 0], [1283227200000, 0], [1285819200000, 0.85450741275337], [1288497600000, 0.91360317921637], [1291093200000, 0.89647678692269], [1293771600000, 0.87800687192639], [1296450000000, 0], [1298869200000, 0], [1301544000000, 0.43668720882994], [1304136000000, 0.4756523602692], [1306814400000, 0.46947368328469], [1309406400000, 0.45138896152316], [1312084800000, 0.43828726648117], [1314763200000, 2.0820861395316], [1317355200000, 0.9364411075395], [1320033600000, 0.60583907839773], [1322629200000, 0.61096950747437], [1325307600000, 0], [1327986000000, 0], [1330491600000, 0], [1333166400000, 0], [1335758400000, 0], [1338436800000, 0]]
|
||||
},
|
||||
{
|
||||
"key": "Utilities",
|
||||
"values": [[1138683600000, 0], [1141102800000, 0], [1143781200000, 0], [1146369600000, 0], [1149048000000, 0], [1151640000000, 0], [1154318400000, 0], [1156996800000, 0], [1159588800000, 0], [1162270800000, 0], [1164862800000, 0], [1167541200000, 0], [1170219600000, 0], [1172638800000, 0], [1175313600000, 0], [1177905600000, 0], [1180584000000, 0], [1183176000000, 0], [1185854400000, 0], [1188532800000, 0], [1191124800000, 0], [1193803200000, 0], [1196398800000, 0], [1199077200000, 0], [1201755600000, 0], [1204261200000, 0], [1206936000000, 0], [1209528000000, 0], [1212206400000, 0], [1214798400000, 0], [1217476800000, 0], [1220155200000, 0], [1222747200000, 0], [1225425600000, 0], [1228021200000, 0], [1230699600000, 0], [1233378000000, 0], [1235797200000, 0], [1238472000000, 0], [1241064000000, 0], [1243742400000, 0], [1246334400000, 0], [1249012800000, 0], [1251691200000, 0], [1254283200000, 0], [1256961600000, 0], [1259557200000, 0], [1262235600000, 0], [1264914000000, 0], [1267333200000, 0], [1270008000000, 0], [1272600000000, 0], [1275278400000, 0], [1277870400000, 0], [1280548800000, 0], [1283227200000, 0], [1285819200000, 0], [1288497600000, 0], [1291093200000, 0], [1293771600000, 0], [1296450000000, 0], [1298869200000, 0], [1301544000000, 0], [1304136000000, 0], [1306814400000, 0], [1309406400000, 0], [1312084800000, 0], [1314763200000, 0], [1317355200000, 0], [1320033600000, 0], [1322629200000, 0], [1325307600000, 0], [1327986000000, 0], [1330491600000, 0], [1333166400000, 0], [1335758400000, 0], [1338436800000, 0]]
|
||||
}
|
||||
];
|
||||
|
||||
var colors = d3.scale.category20();
|
||||
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.stackedAreaChart()
|
||||
.useInteractiveGuideline(true)
|
||||
.x(function (d) { return d[0] })
|
||||
.y(function (d) { return d[1] })
|
||||
.controlLabels({ stacked: "Stacked" })
|
||||
.duration(300);
|
||||
|
||||
chart.xAxis.tickFormat(function (d) { return d3.time.format('%x')(new Date(d)) });
|
||||
chart.yAxis.tickFormat(d3.format(',.4f'));
|
||||
|
||||
chart.legend.vers('furious');
|
||||
|
||||
d3.select('#chart1')
|
||||
.datum(histcatexplong)
|
||||
.transition().duration(1000)
|
||||
.call(chart)
|
||||
.each('start', function () {
|
||||
setTimeout(function () {
|
||||
d3.selectAll('#chart1 *').each(function () {
|
||||
if (this.__transition__)
|
||||
this.__transition__.duration = 1;
|
||||
})
|
||||
}, 0)
|
||||
});
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
return chart;
|
||||
});
|
||||
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_sunburst {
|
||||
|
||||
var chart;
|
||||
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.sunburstChart();
|
||||
|
||||
chart.color(d3.scale.category20c());
|
||||
|
||||
d3.select("#test1")
|
||||
.datum(getData())
|
||||
.call(chart);
|
||||
|
||||
nv.utils.windowResize(chart.update);
|
||||
|
||||
return chart;
|
||||
});
|
||||
|
||||
function getData() {
|
||||
return [{
|
||||
"name": "flare",
|
||||
"children": [
|
||||
{
|
||||
"name": "analytics",
|
||||
"children": [
|
||||
{
|
||||
"name": "cluster",
|
||||
"children": [
|
||||
{ "name": "AgglomerativeCluster", "size": 3938 },
|
||||
{ "name": "CommunityStructure", "size": 3812 },
|
||||
{ "name": "HierarchicalCluster", "size": 6714 },
|
||||
{ "name": "MergeEdge", "size": 743 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "graph",
|
||||
"children": [
|
||||
{ "name": "BetweennessCentrality", "size": 3534 },
|
||||
{ "name": "LinkDistance", "size": 5731 },
|
||||
{ "name": "MaxFlowMinCut", "size": 7840 },
|
||||
{ "name": "ShortestPaths", "size": 5914 },
|
||||
{ "name": "SpanningTree", "size": 3416 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "optimization",
|
||||
"children": [
|
||||
{ "name": "AspectRatioBanker", "size": 7074 }
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "animate",
|
||||
"children": [
|
||||
{ "name": "Easing", "size": 17010 },
|
||||
{ "name": "FunctionSequence", "size": 5842 },
|
||||
{
|
||||
"name": "interpolate",
|
||||
"children": [
|
||||
{ "name": "ArrayInterpolator", "size": 1983 },
|
||||
{ "name": "ColorInterpolator", "size": 2047 },
|
||||
{ "name": "DateInterpolator", "size": 1375 },
|
||||
{ "name": "Interpolator", "size": 8746 },
|
||||
{ "name": "MatrixInterpolator", "size": 2202 },
|
||||
{ "name": "NumberInterpolator", "size": 1382 },
|
||||
{ "name": "ObjectInterpolator", "size": 1629 },
|
||||
{ "name": "PointInterpolator", "size": 1675 },
|
||||
{ "name": "RectangleInterpolator", "size": 2042 }
|
||||
]
|
||||
},
|
||||
{ "name": "ISchedulable", "size": 1041 },
|
||||
{ "name": "Parallel", "size": 5176 },
|
||||
{ "name": "Pause", "size": 449 },
|
||||
{ "name": "Scheduler", "size": 5593 },
|
||||
{ "name": "Sequence", "size": 5534 },
|
||||
{ "name": "Transition", "size": 9201 },
|
||||
{ "name": "Transitioner", "size": 19975 },
|
||||
{ "name": "TransitionEvent", "size": 1116 },
|
||||
{ "name": "Tween", "size": 6006 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{
|
||||
"name": "converters",
|
||||
"children": [
|
||||
{ "name": "Converters", "size": 721 },
|
||||
{ "name": "DelimitedTextConverter", "size": 4294 },
|
||||
{ "name": "GraphMLConverter", "size": 9800 },
|
||||
{ "name": "IDataConverter", "size": 1314 },
|
||||
{ "name": "JSONConverter", "size": 2220 }
|
||||
]
|
||||
},
|
||||
{ "name": "DataField", "size": 1759 },
|
||||
{ "name": "DataSchema", "size": 2165 },
|
||||
{ "name": "DataSet", "size": 586 },
|
||||
{ "name": "DataSource", "size": 3331 },
|
||||
{ "name": "DataTable", "size": 772 },
|
||||
{ "name": "DataUtil", "size": 3322 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "display",
|
||||
"children": [
|
||||
{ "name": "DirtySprite", "size": 8833 },
|
||||
{ "name": "LineSprite", "size": 1732 },
|
||||
{ "name": "RectSprite", "size": 3623 },
|
||||
{ "name": "TextSprite", "size": 10066 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "flex",
|
||||
"children": [
|
||||
{ "name": "FlareVis", "size": 4116 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "physics",
|
||||
"children": [
|
||||
{ "name": "DragForce", "size": 1082 },
|
||||
{ "name": "GravityForce", "size": 1336 },
|
||||
{ "name": "IForce", "size": 319 },
|
||||
{ "name": "NBodyForce", "size": 10498 },
|
||||
{ "name": "Particle", "size": 2822 },
|
||||
{ "name": "Simulation", "size": 9983 },
|
||||
{ "name": "Spring", "size": 2213 },
|
||||
{ "name": "SpringForce", "size": 1681 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "query",
|
||||
"children": [
|
||||
{ "name": "AggregateExpression", "size": 1616 },
|
||||
{ "name": "And", "size": 1027 },
|
||||
{ "name": "Arithmetic", "size": 3891 },
|
||||
{ "name": "Average", "size": 891 },
|
||||
{ "name": "BinaryExpression", "size": 2893 },
|
||||
{ "name": "Comparison", "size": 5103 },
|
||||
{ "name": "CompositeExpression", "size": 3677 },
|
||||
{ "name": "Count", "size": 781 },
|
||||
{ "name": "DateUtil", "size": 4141 },
|
||||
{ "name": "Distinct", "size": 933 },
|
||||
{ "name": "Expression", "size": 5130 },
|
||||
{ "name": "ExpressionIterator", "size": 3617 },
|
||||
{ "name": "Fn", "size": 3240 },
|
||||
{ "name": "If", "size": 2732 },
|
||||
{ "name": "IsA", "size": 2039 },
|
||||
{ "name": "Literal", "size": 1214 },
|
||||
{ "name": "Match", "size": 3748 },
|
||||
{ "name": "Maximum", "size": 843 },
|
||||
{
|
||||
"name": "methods",
|
||||
"children": [
|
||||
{ "name": "add", "size": 593 },
|
||||
{ "name": "and", "size": 330 },
|
||||
{ "name": "average", "size": 287 },
|
||||
{ "name": "count", "size": 277 },
|
||||
{ "name": "distinct", "size": 292 },
|
||||
{ "name": "div", "size": 595 },
|
||||
{ "name": "eq", "size": 594 },
|
||||
{ "name": "fn", "size": 460 },
|
||||
{ "name": "gt", "size": 603 },
|
||||
{ "name": "gte", "size": 625 },
|
||||
{ "name": "iff", "size": 748 },
|
||||
{ "name": "isa", "size": 461 },
|
||||
{ "name": "lt", "size": 597 },
|
||||
{ "name": "lte", "size": 619 },
|
||||
{ "name": "max", "size": 283 },
|
||||
{ "name": "min", "size": 283 },
|
||||
{ "name": "mod", "size": 591 },
|
||||
{ "name": "mul", "size": 603 },
|
||||
{ "name": "neq", "size": 599 },
|
||||
{ "name": "not", "size": 386 },
|
||||
{ "name": "or", "size": 323 },
|
||||
{ "name": "orderby", "size": 307 },
|
||||
{ "name": "range", "size": 772 },
|
||||
{ "name": "select", "size": 296 },
|
||||
{ "name": "stddev", "size": 363 },
|
||||
{ "name": "sub", "size": 600 },
|
||||
{ "name": "sum", "size": 280 },
|
||||
{ "name": "update", "size": 307 },
|
||||
{ "name": "variance", "size": 335 },
|
||||
{ "name": "where", "size": 299 },
|
||||
{ "name": "xor", "size": 354 },
|
||||
{ "name": "_", "size": 264 }
|
||||
]
|
||||
},
|
||||
{ "name": "Minimum", "size": 843 },
|
||||
{ "name": "Not", "size": 1554 },
|
||||
{ "name": "Or", "size": 970 },
|
||||
{ "name": "Query", "size": 13896 },
|
||||
{ "name": "Range", "size": 1594 },
|
||||
{ "name": "StringUtil", "size": 4130 },
|
||||
{ "name": "Sum", "size": 791 },
|
||||
{ "name": "Variable", "size": 1124 },
|
||||
{ "name": "Variance", "size": 1876 },
|
||||
{ "name": "Xor", "size": 1101 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "scale",
|
||||
"children": [
|
||||
{ "name": "IScaleMap", "size": 2105 },
|
||||
{ "name": "LinearScale", "size": 1316 },
|
||||
{ "name": "LogScale", "size": 3151 },
|
||||
{ "name": "OrdinalScale", "size": 3770 },
|
||||
{ "name": "QuantileScale", "size": 2435 },
|
||||
{ "name": "QuantitativeScale", "size": 4839 },
|
||||
{ "name": "RootScale", "size": 1756 },
|
||||
{ "name": "Scale", "size": 4268 },
|
||||
{ "name": "ScaleType", "size": 1821 },
|
||||
{ "name": "TimeScale", "size": 5833 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "util",
|
||||
"children": [
|
||||
{ "name": "Arrays", "size": 8258 },
|
||||
{ "name": "Colors", "size": 10001 },
|
||||
{ "name": "Dates", "size": 8217 },
|
||||
{ "name": "Displays", "size": 12555 },
|
||||
{ "name": "Filter", "size": 2324 },
|
||||
{ "name": "Geometry", "size": 10993 },
|
||||
{
|
||||
"name": "heap",
|
||||
"children": [
|
||||
{ "name": "FibonacciHeap", "size": 9354 },
|
||||
{ "name": "HeapNode", "size": 1233 }
|
||||
]
|
||||
},
|
||||
{ "name": "IEvaluable", "size": 335 },
|
||||
{ "name": "IPredicate", "size": 383 },
|
||||
{ "name": "IValueProxy", "size": 874 },
|
||||
{
|
||||
"name": "math",
|
||||
"children": [
|
||||
{ "name": "DenseMatrix", "size": 3165 },
|
||||
{ "name": "IMatrix", "size": 2815 },
|
||||
{ "name": "SparseMatrix", "size": 3366 }
|
||||
]
|
||||
},
|
||||
{ "name": "Maths", "size": 17705 },
|
||||
{ "name": "Orientation", "size": 1486 },
|
||||
{
|
||||
"name": "palette",
|
||||
"children": [
|
||||
{ "name": "ColorPalette", "size": 6367 },
|
||||
{ "name": "Palette", "size": 1229 },
|
||||
{ "name": "ShapePalette", "size": 2059 },
|
||||
{ "name": "SizePalette", "size": 2291 }
|
||||
]
|
||||
},
|
||||
{ "name": "Property", "size": 5559 },
|
||||
{ "name": "Shapes", "size": 19118 },
|
||||
{ "name": "Sort", "size": 6887 },
|
||||
{ "name": "Stats", "size": 6557 },
|
||||
{ "name": "Strings", "size": 22026 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "vis",
|
||||
"children": [
|
||||
{
|
||||
"name": "axis",
|
||||
"children": [
|
||||
{ "name": "Axes", "size": 1302 },
|
||||
{ "name": "Axis", "size": 24593 },
|
||||
{ "name": "AxisGridLine", "size": 652 },
|
||||
{ "name": "AxisLabel", "size": 636 },
|
||||
{ "name": "CartesianAxes", "size": 6703 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "controls",
|
||||
"children": [
|
||||
{ "name": "AnchorControl", "size": 2138 },
|
||||
{ "name": "ClickControl", "size": 3824 },
|
||||
{ "name": "Control", "size": 1353 },
|
||||
{ "name": "ControlList", "size": 4665 },
|
||||
{ "name": "DragControl", "size": 2649 },
|
||||
{ "name": "ExpandControl", "size": 2832 },
|
||||
{ "name": "HoverControl", "size": 4896 },
|
||||
{ "name": "IControl", "size": 763 },
|
||||
{ "name": "PanZoomControl", "size": 5222 },
|
||||
{ "name": "SelectionControl", "size": 7862 },
|
||||
{ "name": "TooltipControl", "size": 8435 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"children": [
|
||||
{ "name": "Data", "size": 20544 },
|
||||
{ "name": "DataList", "size": 19788 },
|
||||
{ "name": "DataSprite", "size": 10349 },
|
||||
{ "name": "EdgeSprite", "size": 3301 },
|
||||
{ "name": "NodeSprite", "size": 19382 },
|
||||
{
|
||||
"name": "render",
|
||||
"children": [
|
||||
{ "name": "ArrowType", "size": 698 },
|
||||
{ "name": "EdgeRenderer", "size": 5569 },
|
||||
{ "name": "IRenderer", "size": 353 },
|
||||
{ "name": "ShapeRenderer", "size": 2247 }
|
||||
]
|
||||
},
|
||||
{ "name": "ScaleBinding", "size": 11275 },
|
||||
{ "name": "Tree", "size": 7147 },
|
||||
{ "name": "TreeBuilder", "size": 9930 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "events",
|
||||
"children": [
|
||||
{ "name": "DataEvent", "size": 2313 },
|
||||
{ "name": "SelectionEvent", "size": 1880 },
|
||||
{ "name": "TooltipEvent", "size": 1701 },
|
||||
{ "name": "VisualizationEvent", "size": 1117 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "legend",
|
||||
"children": [
|
||||
{ "name": "Legend", "size": 20859 },
|
||||
{ "name": "LegendItem", "size": 4614 },
|
||||
{ "name": "LegendRange", "size": 10530 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "operator",
|
||||
"children": [
|
||||
{
|
||||
"name": "distortion",
|
||||
"children": [
|
||||
{ "name": "BifocalDistortion", "size": 4461 },
|
||||
{ "name": "Distortion", "size": 6314 },
|
||||
{ "name": "FisheyeDistortion", "size": 3444 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "encoder",
|
||||
"children": [
|
||||
{ "name": "ColorEncoder", "size": 3179 },
|
||||
{ "name": "Encoder", "size": 4060 },
|
||||
{ "name": "PropertyEncoder", "size": 4138 },
|
||||
{ "name": "ShapeEncoder", "size": 1690 },
|
||||
{ "name": "SizeEncoder", "size": 1830 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "filter",
|
||||
"children": [
|
||||
{ "name": "FisheyeTreeFilter", "size": 5219 },
|
||||
{ "name": "GraphDistanceFilter", "size": 3165 },
|
||||
{ "name": "VisibilityFilter", "size": 3509 }
|
||||
]
|
||||
},
|
||||
{ "name": "IOperator", "size": 1286 },
|
||||
{
|
||||
"name": "label",
|
||||
"children": [
|
||||
{ "name": "Labeler", "size": 9956 },
|
||||
{ "name": "RadialLabeler", "size": 3899 },
|
||||
{ "name": "StackedAreaLabeler", "size": 3202 }
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "layout",
|
||||
"children": [
|
||||
{ "name": "AxisLayout", "size": 6725 },
|
||||
{ "name": "BundledEdgeRouter", "size": 3727 },
|
||||
{ "name": "CircleLayout", "size": 9317 },
|
||||
{ "name": "CirclePackingLayout", "size": 12003 },
|
||||
{ "name": "DendrogramLayout", "size": 4853 },
|
||||
{ "name": "ForceDirectedLayout", "size": 8411 },
|
||||
{ "name": "IcicleTreeLayout", "size": 4864 },
|
||||
{ "name": "IndentedTreeLayout", "size": 3174 },
|
||||
{ "name": "Layout", "size": 7881 },
|
||||
{ "name": "NodeLinkTreeLayout", "size": 12870 },
|
||||
{ "name": "PieLayout", "size": 2728 },
|
||||
{ "name": "RadialTreeLayout", "size": 12348 },
|
||||
{ "name": "RandomLayout", "size": 870 },
|
||||
{ "name": "StackedAreaLayout", "size": 9121 },
|
||||
{ "name": "TreeMapLayout", "size": 9191 }
|
||||
]
|
||||
},
|
||||
{ "name": "Operator", "size": 2490 },
|
||||
{ "name": "OperatorList", "size": 5248 },
|
||||
{ "name": "OperatorSequence", "size": 4190 },
|
||||
{ "name": "OperatorSwitch", "size": 2581 },
|
||||
{ "name": "SortOperator", "size": 2023 }
|
||||
]
|
||||
},
|
||||
{ "name": "Visualization", "size": 16540 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,167 @@
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_timeSeries {
|
||||
var data = [{
|
||||
values: []
|
||||
}];
|
||||
|
||||
var i, x;
|
||||
var gap = false;
|
||||
var prevVal = 3000;
|
||||
var tickCount = 100;
|
||||
var probEnterGap = 0.1;
|
||||
var probExitGap = 0.2;
|
||||
var barTimespan = 30 * 60; // thirty minutes in seconds
|
||||
var startOfTime = 1425096000;
|
||||
for (i = 0; i < tickCount; i++) {
|
||||
x = startOfTime + i * barTimespan;
|
||||
if (!gap) {
|
||||
if (Math.random() > probEnterGap) {
|
||||
prevVal += (Math.random() - 0.5) * 500;
|
||||
if (prevVal <= 0) {
|
||||
prevVal = Math.random() * 100;
|
||||
}
|
||||
data[0].values.push({ x: x * 1000, y: prevVal });
|
||||
}
|
||||
else {
|
||||
gap = true;
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (Math.random() < probExitGap) {
|
||||
gap = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var chart;
|
||||
|
||||
var halfBarXMin = data[0].values[0].x - barTimespan / 2 * 1000;
|
||||
var halfBarXMax = data[0].values[data[0].values.length - 1].x + barTimespan / 2 * 1000;
|
||||
|
||||
function renderChart(location, meaning) {
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.historicalBarChart();
|
||||
chart
|
||||
.xScale(d3.time.scale()) // use a time scale instead of plain numbers in order to get nice round default values in the axis
|
||||
.color(['#68c'])
|
||||
.forceX([halfBarXMin, halfBarXMax]) // fix half-bar problem on the first and last bars
|
||||
.useInteractiveGuideline(true) // check out the css that turns the guideline into this nice thing
|
||||
.margin({ "left": 80, "right": 50, "top": 20, "bottom": 30 })
|
||||
.duration(0)
|
||||
;
|
||||
|
||||
var tickMultiFormat = d3.time.format.multi([
|
||||
["%-I:%M%p", function (d) { return d.getMinutes(); }], // not the beginning of the hour
|
||||
["%-I%p", function (d) { return d.getHours(); }], // not midnight
|
||||
["%b %-d", function (d) { return d.getDate() != 1; }], // not the first of the month
|
||||
["%b %-d", function (d) { return d.getMonth(); }], // not Jan 1st
|
||||
["%Y", function () { return true; }]
|
||||
]);
|
||||
chart.xAxis
|
||||
.showMaxMin(false)
|
||||
.tickPadding(10)
|
||||
.tickFormat(function (d) { return tickMultiFormat(new Date(d)); })
|
||||
;
|
||||
|
||||
chart.yAxis
|
||||
.showMaxMin(false)
|
||||
.tickFormat(d3.format(",.0f"))
|
||||
;
|
||||
|
||||
var svgElem = d3.select(location);
|
||||
svgElem
|
||||
.datum(data)
|
||||
.transition()
|
||||
.call(chart);
|
||||
|
||||
// make our own x-axis tick marks because NVD3 doesn't provide any
|
||||
var tickY2 = chart.yAxis.scale().range()[1];
|
||||
var lineElems = svgElem
|
||||
.select('.nv-x.nv-axis.nvd3-svg')
|
||||
.select('.nvd3.nv-wrap.nv-axis')
|
||||
.select('g')
|
||||
.selectAll('.tick')
|
||||
.data(chart.xScale().ticks())
|
||||
.append('line')
|
||||
.attr('class', 'x-axis-tick-mark')
|
||||
.attr('x2', 0)
|
||||
.attr('y1', tickY2 + 4)
|
||||
.attr('y2', tickY2)
|
||||
.attr('stroke-width', 1)
|
||||
;
|
||||
|
||||
// set up the tooltip to display full dates
|
||||
var tsFormat = d3.time.format('%b %-d, %Y %I:%M%p');
|
||||
var contentGenerator = chart.interactiveLayer.tooltip.contentGenerator();
|
||||
var tooltip = chart.interactiveLayer.tooltip;
|
||||
tooltip.contentGenerator(function (d) { d.value = d.series[0].data.x; return contentGenerator(d); });
|
||||
tooltip.headerFormatter(function (d) { return tsFormat(new Date(d)); });
|
||||
|
||||
// common stuff for the sections below
|
||||
var xScale = chart.xScale();
|
||||
var xPixelFirstBar = xScale(data[0].values[0].x);
|
||||
var xPixelSecondBar = xScale(data[0].values[0].x + barTimespan * 1000);
|
||||
var barWidth = xPixelSecondBar - xPixelFirstBar; // number of pixels representing time delta per bar
|
||||
|
||||
// fix the bar widths so they don't overlap when there are gaps
|
||||
function fixBarWidths(barSpacingFraction) {
|
||||
svgElem
|
||||
.selectAll('.nv-bars')
|
||||
.selectAll('rect')
|
||||
.attr('width', (1 - barSpacingFraction) * barWidth)
|
||||
.attr('transform', function (d, i) {
|
||||
var deltaX = xScale(data[0].values[i].x) - xPixelFirstBar;
|
||||
deltaX += barSpacingFraction / 2 * barWidth;
|
||||
return 'translate(' + deltaX + ', 0)';
|
||||
})
|
||||
;
|
||||
}
|
||||
|
||||
/*
|
||||
If you're representing sample measurements spaced a certain time apart, the tick marks should
|
||||
be in the middle of the bars and some spacing between bars is recommended to aid with interpretation.
|
||||
On the other hand, if you want to represent a quantity measured over a span of time (one bar), you're
|
||||
better off placing the ticks on the edge of the bar and leaving no gap in between bars.
|
||||
*/
|
||||
function shiftXAxis() {
|
||||
var xAxisElem = svgElem.select('.nv-axis.nv-x');
|
||||
var transform = xAxisElem.attr('transform');
|
||||
var xShift = -barWidth / 2;
|
||||
transform = transform.replace('0,', xShift + ',');
|
||||
xAxisElem.attr('transform', transform);
|
||||
}
|
||||
|
||||
if (meaning === 'instant') {
|
||||
fixBarWidths(0.2);
|
||||
}
|
||||
else if (meaning === 'timespan') {
|
||||
fixBarWidths(0.0);
|
||||
shiftXAxis();
|
||||
}
|
||||
|
||||
return chart;
|
||||
});
|
||||
}
|
||||
|
||||
renderChart('#test1', 'instant');
|
||||
renderChart('#test2', 'timespan');
|
||||
|
||||
window.setTimeout(function () {
|
||||
window.setTimeout(function () {
|
||||
document.getElementById('sc-one').style.display = 'block';
|
||||
document.getElementById('sc-two').style.display = 'none';
|
||||
}, 0);
|
||||
}, 0);
|
||||
|
||||
function switchChartStyle(style) {
|
||||
if (style === 'instant') {
|
||||
document.getElementById('sc-one').style.display = 'block';
|
||||
document.getElementById('sc-two').style.display = 'none';
|
||||
}
|
||||
else if (style === 'timespan') {
|
||||
document.getElementById('sc-one').style.display = 'none';
|
||||
document.getElementById('sc-two').style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
/// <reference path="../d3/d3.d.ts" />
|
||||
/// <reference path="nvd3.d.ts" />
|
||||
module nvd3_test_tooltip {
|
||||
var width = 500,
|
||||
height = 20;
|
||||
|
||||
var tooltip = nv.models.tooltip();
|
||||
tooltip.duration(0);
|
||||
|
||||
d3.select('.tooltip_me')
|
||||
.on('mouseover', function (d, i) {
|
||||
console.log("mouseover", d, i);
|
||||
var data = {
|
||||
series: {
|
||||
key: "title",
|
||||
value: "the value",
|
||||
color: "#229922"
|
||||
}
|
||||
};
|
||||
tooltip.data(data).hidden(false);
|
||||
})
|
||||
.on('mouseout', function (d, i) {
|
||||
console.log("mouseout", d, i);
|
||||
tooltip.hidden(true);
|
||||
})
|
||||
.on('mousemove', function (d, i) {
|
||||
console.log("mousemove", d, i);
|
||||
//tooltip.position({ top: d3.event.pageY, left: d3.event.pageX })(); todo pageY and X not found on d3 definition
|
||||
});
|
||||
|
||||
|
||||
// we must also test the scatter/line way of getting position
|
||||
// Wrapping in nv.addGraph allows for '0 timeout render', stores rendered charts in nv.graphs, and may do more in the future... it's NOT required
|
||||
var chart;
|
||||
nv.addGraph(function () {
|
||||
chart = nv.models.lineChart()
|
||||
.showXAxis(false)
|
||||
.showLegend(false)
|
||||
.clipVoronoi(false)
|
||||
.showVoronoi(true)
|
||||
.showYAxis(false);
|
||||
d3.select('#test2')
|
||||
.datum(sinAndCos())
|
||||
.call(chart);
|
||||
return chart;
|
||||
});
|
||||
|
||||
function sinAndCos() {
|
||||
var cos = [];
|
||||
for (var i = 0; i < 5; i++) {
|
||||
cos.push({ x: i, y: Math.round(.5 * Math.cos(i / 10) * 100) / 100 });
|
||||
}
|
||||
return [{
|
||||
values: cos,
|
||||
key: "Cosine Wave",
|
||||
color: "#2ca02c"
|
||||
}];
|
||||
}
|
||||
}
|
||||
Vendored
+3351
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user