All geek questions in one place

Line diagram of json data in d3

I am learning d3. I want to create a line chart using json data. Data used by me:

var data = [ { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292}, { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292}, { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292}, { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}];

I want the "at" on the x axis and the "value" on the y axis. Also I need to parse "at" just right. Please provide me with directions as I continue. I have implemented the code so far below. I tried to find documentation for this, but did not find it.

 <html> <head> <title>line chart on json</title> <script src="http://d3js.org/d3.v2.js"></script> <style> /* tell the SVG path to be a thin blue line without any area fill */ path { stroke: steelblue; stroke-width: 1; fill: none; } </style> </head> <body> <script> var width = 400; var height = 150; var data = [ { "at": "2014-11-18T07:29:03.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:53.859Z", "value": 0.563292}, { "at": "2014-11-18T07:28:43.859Z", "value": 0.573292}, { "at": "2014-11-18T07:28:33.859Z", "value": 0.583292}, { "at": "2014-11-18T07:28:13.859Z", "value": 0.553292}, { "at": "2014-11-18T07:28:03.859Z", "value": 0.563292}]; var x = d3.scale.ordinal(); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x).orient("bottom"); var line = d3.svg.line() .x(function(d) { return x(d.at);}) .y(function(d) { return y(d.value); }) .interpolate("linear") var graph = d3.select(graph1).append("svg:svg").attr("width", "300"). attr("height", "150"); function make_y_axis() { return d3.svg.axis().scale(y).orient("left").ticks(5) } </script> </body> </html>
+6
source share
2 answers

Have a look at this example http://bl.ocks.org/crayzeewulf/9719255

There were 2 graphs, but you can use only one and put the data as you wish.

As for the date, you can see this example http://jsfiddle.net/robdodson/KWRxW/ , specifically xAxis.

 var xAxis = d3.svg.axis() .scale(x) .orient('bottom') .ticks(d3.time.days, 1) .tickFormat(d3.time.format('%a %d')) .tickSize(0) .tickPadding(8);
+6
source

What is graph1 in the line below:

var graph = d3.select (graph1) .append ("svg: svg"). attr ("width", "300"). attr ("height", "150");

+1
source

Source: https://habr.com/ru/post/978723/

More articles:


All Articles