Advertisement
Guest User

D3 & JSON

a guest
Apr 6th, 2014
184
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. d3.json("linePlusBarData2.json",function(error,data) {
  2.   d3.json("data.json",function(error,data2) {
  3.  
  4.     var newData = d3.nest()
  5.     .key(function(d,i){ return d.id; })
  6.     .entries(data);
  7.    
  8.     newData[0]['bar']=true;
  9.    
  10.  
  11.     var newData2 = d3.nest()
  12.     .key(function(d,i){ return d.id; })
  13.     .entries(data2);
  14.     newData.push(newData2[0]);
  15.  
  16.     newData[0]['key']= "Your Data";
  17.     newData[1]['key']= "Average Data";
  18.  
  19.   nv.addGraph(function() {
  20.       var date1 = new Date();
  21.       var chart = nv.models.linePlusBarChart()
  22.             .margin({top: 30, right: 60, bottom: 50, left: 70})
  23.             .tooltips(true)
  24.             .showLegend(false)
  25.             .x(function(d){
  26.                 return new Date(d.timestamp);
  27.                 //convert the string to a date object
  28.             })
  29.             .y(function(d,i) {return d.value })
  30.             .color(['#aec7e8', '#FFD700'])
  31.             ;
  32.  
  33.      chart.xAxis
  34.        .tickFormat(function(d) {
  35.            //return d3.time.format.utc('%x')(new Date(d) ); // time as month/day/year
  36.            return d3.time.format.utc('%X')(new Date(d) ); // time as Hour/Min/Sec
  37.        });
  38.  
  39.       chart.y1Axis
  40.           .tickFormat(d3.format(',f'));
  41.  
  42.       chart.y2Axis
  43.           .tickFormat(d3.format(',f'));
  44.  
  45.       chart.bars.forceY([0, 20000]);
  46.       chart.lines.forceY([0, 20000]);
  47.  
  48.       d3.select('#chart1 svg')
  49.         .datum(newData)
  50.         .transition()
  51.         .duration(0)
  52.         .call(chart);
  53.  
  54.       nv.utils.windowResize(chart.update);
  55.  
  56.       // Hack job - This hides y2 axis but does not alter any data, scale, etc..  
  57.       d3.select('.nv-y2.nv-axis').remove();
  58.  
  59.       //chart.y2Axis.scale(chart.y1Axis.scale());
  60.  
  61.       return chart;
  62.   });
  63. });
  64. });
  65.  
  66. //// The below code changes the timestamp format for compatibility with NVD3.
  67.  
  68. Date.prototype.setISO8601 = function(dString){
  69.  
  70. var regexp = /(\d\d\d\d)(-)?(\d\d)(-)?(\d\d)(T)?(\d\d)(:)?(\d\d)(:)?(\d\d)(\.\d+)?(Z|([+-])(\d\d)(:)?(\d\d))/;
  71.  
  72. if (dString.toString().match(new RegExp(regexp))) {
  73. var d = dString.match(new RegExp(regexp));
  74. var offset = 0;
  75.  
  76. this.setUTCDate(1);
  77. this.setUTCFullYear(parseInt(d[1],10));
  78. this.setUTCMonth(parseInt(d[3],10) - 1);
  79. this.setUTCDate(parseInt(d[5],10));
  80. this.setUTCHours(parseInt(d[7],10));
  81. this.setUTCMinutes(parseInt(d[9],10));
  82. this.setUTCSeconds(parseInt(d[11],10));
  83. if (d[12])
  84. this.setUTCMilliseconds(parseFloat(d[12]) * 1000);
  85. else
  86. this.setUTCMilliseconds(0);
  87. if (d[13] != 'Z') {
  88. offset = (d[15] * 60) + parseInt(d[17],10);
  89. offset *= ((d[14] == '-') ? -1 : 1);
  90. this.setTime(this.getTime() - offset * 60 * 1000);
  91. }
  92. }
  93. else {
  94. this.setTime(Date.parse(dString));
  95. }
  96. return this;
  97. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement