0

I am trying to modify this fiddle

where in instead of this Json

var data = [{"symbol":"MSFT","date":"Day1","price":40},{"symbol":"MSFT","date":"Day2","price":23.18},{"symbol":"MSFT","date":"Day3","price":24.43}

data I want to pass this Json format { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "cars", }. { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "bikes", }, { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "day8": 154, "lineName": "planes", }

I am new to JS and D3.js can any one give me some hint or example on hoe can i modify the code that it would accept the above Json . or any way of massaging the data

Rakesh
  • 57
  • 7

2 Answers2

1

Timescale is not suitable for the domain

var domain = ["Day 1","Day 2", "Day 3","Day 4","Day 5","Day 6","Day 7"]; var xScale = d3.scale.ordinal() .domain(domain) .rangeRoundBands([0, width], .1); var xAxis = d3.svg.axis() .scale(xScale) .tickSize(0) .orient("bottom"); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis);

Aravind Cheekkallur
  • 3,157
  • 6
  • 27
  • 41
  • this is my codepen goo.gl/1jrooW can u help me how should i remove the existing axis – Rakesh Sep 21 '16 at 07:28
  • @Rakesh May i know the use of date filed in JSON data as well as the xAxisArray variable? – Aravind Cheekkallur Sep 21 '16 at 07:31
  • i have edited the Q pls have a look on the top ...i am trying to convert http://bl.ocks.org/d3noob/88d2a87b72ea894c285c line graph – Rakesh Sep 21 '16 at 07:56
  • @Rakesh This is an axis oriented graph(x/y). X axis will be date and y axis will be price. Then what is the point in converting date field(mmm-yyyy) to day1..etc. Possibly you can do axis text formatting its a better option. I don't get the mapping of day1.day2...to date field really? – Aravind Cheekkallur Sep 21 '16 at 08:10
  • thats just an example i just want to create a multiline graph with x axis as Days and Y axis as numeric data can you provide a simple example for the same and also i have edited the Q what i exactly want to acheive. – Rakesh Sep 21 '16 at 08:13
  • do u have a sample json to share? – Aravind Cheekkallur Sep 21 '16 at 08:15
  • { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "lineName": "cars", }. { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "lineName": "bikes", }, { "day1": 10, "day2": 154, "day3": 24, "day4": 48, "day5": 154, "day6": 48, "day7": 154, "lineName": "planes", } the lineName will decide the color of the line i.e wheteher it is a plane or bike or car – Rakesh Sep 21 '16 at 08:32
  • yes....Thanks a lot....i have also posted the image of the line chart which i want to implement ...can u pls provide any help...or some examples on the same....with the exact UI as that of example – Rakesh Sep 21 '16 at 08:45
  • my major problem is in the JSON data structure as the one used in your example is different and the on which i have is different...can u provide any help on that ....sorry if it sounds silly....i am not so good at js... – Rakesh Sep 21 '16 at 09:53
0

Instead of time scale 

var x = d3.time.scale().domain(Array).range([0, width]);

Use ordinal scale

var ar = ["Day 1","Day 2", "Day 3","Day 4","Day 5","Day 6","Day 7"];
var x = d3.scale.ordinal()
    .domain(arr)
    .rangeBands([0, width]);
Cyril Cherian
  • 32,177
  • 7
  • 46
  • 55