0

I'm trying to create multiple times series charts using DC.JS from one dataset with multiple dimensions

The problem I'm having is that each dimension has null values in them 

date,value,#transactionLocalServiceperformancedashboard,Averagetimeonpage,Channelbreakdownfortransactions,Numberofuserenquiries,Pageviews,Reasonsforrejectedapplications,UniqueVisitors,"Userswhousetransaction,abandonoruselegacyroutewhenstartinganonlineapplication",Visits
05/02/17,1.2,,Average time on page,,,,,,,
05/02/17,105,For telephone,,Number of transactions phone,,,,,,
05/02/17,110,For post,,Number of transactions face to face,,,Number of incomplete,,Use legacy route,
05/02/17,165,For face to face,,Number of transactions online new transaction,,,,,Use new transaction,
05/02/17,178,,,,,,,Unique visitors,,
05/02/17,198,,,,,,,,,Visits

After lots and lots of searching I've come up with this jsfiddle 

function remove_empty_bins(source_group) {
    return {
        all:function () {
            return source_group.all().filter(function(d) {
                return d.value !== "";
            });
        }
    };
};

var coerce_row = function(d){
    // console.log(d.VerifyLocalServiceperformancedashboard)

    return {
        time: d.date,
        field: remove_empty_bins(d.VerifyLocalServiceperformancedashboard),
        count: +d.count,
    };
};

var dataset = data.map(coerce_row);

https://jsfiddle.net/zilnhoj/d8mqpyun/2/

I'm basically trying to filter out the nulls of each dimension and chart that dimension.

Is this possible with DC.JS or do I need to get a separate csv file for each dimension and load them in for each chart - I have the series chart working on a single dimension

vinS
  • 1,417
  • 5
  • 24
  • 37
zilnhoj
  • 16
  • 2
  • `remove_empty_bins` is intended to be applied to crossfilter groups. There wouldn't be much utility in applying it to individual rows (because if you want to manipulate your input data, you can do that with plain Javascript). I'm not completely sure what you're trying to do here, but maybe you want to just aggregate normally and then remove the bin which corresponds to the empty bin label `""`. [Remove particular bins.](https://github.com/dc-js/dc.js/wiki/FAQ#remove-particular-bins) – Gordon Apr 21 '17 at 19:15
  • I need to chart each column of data in the csv against the date and count column. e.g in the '#transactionLocalServiceperformancedashboard' i need to chart each entry against it's corresponding date and count value. you can see within that column there is "" values. I'm looking for a method where I can remove those entries from the variable called 'dataset' in my code. My understanding from my code is that the function called coerce_row should only produce an object that contains 'time', 'field', and 'count'. looking at the output I can see that doesn't appear to be the case – zilnhoj Apr 23 '17 at 11:04
  • and I can't understand why as I'm new to JS. I've shaped the data using a python script. Can you please explain what you mean by 'aggregate normally'? and if it's not too cheeky can you please show how I can use the 'remove particular bins' you mentioned above within my code. Thanks and thanks for your response – zilnhoj Apr 23 '17 at 11:07
  • I think you need to reconsider your data structure. Get your data in Excel or your tool of choice and arrange it so that there are as few blank cells as possible. If you want to post a question laying out your data structure and an example in tabular format in the question and asking how to improve it, the answers would probably get you on the right track. Pursuing tidy data principles would probably be a good start, though the super-long table approach is not always optimal for dc.js/crossfilter - http://vita.had.co.nz/papers/tidy-data.pdf – Ethan Jewett Apr 23 '17 at 13:12
  • As @EthanJewett says, you may be better off flattening your source data. It looks like you're currently trying to do this in JavaScript, which is also possible, but you might as well use a language/environment you're more familiar with for that part. That said, there should be a way to work with the data as you have it, without flattening it into rows of three columns as `data.map(coerce_row)` does. I guess I'm reluctant to try to answer this since `remove_empty_bins` should be used after passing data through crossfilter, so I don't really understand what you're trying to do. – Gordon Apr 23 '17 at 14:20
  • Thanks for this both - I have the flattened data using the tidy data principles and assumed that it was best to shape it that way I have so that it's easier to use with dc.js. I don't have to use remove_empty_bins - if there is a better way to do this I'm open to all suggestions on how I could do this and want to learn the best way to do it for DC.JS. I basically just want to replicate this with that data I have dc-js.github.io/dc.js/examples/series.html for multiple charts – zilnhoj Apr 24 '17 at 09:46
  • Sorry for the annoying togetherjs whatever they is in new to asking questions on here I promise to do better next time and try not to do annoying things. I've given up on trying to visualise the data in this shape as it obviously isn't suitable. I'll use the flattened data instead and ask a separate different question thanks for your help – zilnhoj Apr 26 '17 at 15:33

0 Answers0