nvd3.js - NVD3 Format Date Differently From X-Axis -


i have nvd3 chart , format date value in tooltip window complete date down seconds, while changing labels in x-axis day.

here chart:

    d3.json("mydata.json", function (error,data) {         var chart;         nv.addgraph(function() {             var chart = nv.models.linechart()                     .margin({left: 100})  //adjust chart margins give x-axis breathing room.                     .useinteractiveguideline(true)  //we want nice looking tooltips , guideline!                     .transitionduration(350)  //how fast want lines transition?                     .showlegend(true)       //show legend, allowing users turn on/off line series.                     .showyaxis(true)        //show y-axis                     .showxaxis(true)        //show x-axis                 ;             chart.xaxis     //chart x-axis settings                 .axislabel('date')                 .tickformat(function(d){return d3.time.format('%d-%m-%y')(new date(d));});             chart.yaxis     //chart y-axis settings                 .axislabel('temperature')                 .tickformat(d3.format('.02f'));             d3.select('#chart svg')    //select <svg> element want render chart in.                 .datum(data)         //populate <svg> element chart data...                 .call(chart);          //finally, render chart!             nv.utils.windowresize(function() { chart.update() });             return chart;         });     });

and example data:

[{"key":"ambient temperature","color":"#0000ff","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"windchill temperature","color":"#00ff00","values":[{"x":1407978270000,"y":22.47},{"x":1407978353000,"y":22.53},{"x":1407978353000,"y":22.53},{"x":1407978415000,"y":22.63},{"x":1407978523000,"y":22.51},{"x":1407978524000,"y":22.51},{"x":1407978546000,"y":22.5},{"x":1407978562000,"y":22.41},{"x":1407978571000,"y":22.35}]},{"key":"dewpoint temperature","color":"#ff0000","values":[{"x":1407978270000,"y":10.86},{"x":1407978353000,"y":10.05},{"x":1407978353000,"y":10.05},{"x":1407978415000,"y":9.6},{"x":1407978523000,"y":9.97},{"x":1407978524000,"y":9.97},{"x":1407978546000,"y":10.83},{"x":1407978562000,"y":11.19},{"x":1407978571000,"y":11.15}]}]

any suggestions on how achieve this? thanks!

http://cmaurer.github.io/angularjs-nvd3-directives/multi.bar.chart.html

you can : work angular, isn't work !: 

$scope.tooltipcontentfunction = function(){     return function(key, x, y, e, graph) {         return  'super new tooltip' +             '<h1>' + key + '</h1>' +             '<p>' +  y + ' @ ' + x + '</p>'     } }    <div ng-controller="examplectrl">     <nvd3-multi-bar-chart         data="exampledata"         id="tooltipcontentexample"         width="550"         height="350"         xaxistickformat="xaxistickformatfunction()"         showxaxis="true"         showyaxis="true"         interactive="true"         tooltips="true"         tooltipcontent="tooltipcontentfunction()">             <svg></svg>     </nvd3-multi-bar-chart> </div>

Comments

Post a Comment

Popular posts from this blog

javascript - Jquery show_hide, what to add in order to make the page scroll to the bottom of the hidden field once button is clicked -

i have button on website when clicked, reveals map. button can seen when page first loads up, when clicked, section holding map slides open , goes out of screen since page loads @ top (normal). want page scroll down bottom of div select when button pushed, if map out of screen. if page scrolled down, , clicks show map button, don't want page jump bottom of map. i tried figure out myself, no luck. seasoned jquery coders able give me guidance? many thanks! map = mapdiv.gmap3("get"); infobox = new infobox({ pixeloffset: new google.maps.size(-220, -310), closeboxurl: '', enableeventpropagation: true }); mapdiv.delegate('.infobox .close','click',function () { infobox.close(); }); jquery(".slidingdiv").hide(); jquery(".show_hide").show(); jquery('.show_hide').click(function(){ lastcenter=map.getcenter(); jquery(".slidingdiv&quo
Read more

javascript - Highcharts multi-color line -

Image
i looking create highchart multi-colored line. if goes down under value, become red, , when comes on value, become green . here picture example: or maybe highcharts have other charts models differentiate high or low level color? you can achieve coloring using lineargradient coloring: color: { lineargradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [0.25, 'yellow'], [0.50, 'green'], [0.75, 'yellow'], [1, 'red'] ] } here 0 in stops relates minimum value of series , 1 maximum value, , in between percentages between values. if find percentages according values prior creating chart use correct stops values make relate specific values in data (at least approximately). see this jsfiddle example .
Read more

javascript - Enter key does not work in search box -

tried search guys sorry. input in search box doesnt work (or search) when hit enter when user clicks search button. doing wrong? here code. thanks. <script type="text/javascript"> $(document).ready(function() { $("#submit").click(function() { var url = "http://asla.org/awardssearch.html"; url += "?s=" + $('#googlecse').val(); window.location = url; }); $('#googlecse').keydown(function(event) { if (event.keycode == '13') { $("#submit").click(); } else { //do nothing :) } }); }); </script> <form class="navbar-form navbar-right" role="search"> <div class="search"> <input id="googlecse" type="text" onblur="if(this.value=='')this.value=this.defaultvalue;" onfocus="if(this.value==this.defaultvalue)t
Read more