d3.js - nvd3 line chart with string values on x-axis -
i'm new nvd3 charts. need line chart, string-values on x-axis chart should bar chart, need line, instead of bars
my result looks line chart values mapped x=0
my code
nv.addgraph(function() { var chart = nv.models.linechart() .useinteractiveguideline(true) .transitionduration(350) .x(function(d) { return d.x}) .y(function(d) { return d.y}) .showlegend(true) .showyaxis(true) .showxaxis(true); chart.xaxis.tickvalues(["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"]); d3.select(element + ' svg') .datum(data) .call(chart); nv.utils.windowresize(chart.update); return chart; });
and data
[{"color":"#a215af","key":"products","values":[ {"label":"monday","y":0,"x":"monday"}, {"label":"tuesday","y":0,"x":"tuesday"}, {"label":"wednesday","y":1,"x":"wednesday"}, {"label":"thursday","y":6,"x":"thursday"}, {"label":"friday","y":2,"x":"friday"}, {"label":"saturday","y":0,"x":"saturday"}, {"label":"sunday","y":13,"x":"sunday"}]}]
i tried lot, have no idea do.
any or suggestions great
solution dcclassics mentioned took number values instead of strings , used tickvalues , tickformat:
var days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] chart.xaxis.tickvalues([0, 1, 2, 3, 4, 5, 6]) .tickformat(function(d){ return days[d] });
like dcclassics mentioned took number values instead of strings , used tickvalues , tickformat:
var days = ["monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday"] chart.xaxis.tickvalues([0, 1, 2, 3, 4, 5, 6]) .tickformat(function(d){ return days[d] });
this solutions worked me
Comments
Post a Comment