Created
August 1, 2014 16:23
-
-
Save aberezin/746ddea47be79a964b96 to your computer and use it in GitHub Desktop.
NVD3 line graph with problematic xaxis ticks
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <link href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.css" rel="stylesheet" type="text/css"> | |
| <style> | |
| body { | |
| overflow-y:scroll; | |
| } | |
| text { | |
| font: 12px sans-serif; | |
| } | |
| svg { | |
| display: block; | |
| } | |
| #chart1 svg { | |
| height: 200px; | |
| min-width: 100px; | |
| min-height: 100px; | |
| /* | |
| margin: 50px; | |
| Minimum height and width is a good idea to prevent negative SVG dimensions... | |
| For example width should be =< margin.left + margin.right + 1, | |
| of course 1 pixel for the entire chart would not be very useful, BUT should not have errors | |
| */ | |
| } | |
| #chart1 { | |
| margin-top: 5px; | |
| margin-left: 5px; | |
| } | |
| </style> | |
| <body class='with-3d-shadow with-transitions'> | |
| <div id="chart1" > | |
| <svg style="height: 200px;"></svg> | |
| </div> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.min.js"></script> | |
| <script src="src/tooltip.js"></script> | |
| <script src="src/utils.js"></script> | |
| <script src="src/interactiveLayer.js"></script> | |
| <script src="src/models/legend.js"></script> | |
| <script src="src/models/axis.js"></script> | |
| <script src="src/models/scatter.js"></script> | |
| <script src="src/models/line.js"></script> | |
| <script src="src/models/lineChart.js"></script> | |
| <script> | |
| //using d3-3.4.9 instead of 3.1.5 because it seems to avoid the CORS preflight. But if it causes problems, we can go back to 3.1.5 | |
| //at the cost of one OPTIONS request | |
| // 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 rigCountJson; | |
| var reqStr = 'http://localhost:8000/rigsMarToAug2014.json'; | |
| d3.json(reqStr) | |
| .get( function(error, rcdata) { | |
| if(error) console.warn(error); | |
| console.log(rcdata); | |
| var rigSeries = rigCountSeries(rcdata); | |
| nv.addGraph(function() { | |
| chart = nv.models.lineChart() | |
| .options({ | |
| margin: {top: 20, left: 50, bottom: 60, right: 10}, | |
| // x: function(d,i) { return i}, | |
| showXAxis: true, | |
| showYAxis: true, | |
| transitionDuration: 250 | |
| }) | |
| .forceY(1500,2200) | |
| ; | |
| var fmt=d3.time.format('%m/%d/%Y'); | |
| //having a hard time getting xticks correct. | |
| //var xTickRange = d3.time.week.range(rigSeries[0].startDate, rigSeries[0].endDate, 1); | |
| //lets try explicitly constructing array of Date. One Date every 7 days starting with the first date we see in the incoming data | |
| var xTickRange = []; | |
| z=rigSeries[0].values; | |
| nMax = z.length; | |
| for(i=0; i<nMax; i++) { | |
| var dtick=new Date(z[i].x); | |
| xTickRange.push(dtick); | |
| i+=7; | |
| // console.log(dtick); | |
| } | |
| chart.xAxis | |
| .axisLabel("Date") | |
| .tickFormat(function(d){return fmt(new Date(+d))} ) | |
| .rotateLabels(-45) | |
| .tickValues(xTickRange) | |
| //this didnt work. Function isnt even called | |
| // .scale().ticks( function(start,end) { | |
| // consol.log(start,",",end); | |
| // var mid = new Date((start.getTime() + end.getTime()) / 2); | |
| // return [start,mid,end]; | |
| // }) | |
| ; | |
| chart.yAxis | |
| .axisLabel('Rig Count') | |
| .tickFormat(d3.format(',d')) | |
| ; | |
| d3.select('#chart1 svg') | |
| .datum(rigSeries) | |
| .call(chart); | |
| //TODO: Figure out a good way to do this automatically | |
| nv.utils.windowResize(chart.update); | |
| //nv.utils.windowResize(function() { d3.select('#chart1 svg').call(chart) }); | |
| chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); | |
| return chart; | |
| }); | |
| }); | |
| function rigCountSeries(rigCountJson) { | |
| var timeseries = []; | |
| var fmt = d3.time.format("%Y%m%d"); | |
| for (var i in rigCountJson) { | |
| var v=rigCountJson[i]; | |
| timeseries.push({x: +fmt.parse(v.date), y: v.count}); //add x vals as millis, not Date | |
| var d = +fmt.parse(v.date) | |
| //console.log("d["+i+"]:" + new Date(d) + ", v:"+v.date) ; | |
| } | |
| return [ | |
| { | |
| // area: true, | |
| values: timeseries, | |
| key: "Rig Count", | |
| color: "#ff7f0e", | |
| startDate: new Date(timeseries[0].x), | |
| endDate: new Date(timeseries[timeseries.length-1].x) | |
| } | |
| ]; | |
| } | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [{"date":"20140301","count":1778,"change_week":-21,"change_month":-4,"change_year":0}, {"date":"20140302","count":1778,"change_week":-21,"change_month":-4,"change_year":0}, {"date":"20140303","count":1771,"change_week":-41,"change_month":-9,"change_year":0}, {"date":"20140304","count":1775,"change_week":-34,"change_month":27,"change_year":0}, {"date":"20140305","count":1783,"change_week":-28,"change_month":33,"change_year":0}, {"date":"20140306","count":1789,"change_week":-20,"change_month":32,"change_year":0}, {"date":"20140307","count":1791,"change_week":13,"change_month":29,"change_year":0}, {"date":"20140308","count":1791,"change_week":13,"change_month":29,"change_year":0}, {"date":"20140309","count":1791,"change_week":13,"change_month":29,"change_year":0}, {"date":"20140310","count":1805,"change_week":34,"change_month":41,"change_year":0}, {"date":"20140311","count":1797,"change_week":22,"change_month":26,"change_year":0}, {"date":"20140312","count":1803,"change_week":20,"change_month":24,"change_year":0}, {"date":"20140313","count":1814,"change_week":25,"change_month":31,"change_year":0}, {"date":"20140314","count":1809,"change_week":18,"change_month":25,"change_year":0}, {"date":"20140315","count":1809,"change_week":18,"change_month":25,"change_year":0}, {"date":"20140316","count":1809,"change_week":18,"change_month":25,"change_year":0}, {"date":"20140317","count":1828,"change_week":23,"change_month":51,"change_year":0}, {"date":"20140318","count":1831,"change_week":34,"change_month":57,"change_year":0}, {"date":"20140319","count":1826,"change_week":23,"change_month":44,"change_year":0}, {"date":"20140320","count":1821,"change_week":7,"change_month":23,"change_year":0}, {"date":"20140321","count":1828,"change_week":19,"change_month":29,"change_year":0}, {"date":"20140322","count":1828,"change_week":19,"change_month":29,"change_year":0}, {"date":"20140323","count":1828,"change_week":19,"change_month":29,"change_year":0}, {"date":"20140324","count":1815,"change_week":-13,"change_month":3,"change_year":0}, {"date":"20140325","count":1815,"change_week":-16,"change_month":6,"change_year":0}, {"date":"20140326","count":1816,"change_week":-10,"change_month":5,"change_year":0}, {"date":"20140327","count":1815,"change_week":-6,"change_month":6,"change_year":0}, {"date":"20140328","count":1817,"change_week":-11,"change_month":39,"change_year":0}, {"date":"20140329","count":1817,"change_week":-11,"change_month":39,"change_year":0}, {"date":"20140330","count":1817,"change_week":-11,"change_month":39,"change_year":0}, {"date":"20140331","count":1817,"change_week":2,"change_month":39,"change_year":0}, {"date":"20140401","count":1806,"change_week":-9,"change_month":28,"change_year":0}, {"date":"20140402","count":1815,"change_week":-1,"change_month":37,"change_year":0}, {"date":"20140403","count":1828,"change_week":13,"change_month":57,"change_year":0}, {"date":"20140404","count":1827,"change_week":10,"change_month":52,"change_year":0}, {"date":"20140405","count":1827,"change_week":10,"change_month":44,"change_year":0}, {"date":"20140406","count":1827,"change_week":10,"change_month":38,"change_year":0}, {"date":"20140407","count":1818,"change_week":1,"change_month":27,"change_year":0}, {"date":"20140408","count":1816,"change_week":10,"change_month":25,"change_year":0}, {"date":"20140409","count":1827,"change_week":12,"change_month":36,"change_year":0}, {"date":"20140410","count":1832,"change_week":4,"change_month":27,"change_year":0}, {"date":"20140411","count":1850,"change_week":23,"change_month":53,"change_year":0}, {"date":"20140412","count":1850,"change_week":23,"change_month":47,"change_year":0}, {"date":"20140413","count":1850,"change_week":23,"change_month":36,"change_year":0}, {"date":"20140414","count":1861,"change_week":43,"change_month":52,"change_year":0}, {"date":"20140415","count":1848,"change_week":32,"change_month":39,"change_year":0}, {"date":"20140416","count":1849,"change_week":22,"change_month":40,"change_year":0}, {"date":"20140417","count":1854,"change_week":22,"change_month":26,"change_year":0}, {"date":"20140418","count":1854,"change_week":4,"change_month":23,"change_year":0}, {"date":"20140419","count":1854,"change_week":4,"change_month":28,"change_year":0}, {"date":"20140420","count":1854,"change_week":4,"change_month":33,"change_year":0}, {"date":"20140421","count":1845,"change_week":-16,"change_month":17,"change_year":0}, {"date":"20140422","count":1860,"change_week":12,"change_month":32,"change_year":0}, {"date":"20140423","count":1871,"change_week":22,"change_month":43,"change_year":0}, {"date":"20140424","count":1863,"change_week":9,"change_month":48,"change_year":0}, {"date":"20140425","count":1860,"change_week":6,"change_month":45,"change_year":0}, {"date":"20140426","count":1860,"change_week":6,"change_month":44,"change_year":0}, {"date":"20140427","count":1860,"change_week":6,"change_month":45,"change_year":0}, {"date":"20140428","count":1852,"change_week":7,"change_month":35,"change_year":0}, {"date":"20140429","count":1842,"change_week":-18,"change_month":25,"change_year":0}, {"date":"20140430","count":1849,"change_week":-22,"change_month":32,"change_year":0}, {"date":"20140501","count":1862,"change_week":-1,"change_month":56,"change_year":0}, {"date":"20140502","count":1849,"change_week":-11,"change_month":34,"change_year":0}, {"date":"20140503","count":1849,"change_week":-11,"change_month":21,"change_year":0}, {"date":"20140504","count":1849,"change_week":-11,"change_month":22,"change_year":0}, {"date":"20140505","count":1861,"change_week":9,"change_month":34,"change_year":0}, {"date":"20140506","count":1863,"change_week":21,"change_month":36,"change_year":0}, {"date":"20140507","count":1868,"change_week":19,"change_month":50,"change_year":0}, {"date":"20140508","count":1871,"change_week":9,"change_month":55,"change_year":0}, {"date":"20140509","count":1875,"change_week":26,"change_month":48,"change_year":0}, {"date":"20140510","count":1875,"change_week":26,"change_month":43,"change_year":0}, {"date":"20140511","count":1875,"change_week":26,"change_month":25,"change_year":0}, {"date":"20140512","count":1881,"change_week":20,"change_month":31,"change_year":0}, {"date":"20140513","count":1880,"change_week":17,"change_month":30,"change_year":480}, {"date":"20140514","count":1865,"change_week":-3,"change_month":4,"change_year":464}, {"date":"20140515","count":1871,"change_week":0,"change_month":23,"change_year":479}, {"date":"20140516","count":1901,"change_week":26,"change_month":52,"change_year":499}, {"date":"20140517","count":1901,"change_week":26,"change_month":47,"change_year":496}, {"date":"20140518","count":1901,"change_week":26,"change_month":47,"change_year":496}, {"date":"20140519","count":1905,"change_week":24,"change_month":51,"change_year":500}, {"date":"20140520","count":1902,"change_week":22,"change_month":48,"change_year":496}, {"date":"20140521","count":1914,"change_week":49,"change_month":69,"change_year":498}, {"date":"20140522","count":1912,"change_week":41,"change_month":52,"change_year":493}, {"date":"20140523","count":1913,"change_week":12,"change_month":42,"change_year":499}, {"date":"20140524","count":1913,"change_week":12,"change_month":50,"change_year":505}, {"date":"20140525","count":1913,"change_week":12,"change_month":53,"change_year":505}, {"date":"20140526","count":1913,"change_week":8,"change_month":53,"change_year":505}, {"date":"20140527","count":1932,"change_week":30,"change_month":72,"change_year":524}, {"date":"20140528","count":1932,"change_week":18,"change_month":80,"change_year":529}, {"date":"20140529","count":1922,"change_week":10,"change_month":80,"change_year":524}, {"date":"20140530","count":1920,"change_week":7,"change_month":71,"change_year":518}, {"date":"20140531","count":1920,"change_week":7,"change_month":71,"change_year":523}, {"date":"20140601","count":1920,"change_week":7,"change_month":58,"change_year":523}, {"date":"20140602","count":1948,"change_week":35,"change_month":99,"change_year":551}, {"date":"20140603","count":1945,"change_week":13,"change_month":96,"change_year":548}, {"date":"20140604","count":1953,"change_week":21,"change_month":104,"change_year":562}, {"date":"20140605","count":1962,"change_week":40,"change_month":101,"change_year":562}, {"date":"20140606","count":1963,"change_week":43,"change_month":100,"change_year":569}, {"date":"20140607","count":1963,"change_week":43,"change_month":95,"change_year":546}, {"date":"20140608","count":1963,"change_week":43,"change_month":92,"change_year":546}, {"date":"20140609","count":1979,"change_week":31,"change_month":104,"change_year":562}, {"date":"20140610","count":1985,"change_week":40,"change_month":110,"change_year":531}, {"date":"20140611","count":1989,"change_week":36,"change_month":114,"change_year":512}, {"date":"20140612","count":2001,"change_week":39,"change_month":120,"change_year":522}, {"date":"20140613","count":2006,"change_week":43,"change_month":126,"change_year":523}, {"date":"20140614","count":2006,"change_week":43,"change_month":141,"change_year":521}, {"date":"20140615","count":2006,"change_week":43,"change_month":135,"change_year":531}, {"date":"20140616","count":2001,"change_week":22,"change_month":100,"change_year":526}, {"date":"20140617","count":2008,"change_week":23,"change_month":107,"change_year":533}, {"date":"20140618","count":2006,"change_week":17,"change_month":105,"change_year":525}, {"date":"20140619","count":2002,"change_week":1,"change_month":97,"change_year":524}, {"date":"20140620","count":2005,"change_week":-1,"change_month":103,"change_year":544}, {"date":"20140621","count":2005,"change_week":-1,"change_month":91,"change_year":525}, {"date":"20140622","count":2005,"change_week":-1,"change_month":93,"change_year":525}, {"date":"20140623","count":2011,"change_week":10,"change_month":98,"change_year":531}, {"date":"20140624","count":2014,"change_week":6,"change_month":101,"change_year":540}, {"date":"20140625","count":2016,"change_week":10,"change_month":103,"change_year":522}, {"date":"20140626","count":2012,"change_week":10,"change_month":99,"change_year":517}, {"date":"20140627","count":2013,"change_week":8,"change_month":81,"change_year":516}, {"date":"20140628","count":2013,"change_week":8,"change_month":81,"change_year":521}, {"date":"20140629","count":2013,"change_week":8,"change_month":91,"change_year":521}, {"date":"20140630","count":2008,"change_week":-3,"change_month":88,"change_year":516}, {"date":"20140701","count":1999,"change_week":-15,"change_month":79,"change_year":485}, {"date":"20140702","count":2001,"change_week":-15,"change_month":53,"change_year":481}, {"date":"20140703","count":1992,"change_week":-20,"change_month":47,"change_year":473}, {"date":"20140704","count":2003,"change_week":-10,"change_month":50,"change_year":484}, {"date":"20140705","count":2003,"change_week":-10,"change_month":41,"change_year":484}, {"date":"20140706","count":2003,"change_week":-10,"change_month":40,"change_year":484}, {"date":"20140707","count":2003,"change_week":-5,"change_month":40,"change_year":484}, {"date":"20140708","count":1991,"change_week":-8,"change_month":28,"change_year":476}, {"date":"20140709","count":1993,"change_week":-8,"change_month":14,"change_year":473}, {"date":"20140710","count":2000,"change_week":8,"change_month":15,"change_year":473}, {"date":"20140711","count":2006,"change_week":3,"change_month":17,"change_year":472}, {"date":"20140712","count":2006,"change_week":3,"change_month":5,"change_year":466}, {"date":"20140713","count":2006,"change_week":3,"change_month":0,"change_year":466}, {"date":"20140714","count":2013,"change_week":10,"change_month":7,"change_year":473}, {"date":"20140715","count":2012,"change_week":21,"change_month":6,"change_year":484}, {"date":"20140716","count":2014,"change_week":21,"change_month":13,"change_year":484}, {"date":"20140717","count":2022,"change_week":22,"change_month":14,"change_year":484}, {"date":"20140718","count":2022,"change_week":16,"change_month":16,"change_year":476}, {"date":"20140719","count":2022,"change_week":16,"change_month":20,"change_year":479}, {"date":"20140720","count":2022,"change_week":16,"change_month":17,"change_year":479}, {"date":"20140721","count":2026,"change_week":13,"change_month":21,"change_year":483}, {"date":"20140722","count":2029,"change_week":17,"change_month":24,"change_year":495}, {"date":"20140723","count":2031,"change_week":17,"change_month":20,"change_year":494}, {"date":"20140724","count":2032,"change_week":10,"change_month":18,"change_year":490}, {"date":"20140725","count":2039,"change_week":17,"change_month":23,"change_year":502}, {"date":"20140726","count":2039,"change_week":17,"change_month":27,"change_year":496}, {"date":"20140727","count":2039,"change_week":17,"change_month":26,"change_year":496}, {"date":"20140728","count":2024,"change_week":-2,"change_month":11,"change_year":481}, {"date":"20140729","count":2028,"change_week":-1,"change_month":15,"change_year":502}, {"date":"20140730","count":2022,"change_week":-9,"change_month":14,"change_year":507}, {"date":"20140731","count":2017,"change_week":-15,"change_month":9,"change_year":490}] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment