CODEWITHSUNDEEP
javascriptd3.js
Raghuveer
Raghuveer

Reputation: 3057

D3 multiseries chart drawing

I want to draw multiseries chart for my custom data 

client_ip,timestamp,bytes_transfered
92.239.29.77,1412109000000,577818
92.239.29.77,1412110830000,108257
92.239.29.77,1412112600000,20922726
92.239.29.77,1412132430000,3190
92.239.29.78,1412109000000,57818
92.239.29.78,1412110830000,10257
92.239.29.78,1412112600000,2022726

i replaced all the variables

symbol,date,price

with

client_ip,timestamp,bytes_transfered

also

var parse = d3.time.format("%b %Y").parse; with
var parse = d3.time.format("%S %L").parse;

but i dont see the first graph at all now. But i see some weird graphs as well. Kindly let me know how i can fix this.

Upvotes: 0

Views: 81

Answers (1)

user1614080
user1614080

Reputation: 2874

The issue is with the structure of the data, it's not the same as the data in the link you posted. You can use the data in its current structure, but you'll have to do some work. To me it looks like to want to plot multiple series by the client ip, so you'll need to organise your data by client ip. With d3 this can easily be done with d3.nest. So you use something like:

var clients = d3.nest()
    .key(function(d) { return d.client_ip; })
    .entries(data);

This function would yield a nested object organised by client_ip with the timestamp and bytes_transfered organised under values. Which would look, something like:

{ "Objectkey": "92.239.29.77", "values": [ { "bytes_transfered": "577818", "client_ip": "92.239.29.77", "timestamp": "WedOct01201406: 30: 00" }, { "bytes_transfered": "108257", "client_ip": "92.239.29.77", "timestamp": "WedOct01201407: 30: 00" } ] }

The next issue was that the timestamp variable hasn't been passed correctly. Your data is in unix time, so all you need to do is pass it to javascripts new Date function, as in:

data.forEach(function(d) {
    d.timestamp = new Date(+d.timestamp);
});

You then need to modify the line function, as in:

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.timestamp); })
    .y(function(d) { return y(d.bytes_transfered); });

And also the domain calls

x.domain(d3.extent(data, function(d) { return d.timestamp; }));

y.domain([
    d3.min(clients, 
        function(c) { 
            return d3.min(c.values, function(v) { 
                return +v.bytes_transfered; 
            }); 
         }),
    d3.max(clients, 
        function(c) { 
            return d3.max(c.values, function(v) { 
                return +v.bytes_transfered; 
            }); 
         })
]);

Also, note the + in front of the v.bytes_transfered. This is short hand for passing a string to number in javascript.

And putting it altogether you get this

Upvotes: 2

Related Questions