{"id":7555,"date":"2015-07-26T05:13:41","date_gmt":"2015-07-26T05:13:41","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/nvd3-line-chart-with-string-values-on-x-axis-open-source-projects-novus-nvd3\/"},"modified":"2015-07-26T05:13:41","modified_gmt":"2015-07-26T05:13:41","slug":"nvd3-line-chart-with-string-values-on-x-axis-open-source-projects-novus-nvd3","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/07\/26\/nvd3-line-chart-with-string-values-on-x-axis-open-source-projects-novus-nvd3\/","title":{"rendered":"nvd3 line chart with string values on x-axis-open source projects novus\/nvd3"},"content":{"rendered":"<p>i&#8217;m new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart, but i need a line, instead of bars<\/p>\n<p>my result looks like this Line Chart The values are all mapped to x=0<\/p>\n<p>my code<\/p>\n<pre><code>nv.addGraph(function() {\n    var chart = nv.models.lineChart()\n    .useInteractiveGuideline(true) \n    .transitionDuration(350)\n    .x(function(d) { return d.x}) \n    .y(function(d) { return d.y}) \n    .showLegend(true)\n    .showYAxis(true)\n    .showXAxis(true);\n\n    chart.xAxis.tickValues([\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"]);\n\n    d3.select(element + ' svg')\n    .datum(data) \n    .call(chart);\n\n    nv.utils.windowResize(chart.update);\n\n    return chart;\n});\n<\/code><\/pre>\n<p>and my data<\/p>\n<pre><code>[{\"color\":\"#a215af\",\"key\":\"products\",\"values\":[\n    {\"label\":\"Monday\",\"y\":0,\"x\":\"Monday\"},\n    {\"label\":\"Tuesday\",\"y\":0,\"x\":\"Tuesday\"},\n    {\"label\":\"Wednesday\",\"y\":1,\"x\":\"Wednesday\"},\n    {\"label\":\"Thursday\",\"y\":6,\"x\":\"Thursday\"},\n    {\"label\":\"Friday\",\"y\":2,\"x\":\"Friday\"},\n    {\"label\":\"Saturday\",\"y\":0,\"x\":\"Saturday\"},\n    {\"label\":\"Sunday\",\"y\":13,\"x\":\"Sunday\"}]}] \n<\/code><\/pre>\n<p>i tried a lot, but have no idea what to do.<\/p>\n<p>any help or suggestions would be great<\/p>\n<p><strong>Solution<\/strong> like dcclassics mentioned i took number values instead of strings and then used tickValues and tickFormat:<\/p>\n<pre><code>var days = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\", \"Sunday\"]\n\nchart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])\n.tickFormat(function(d){\n    return days[d]\n});\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>i&#8217;m new to nvd3 charts. i need a line chart, with string-values on the x-axis the chart should be like this Bar Chart, but i need a line, instead of bars my result looks like this Line Chart The values are all mapped to x=0 my code nv.addGraph(function() { var chart = nv.models.lineChart() .useInteractiveGuideline(true) .transitionDuration(350) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7555","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7555"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7555\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}