score:1
what i would do, is this :
create a new date that has time
00:00:00
:date = new date('01-01-2016 00:00:00')
turn that date into a timestamp :
timestamp = date.gettime()
add y seconds to that timestamp :
timestamp = timestamp + (y * 1000)
create a new date, using that value as input :
date = new date(timestamp)
use
d3.time.format
to format that date accordingly :time = d3.time.format("%h:%m:%s")(date)
put all the pieces together and turn it into a oneliner :
time = d3.time.format("%h:%m:%s")(new date(new date('01-01-2016 00:00:00').gettime() + (y * 1000)));
now, you can just put this oneliner into a format
function for your y-axis and return time
:
var chart = c3.generate({
data : {
x : 'x',
columns : [
['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis : {
x : {
type: 'timeseries'
},
y : {
tick : {
format : function (y) {
return d3.time.format("%h:%m:%s")(new date(new date('01-01-2016 00:00:00').gettime() + (y * 1000)));
}
}
}
}
});
see this fiddle for a demo.
more info :
score:1
to also get this work with firefox you need to set:
fri jan 01 2016 00:00:00 gmt+0100 (cet)
instead of
01-01-2016 00:00:00
Source: stackoverflow.com
Related Query
- How to show hh:mm:ss format at y-axis with c3?
- D3.js V4 : How to create X axis with time and %H:%M:%S format
- How to format D3 axis using a unix timestamp with timezone from postgres
- How to setup D3.js axis labels to show rounded numbers with the $ sign?
- How to format x axis with date in d3js
- How do I show a bootstrap tooltip with an SVG object?
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Format Y axis values, original figures in millions, only want to show first three digits
- How to show c3.js No data but with legend for empty column?
- How can I show a graph using d3 force layout with initial positions set and no movement at all?
- nvd3.js-Line Chart with View Finder: rotate axis labels and show line values when mouse over
- How to show a tooltip with value when mouseover a svg line graph using d3.js?
- How to show the total per column in tooltip title with c3.js?
- How to format the Y axis values on Rickshaw Graphs
- With D3, how can I set attribute ("fill", "none") of axis path and line, but not text (without editing stylesheet)
- How to show pandas data on web page with d3 style graphs?
- In R plotly d3js how to format a number with space instead of comma?
- how to draw nvd3 simple barchart with x and y axis in angularjs
- How to format brushed time axis (with context-dependent values)
- d3.js, how can i create an axis with custom labels and customs ticks?
- How to line up x axis on stacked bar chart with a line overlay in d3.js
- D3.js v7 - How to make Y axis labels always show on screen for a scrollable chart
- How to create left axis with variable tick interval in tick values and has same distance between tick value
- Axis with log scale, how to include tick for 0?
- How to get map to show longitude and latitude accurately with d3
- How to show D3 chart using Bootstrap modal popup when click on button and download it as image format
- How do you animate axis transitions with d3 in r2d3?
- How to align x axis with bars respectively in Combo Chart (Bars and Lines)?
- How to show labels in first two rings only in a zoomable sunburst partition with rotated labels?
- How to sort bar charts synchronous with the ticks of x axis
More Query from same tag
- Where can I find a good label placement algorithm for line charts?
- d3 globe - says rotate is not a function
- Query a Chart with C3.js
- D3 Network Graph
- d3.js - determining nested depth (or children of children)
- How to show values in C3.js in Donut Legend?
- d3 line and points on map from geojson or csv data
- Backward direction of path with arrow is not showing properly in D3.js V5
- D3 Selecting an element inside an SVG
- C3 chart is not visible in Bootstrap grid layout
- Unable to add Fisheye effect to Labels in Forced Labelled Layout using D3.js
- Adding page breaks to d3 visualization based on group id
- Add points to path
- backgroung fill pattern image not export
- how to set collision between nodes and other svg element in D3.js
- D3js vertical and horizontal custom line display overflow in zoombable chart
- in d3.geo MultiPoint how can I provide different shapes for different poins?
- Unable to click child element as parent is always in focus
- Can't get marker to display in nvd3 bullet chart when marker value is zero
- D3 visualization to create building / campus map
- How can I get only elements with odd ids from a D3 selection?
- Utilize two objects for a single topojson merge. Multiple datum in d3.select("svg")
- scale.linear() is returning NaN
- D3.js Scatterplot with Lasso - record selections
- Glowing/Flashing Effect on SVG D3js
- D3 selection causing incomprehensibely overlapping line plots---how do I fix it?
- d3js v4 - Brush precision, how to get millis
- Uncaught TypeError: t.rgb is not a function
- D3 Line Chart- Line Not Scaling properly (ClipPath, Zoom)
- d3 js highlight nodes containing given string