novus / nvd3

A reusable charting library written in d3.js
http://nvd3.org/
Other
7.22k stars 2.15k forks source link

Line chart with text labels on x-axis #419

Closed cloudeeo closed 10 years ago

cloudeeo commented 10 years ago

I cannot get text labels for a line chart on the x-axis. I tried the syntax that works for bar charts:

data = [ {
  "key": "matches",
  "values": [  { "label" : "Inter", "value" : 77 }, { "label" : "Juventus", "value" : 77 }, { "label" : "Milan", "value" : 77 }, { "label" : "Napoli", "value" : 77 }, { "label" : "Lazio", "value" : 77   }, { "label" : "Roma", "value" : 77 }, { "label" : "Fiorentina", "value" : 77 }, { "label" : "Udinese", "value" : 77 }, { "label" : "Catania", "value" : 77 }, { "label" : "Sampdoria", "value" : 77 }, { "label" : "Atalanta", "value" : 77 } ],
  "color": "#64649b"
} ];

with no points on the chart. And then tried with this, but got only numbers on the x-axis

data = [ {
  "key": "matches",
  "values": [  { x : "Inter", y : 77 }, { x : "Juventus", y : 77 }, { x : "Milan", y : 77 }, { x : "Napoli", y : 77 }, { x : "Lazio", y : 77 }, { x : "Roma", y : 77 }, { x : "Fiorentina", y : 77 }, { x : "Udinese", y : 77 }, { x : "Catania", y : 77 }, { x : "Sampdoria", y : 77 }, { x : "Atalanta", y : 77 } ],
  "color": "#64649b"
} ];

what is the right syntax? thanks!

m48u commented 10 years ago

@cloudeeo Tried to overwrite tickFormat function for xAxis? chart.xAxis.tickFormat(function (d) { return "category_" + d;});

But for me it seems that a BarChart is a better choise to visualize your data.

bartaelterman commented 10 years ago

Shouldn't your x values be numeric if you want to draw a line chart?

cloudeeo commented 10 years ago

Well not necessarily, I have a client who wants to plot months names on the x-axis... Anyway I was able to achieve what I need thanks to m48u suggestion. I used something like this:

chart.xAxis.tickFormat(function (d) { return myData[d].label;});