1
I Graph mit NVD3.js diesem gestapelt Bereich zu erreichen versuchen: http://nvd3.org/examples/stackedArea.htmlIch versuche NVD3 zu bekommen mit Daten aus einer Ajax-Anforderung zu arbeiten
ich eine Webservice gemacht habe, die visuellen meinen Tierarzt SQL Server verbindet mit Studio. Es funktioniert, wenn separat getestet wird. Ich möchte die Anzahl der täglich neuen klinischen Fälle vorstellen. Ich bin neu in D3 und NVD3. Beide Bibliotheken sehen jedoch fantastisch aus. Ich habe versucht, andere Beiträge und Tutorials zu sehen, aber ich bin verwirrt.
Im Wesentlichen habe ich versucht, den Beispielcode zu kopieren und einzufügen. Mein JSON-Format ist:
[{"key":"SSB","values":[]},{"key":"GEN","values":[]},{"key":"LYM","values":[]},{"key":"LUD","values":[]},{"key":"GCC","values":[{"dateOpened":"2015-06-01","total":1},{"dateOpened":"2015-06-15","total":2},{"dateOpened":"2015-06-17","total":2},{"dateOpened":"2015-06-22","total":1},{"dateOpened":"2015-06-29","total":1},{"dateOpened":"2015-07-21","total":1},{"dateOpened":"2015-07-22","total":1},{"dateOpened":"2015-08-10","total":1},{"dateOpened":"2015-08-11","total":1},{"dateOpened":"2015-08-19","total":1},{"dateOpened":"2015-08-23","total":1},{"dateOpened":"2016-06-07","total":3}]},{"key":"MAC","values":[{"dateOpened":"2016-06-07","total":1}]},{"key":"MMB","values":[{"dateOpened":"2015-01-02","total":2},{"dateOpened":"2015-01-05","total":1},{"dateOpened":"2015-01-06","total":4},{"dateOpened":"2015-01-07","total":1},{"dateOpened":"2015-01-08","total":2},{"dateOpened":"2015-01-09","total":1},{"dateOpened":"2015-01-12","total":2},{"dateOpened":"2015-01-13","total":6},{"dateOpened":"2015-01-14","total":3},{"dateOpened":"2015-01-15","total":3},{"dateOpened":"2015-01-16","total":2},{"dateOpened":"2015-01-19","total":7},{"dateOpened":"2015-01-20","total":4},{"dateOpened":"2015-01-21","total":1},{"dateOpened":"2015-01-22","total":3},{"dateOpened":"2015-01-23","total":4},{"dateOpened":"2015-01-26","total":3},{"dateOpened":"2015-01-27","total":5},{"dateOpened":"2015-01-28","total":3},{"dateOpened":"2015-01-29","total":3},{"dateOpened":"2015-01-30","total":6},{"dateOpened":"2015-02-03","total":8},{"dateOpened":"2015-02-04","total":10},{"dateOpened":"2015-02-05","total":8},{"dateOpened":"2015-02-06","total":17},{"dateOpened":"2015-02-07","total":1},{"dateOpened":"2015-02-08","total":2},{"dateOpened":"2015-02-09","total":3},{"dateOpened":"2015-02-10","total":2},{"dateOpened":"2015-02-12","total":5},{"dateOpened":"2015-02-13","total":3},{"dateOpened":"2015-02-17","total":6},{"dateOpened":"2015-02-18","total":4},{"dateOpened":"2015-02-19","total":5},{"dateOpened":"2015-02-20","total":2},{"dateOpened":"2015-02-22","total":1},{"dateOpened":"2015-02-24","total":2},{"dateOpened":"2015-02-25","total":2},{"dateOpened":"2015-02-27","total":8},{"dateOpened":"2015-03-03","total":7},{"dateOpened":"2015-03-04","total":4},{"dateOpened":"2015-03-05","total":2},{"dateOpened":"2015-03-06","total":5},{"dateOpened":"2015-03-08","total":1},{"dateOpened":"2015-03-09","total":3},{"dateOpened":"2015-03-10","total":4},{"dateOpened":"2015-03-11","total":6},{"dateOpened":"2015-03-12","total":3},{"dateOpened":"2015-03-13","total":2},{"dateOpened":"2015-03-15","total":1},{"dateOpened":"2015-03-17","total":5},{"dateOpened":"2015-03-18","total":2},{"dateOpened":"2015-03-19","total":1},{"dateOpened":"2015-03-20","total":14},{"dateOpened":"2015-03-22","total":1},{"dateOpened":"2015-03-23","total":1},{"dateOpened":"2015-03-24","total":4},{"dateOpened":"2015-03-25","total":2},{"dateOpened":"2015-03-26","total":8},{"dateOpened":"2015-03-27","total":13},{"dateOpened":"2015-03-28","total":1},{"dateOpened":"2015-03-29","total":1},{"dateOpened":"2015-04-10","total":1},{"dateOpened":"2015-04-24","total":2},{"dateOpened":"2015-07-08","total":1},{"dateOpened":"2016-03-15","total":1},{"dateOpened":"2016-03-25","total":1},{"dateOpened":"2016-06-07","total":3}]}]
Hier die JSON-Beispieldatei der Probe ist:
[
{
"key" : "North America" ,
"values" : [ [ 1025409600000 , 23.041422681023] , [ 1028088000000 , 19.854291255832] , [ 1030766400000 , 21.02286281168] , [ 1033358400000 , 22.093608385173] , [ 1036040400000 , 25.108079299458] , [ 1038632400000 , 26.982389242348] , [ 1041310800000 , 19.828984957662] , [ 1043989200000 , 19.914055036294] , [ 1046408400000 , 19.436150539916] , [ 1049086800000 , 21.558650338602] , [ 1051675200000 , 24.395594061773] , [ 1054353600000 , 24.747089309384] , [ 1056945600000 , 23.491755498807] , [ 1059624000000 , 23.376634878164] , [ 1062302400000 , 24.581223154533] , [ 1064894400000 , 24.922476843538] , [ 1067576400000 , 27.357712939042] , [ 1070168400000 , 26.503020572593] , [ 1072846800000 , 26.658901244878] , [ 1075525200000 , 27.065704156445] , [ 1078030800000 , 28.735320452588] , [ 1080709200000 , 31.572277846319] , [ 1083297600000 , 30.932161503638] , [ 1085976000000 , 31.627029785554] , [ 1088568000000 , 28.728743674232] , [ 1091246400000 , 26.858365172675] , [ 1093924800000 , 27.279922830032] , [ 1096516800000 , 34.408301211324] , [ 1099195200000 , 34.794362930439] , [ 1101790800000 , 35.609978198951] , [ 1104469200000 , 33.574394968037] , [ 1107147600000 , 31.979405070598] , [ 1109566800000 , 31.19009040297] , [ 1112245200000 , 31.083933968994] , [ 1114833600000 , 29.668971113185] , [ 1117512000000 , 31.490638014379] , [ 1120104000000 , 31.818617451128] , [ 1122782400000 , 32.960314008183] , [ 1125460800000 , 31.313383196209] , [ 1128052800000 , 33.125486081852] , [ 1130734800000 , 32.791805509149] , [ 1133326800000 , 33.506038030366] , [ 1136005200000 , 26.96501697216] , [ 1138683600000 , 27.38478809681] , [ 1141102800000 , 27.371377218209] , [ 1143781200000 , 26.309915460827] , [ 1146369600000 , 26.425199957518] , [ 1149048000000 , 26.823411519396] , [ 1151640000000 , 23.850443591587] , [ 1154318400000 , 23.158355444054] , [ 1156996800000 , 22.998689393695] , [ 1159588800000 , 27.9771285113] , [ 1162270800000 , 29.073672469719] , [ 1164862800000 , 28.587640408904] , [ 1167541200000 , 22.788453687637] , [ 1170219600000 , 22.429199073597] , [ 1172638800000 , 22.324103271052] , [ 1175313600000 , 17.558388444187] , [ 1177905600000 , 16.769518096208] , [ 1180584000000 , 16.214738201301] , [ 1183176000000 , 18.729632971229] , [ 1185854400000 , 18.814523318847] , [ 1188532800000 , 19.789986451358] , [ 1191124800000 , 17.070049054933] , [ 1193803200000 , 16.121349575716] , [ 1196398800000 , 15.141659430091] , [ 1199077200000 , 17.175388025297] , [ 1201755600000 , 17.286592443522] , [ 1204261200000 , 16.323141626568] , [ 1206936000000 , 19.231263773952] , [ 1209528000000 , 18.446256391095] , [ 1212206400000 , 17.822632399764] , [ 1214798400000 , 15.53936647598] , [ 1217476800000 , 15.255131790217] , [ 1220155200000 , 15.660963922592] , [ 1222747200000 , 13.254482273698] , [ 1225425600000 , 11.920796202299] , [ 1228021200000 , 12.122809090924] , [ 1230699600000 , 15.691026271393] , [ 1233378000000 , 14.720881635107] , [ 1235797200000 , 15.387939360044] , [ 1238472000000 , 13.765436672228] , [ 1241064000000 , 14.631445864799] , [ 1243742400000 , 14.292446536221] , [ 1246334400000 , 16.170071367017] , [ 1249012800000 , 15.948135554337] , [ 1251691200000 , 16.612872685134] , [ 1254283200000 , 18.778338719091] , [ 1256961600000 , 16.756026065421] , [ 1259557200000 , 19.385804443146] , [ 1262235600000 , 22.950590240168] , [ 1264914000000 , 23.61159018141] , [ 1267333200000 , 25.708586989581] , [ 1270008000000 , 26.883915999885] , [ 1272600000000 , 25.893486687065] , [ 1275278400000 , 24.678914263176] , [ 1277870400000 , 25.937275793024] , [ 1280548800000 , 29.461381693838] , [ 1283227200000 , 27.357322961861] , [ 1285819200000 , 29.057235285673] , [ 1288497600000 , 28.549434189386] , [ 1291093200000 , 28.506352379724] , [ 1293771600000 , 29.449241421598] , [ 1296450000000 , 25.796838168807] , [ 1298869200000 , 28.740145449188] , [ 1301544000000 , 22.091744141872] , [ 1304136000000 , 25.07966254541] , [ 1306814400000 , 23.674906973064] , [ 1309406400000 , 23.418002742929] , [ 1312084800000 , 23.24364413887] , [ 1314763200000 , 31.591854066817] , [ 1317355200000 , 31.497112374114] , [ 1320033600000 , 26.67238082043] , [ 1322629200000 , 27.297080015495] , [ 1325307600000 , 20.174315530051] , [ 1327986000000 , 19.631084213898] , [ 1330491600000 , 20.366462219461] , [ 1333166400000 , 19.284784434185] , [ 1335758400000 , 19.157810257624]]
}
]
Bitte beachten Sie, dass das Datumsformat unterschiedlich ist (ich verstehe nicht, wie zu lesen), und dass die Werte-Arrays haben Untertitel (zB "dateOpened", "total"), während die Sample-Werte-Arrays dies nicht tun.
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", "#btGO", function() {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
var resultElement = $("#resultDiv");
var successCallBack;
$.ajax({
url: "dataWebService.asmx/getCasesForDateInterval",
method: "post",
data: {startDate: startDate, endDate: endDate},
dataType: "json",
success: function (data) {
//Where I should call my NVD3 graph?
d3.json(data, function (data) {
nv.addGraph(function() {
var chart = nv.models.stackedAreaChart()
.margin({ right: 100 })
.x(function (d) { return d.dateOpened })
.y(function (d) { return d.total })
.useInteractiveGuideline(true)
.rightAlignYAxis(true)
.transitionDuration(500)
.clipEdge(true);
//Format x-axis labels with custom function. I don't understand how to go from here
chart.xAxis
.tickFormat(function(d) {
return d3.time.format('%x')(new Date(d))
});
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart svg')
.datum(data)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
}
});
});
});
</script>
...
<div id="chart svg">
<svg></svg>
</div>
Ich habe eine ganze Weile daran gearbeitet, aber ich fühle, dass ich in der Nähe bin. Ich würde das Feedback der Community und einige Pseudocode sehr zu schätzen wissen. Vielen Dank für Ihre Zeit!