Question

172

line chart of json data in d3

rated 0 times [ 178] [ 6] / answers: 1 / hits: 15310 / 10 Years ago, wed, november 26, 2014, 12:00:00

I am learning d3. I want to make a line chart using json data. The data I am using is:

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 at on x axis and value on y axis. Also I need to parse the at as time only. Please provide me pointers how i will proceed further. The code till now I have implemented is below. I tried to look for documentation for this but found none.

<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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

cristinadomoniquel

Add To Favorites

Follow

Total Points: 320

Total Questions: 94

Total Answers: 94

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

cristinadomoniquel questions

1 find() vs map() in JavaScript

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Get POST request body with express and fetch

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Module parse failed: Unexpected token when using webpack 5

Mon, Nov 23, 20, 00:00, 4 Years ago

1 How to reset vuetify's v-input-file

Mon, Aug 17, 20, 00:00, 4 Years ago

1 Jest and ESLint: Expect must have a corresponding matcher call

Fri, Jul 31, 20, 00:00, 4 Years ago

View All

answered 10 Years ago maya · Accepted Answer

Look at this example http://bl.ocks.org/crayzeewulf/9719255

There used 2 graphs, but you can use just one and place data as you want.

As for date you can look at this example http://jsfiddle.net/robdodson/KWRxW/, xAxis in particular.

var xAxis = d3.svg.axis()

    .scale(x)

    .orient('bottom')

    .ticks(d3.time.days, 1)

    .tickFormat(d3.time.format('%a %d'))

    .tickSize(0)

    .tickPadding(8);