dc.js

How to make graphs in dc.js scrollable within a fixed dimension div?

由 空扰寡人 提交于 2019-12-04 04:19:29
I have been making some graphs using dc.js and i am plotting some manufacturers in a row-chart against their count. when manufacturer increase in number the row width becomes really small and hard to distinguish. I tried to use overflow : scroll in css but it also scrolls the scale with the graph. There is a way to do this. I have 4 files, index.html, iframe.html, iframe.css, and iframe.js. Here is my setup. In index.html I had: <html> <head> <title>Example</title> <meta charset="utf-8"> <script type="text/javascript" src="d3.v3.min.js"></script> <script type="text/javascript" src="crossfilter

How to make the dc.js charts responsive

由 杀马特。学长 韩版系。学妹 提交于 2019-12-03 23:10:34
Is there a any way to make the dc.js charts responsive? I'm struggling a lot to make the charts fit the desktop size. I'm using Twitter Bootstrap 3. I store the width of the div to a variable and pass it to the chart width. This will not make the chart responsive. But on first load the charts get to the width according to the size of the screen. But now I face a challenge in it, that I have a different file for the dc.js chart. And I'm calling through a iframe . When I call it through iframe the width is 0 for all the divs, and no charts appear in the webpage. But when I reload the iframe

dc.js - min value from group per day

由 天涯浪子 提交于 2019-12-03 21:37:16
I have the following data structure and would like to display a lineChart with the minimum value of 'amount' (group) by Day (of date) (dimension). var data = [ {date: "2014-01-01", amount: 10}, {date: "2014-01-01", amount: 1}, {date: "2014-01-15", amount: 0}, {date: "2014-01-15", amount: 10 }, {date: "2014-02-20", amount: 100 }, {date: "2014-02-20", amount: 10 }, ]; Where as I would normally be doing something along the following lines, I'm not sure how to find the min in the group. var dateDim = facts.dimension(function (d) {return d3.time.day(d.date);}); var dateDimGroup = dateDim.group()

Custom Text filter for DC.js dataTable

由 最后都变了- 提交于 2019-12-03 17:47:25
问题 I'm building a dashboard to show some data. I have several charts and a table listing all of the data. I'm trying to add search functionality to filter the chart. I have a bunch of companies and some data about each. So if I search for "Appl" only companies that start with "Appl" will be listed in the data table and the charts will reflect this. The only issue I have with the current implementation is when I change this filter or clear it. The data seems fine, but the charts render

Does Crossfilter require a flat data structure?

由 孤街醉人 提交于 2019-12-03 17:31:30
问题 All the examples of Crossfilter I've found use a flat structure like this: [ { name: “Rusty”, type: “human”, legs: 2 }, { name: “Alex”, type: “human”, legs: 2 }, ... { name: “Fiona”, type: “plant”, legs: 0 } ] or "date","open","high","low","close","volume","oi" 11/01/1985,115.48,116.78,115.48,116.28,900900,0 11/04/1985,116.28,117.07,115.82,116.04,753400,0 11/05/1985,116.04,116.57,115.88,116.44,876800,0 I have hundreds of MBs of flat files I process to yield a 1-2MB JSON object with a

Using dimensions with arrays in dc.js/crossfilter

由 怎甘沉沦 提交于 2019-12-03 16:12:15
Crossfilter supports dimensions with arrays since version 1.4.0-alpha.06 https://github.com/crossfilter/crossfilter/wiki/API-Reference#dimension_with_arrays Is it possible to exploit this functionality in dc.js? I haven' found any examples yet... I am aware of the method described in Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key? , but that works with earlier versions of crossfilter too (it does not make use of the new functionality). With help from comments above, I managed to get this working, very simple

Does Crossfilter require a flat data structure?

由 别说谁变了你拦得住时间么 提交于 2019-12-03 07:08:51
All the examples of Crossfilter I've found use a flat structure like this: [ { name: “Rusty”, type: “human”, legs: 2 }, { name: “Alex”, type: “human”, legs: 2 }, ... { name: “Fiona”, type: “plant”, legs: 0 } ] or "date","open","high","low","close","volume","oi" 11/01/1985,115.48,116.78,115.48,116.28,900900,0 11/04/1985,116.28,117.07,115.82,116.04,753400,0 11/05/1985,116.04,116.57,115.88,116.44,876800,0 I have hundreds of MBs of flat files I process to yield a 1-2MB JSON object with a structure roughly like: { "meta": {"stuff": "here"}, "data": { "accountName": { // rolled up by week "2013-05

Custom Text filter for DC.js dataTable

由 十年热恋 提交于 2019-12-03 06:27:30
I'm building a dashboard to show some data. I have several charts and a table listing all of the data. I'm trying to add search functionality to filter the chart. I have a bunch of companies and some data about each. So if I search for "Appl" only companies that start with "Appl" will be listed in the data table and the charts will reflect this. The only issue I have with the current implementation is when I change this filter or clear it. The data seems fine, but the charts render incorrectly. They don't return to their original positions when cleared, or they add extra data somehow. Any tips

Load large dataset into crossfilter/dc.js

由 笑着哭i 提交于 2019-12-03 05:15:47
问题 I built a crossfilter with several dimensions and groups to display the data visually using dc.js. The data visualized is bike trip data, and each trip will be loaded in. Right now, there's over 750,000 pieces of data. The JSON file I'm using is 70 mb large, and will only need to grow as I receive more data in the months to come. So my question is, how can I make the data more lean so it can scale well? Right now it is taking approximately 15 seconds to load on my internet connection, but I'm

dc.js heatmap deselected colors

由 寵の児 提交于 2019-12-02 20:04:34
问题 In dc.js I have linked a heatmap with a bar chart. When a range is selected on the bar chart, the heatmap defaults to the first color in the color scheme instead of the gray deselected color. How can I get the heatmap to use the gray color? 回答1: The solution is to use a custom reduce function on the group. In so doing, I can set the value of a deselected item to null and then use an appropriate color for all null values. 来源： https://stackoverflow.com/questions/40580748/dc-js-heatmap
订阅 dc.js