I have five bar charts plotted using dc and cross-filter.
The input to cross-filter changes with a drop-down i.e. whenever the
user selects a metric in the drop-down, the cross-filter input
changes
Also, the metrics selected in the drop-down have different values to be plotted which I am handling using if conditions(check the value of avgIndex in if,else-if and else block)
The graphs come out fine when metrics listed in if and else-if blocks are selected.However, when the remaining metrics (else block) are selected, the charts go haywire
At first(when the metric of else block are selected) the graphs come out correctly, the moment I click on any of the bars(to put the filters on), the charts show irrelevant negative values(though the values of my metrics can't ever go negative, as per the data I have)
Also, for same filters applied, I get different values across different charts at different instance of time, which is really weird.For the same filters applied, how can the data plotted be different at different instance of time?
Related
I have data being written to Elasticsearch that I wanted to visualize in Kibana, but I'm having problems with the visualization.
I have a process writing when it starts {ProcessStartTime} and when it stops {ProcessStopTime}
I'm trying to create what I thought was a simple visualization:
A vertical bar chart with Count as the Y-Axis and {ProcessStartTime} and {ProcessStopTime} as bars on the X-Axis.
The problem is, instead of count of 480 for the {ProcessStartTime} as one vertical bar and a count for 389 for {ProcessStopTime} as another vertical bar. It separates out all unique {ProcessStartTime} entires so I have a count of 1 with a thousand vertical bars. Moreover, I appears I cannot add more than one term, just sub categories, so {ProcessStopTime} isn't on the bar chart at all. So I decided to try the Filter aggregation, which allowed me to get a count of all entries with "ProcessStartTime" in the body. However, I cannot add "ProcessStopTime" as another filter as those don't coexist.
My current solution is to have two charts, using the Filter aggregation, then compare the charts side-by-side to compare the counts. For obvious reasons, I'd like those combined, but I just don't see how to have two X-Axis buckets, or to group the data as it needs to be.
I am missing something obvious?
I might get wrong what you are trying to do and I can't comment on your question to ask for details, but here are a few things that you can do:
Get all entries regardless of their content (empty search query). Keep the Y-axis metrics for Aggregation-Count.
After that you can set a bucket for the X-axis with Filters aggregation, and use 2 filters.
Filter 1: ProcessStartTime: *
Filter 2: ProcessStopTime: *
This setup should give you 2 bars with the count of records that have the given attributes.
The other option is to make a new attribute, for example 'event', and give this attribute the values 'ProcessStartTime' and 'ProcessStopTime', and make a Terms aggregation bucket setup on event.keyword.
I hope this helps.
Need to display line in a line-chart , with the ability to move the tiles, to see a max bitrate value line, to see labels and axis pointers on hover, grouped with a table and time Slider.Y dimension needs to display "bitrate total" or "bitrate Avg" (as defined in code). X dimension needs to display 15 min interval in scope of weeks.
I can upload my data into a table but not into the line graph. I can see points on the graph using .renderDataPoints() but no lines.
I checked the data - could not find any null/NaN values being returned, not using any old version of colors.
The code can be found in https://jsfiddle.net/dani2011/bu2ag0f7/8/. Tried to replace my CSV with var data but nothing is being displayed at the moment in the fiddle. The code as whole is displayed in https://groups.google.com/forum/#!topic/dc-js-user-group/MEslyF2RWRI
Any help would be greatly appreciated.
Here's my go-to-answer for how to put data into a jsFiddle. Basically it's easiest to stick it in an unused tag in the HTML. bl.ocks.org / blockbuilder.org is easier for this.
Here's a fork of your fiddle with the data loaded that way:
http://jsfiddle.net/gordonwoodhull/bu2ag0f7/17/
I also had to remove the spaces from the column names, because those got d3.csv confused and caused the BITRATE calculations to fail.
There was also some stray code inside the renderlet which was failing with a complaint about dim not existing.
The main reason why data was not displaying was because the input groups were not producing usable aggregated data. Your data is very close together in time, so aggregating by week would aggregate everything.
The way to debug this is to put a breakpoint or a console.log before the chart initialization and look at the results of group.all()
In this case bitrateWeekMinIntervalGroupMove and minIntervalWeekBitrateGroup were returning an array with one key/value pair. No lines can be drawn with one point. :)
It looks like you originally wanted to aggregate by 15 minute intervals, so let's get that working.
For whatever reason, there are two levels of aggregation in crossfilter, the dimension level and the group level. The dimension will have first crack at generating a key, and then the group will further refine these keys.
Your min15 function will map each time-key to the 15-minute mark before it, but it needs data that is higher than 15 minutes in resolution. So let's put these groups on the dateDimension, which hasn't already been mapped to a lower resolution:
var minIntervalWeekBitrateGroup = dateDimension.group(min15).reduceSum(function (d) {
return +d.BITRATE
});
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
...
Great, now there are 30 data points. And it draws lines.
I made the dots a bit smaller :) because at 30 pixels it was hard to see the lines.
Zooming in using the range chart reveals more of lines:
There still seem to be glitches in the reduce function (or somewhere) because the lines drop to zero when you zoom in too far, but hopefully this is enough to get you moving again.
My fork of your fiddle: http://jsfiddle.net/gordonwoodhull/bu2ag0f7/25/
I have a report with multiple sets of data, but only one dataset. I've accomplished this by setting up multiple different columns in my table that SSRS uses. I set up a rectangle that contains a text box header and a tablix; the tablix is filtered on an identification column in the table so it only shows its own data. What I'd like to do is to only show each rectangle if there is applicable data.
I know that I can solve this problem by adding another row in my tablix and moving the text box title into it, and then showing or hiding the tablix based on whether or not it has data. That's probably the smart move. But before I did that, I wondered if there was a way to assign visibility to the rectangle based on the presence or lack of values in an arbitrary column in SSRS. First doesn't work, because everything other than the first rectangle has NULL in the relevant columns on the first row. Count doesn't work because the rectangle isn't actually hooked to data. What I'm looking for is something like a WHERE clause (=Count() where type = "ab" or something). Like I said, I can go with the tablix route. But the broader scope of this is the ability to control the presence on the report of various items based on the results that have been returned.
I am trying to show machine states over time. Part of this is to reproduce/automate a report that used to be done by hand. It consists of coloring 2minute 'time slices' in Excel based on what the machine is doing.
(Sorry, not enough reputation to post a picture, but it is a classic heatmap where the state drives the color. Some non DC-JS fiddle: http://jsfiddle.net/ww6Lbnc5/4/)
I was able to generate most of what I want in the following jsfiddle:
http://jsfiddle.net/hwhfxz2t/14/
See fiddle for code.
The total state duration (for selected time frame) is shown in the pieChart, followed by the individual state lines and then the heatmap that people are used to. (the ZOOM and date selection buttons do not work in the fiddle but are there to select specific data ranges or zoom in if you like).
The line charts uses the original representation of the states, which consists of a time the state is entered and a duration.
In order to make the heat map work, I had to (I think) take the original data and convert it into individual minute chunks and mark them with a state. So for instance the original data specifying:
RUN state starting 14:30 for 300 seconds
becomes:
14:30=RUN, 14:31=RUN, 14:32=RUN, 14:33=RUN and 14:34=RUN
The code in lines 233-297 loops through the original data and generates a new one that does this. In cases where there is more than one state within a given minute, the last state survives.
This works okay but it seems that this code is exactly what is normally done in group().reduce(add,remove,init). But in this case I need to add multiple timeslots depending on the duration of a state.
Also, because it is now using a different crossfilter, maps do not update each other.
Here are my questions related to this:
Can I display a heatmap without supplying information for all individual
'cells'? (i.e. straddle cells based on a value, similar to rowspan in a table)
Can I add multiple values at once inside group().reduce()?
Is there an easy way to invert the yAxis so 0 is at the top?
When clicking a row in the heatmap, it selects a column and vice-versa?
I'm not sure if this should be in the crossfilter group. If so please ignore my rambling. If someone knows how to keep the charts linked by grouping better, please let me know.
--Nico
Concerning Question 3:
DC.js heatmaps currently do not support custom order functions on axis but there is a pull request that has been merged into the developing branch and should be accessible to the public soon.
You could manually edit the dc.js file to set the sorting in heatmaps to a custom function. In the latest (2.0.0-beta10) version it is the following line:
rowValues.sort(d3.ascending);
and accordingly
colValues.sort(d3.ascending);
I have a graph with a network and a few histograms.
For the network, each node has a few properties with continuous value. The histograms are for node properties. Is there an easy way to highlight the node in the network, when users brush the histogram? Could I bind a dimension of the network data to the node class attribute "selectednode"?
I have checked dc.js, but it seems not support network graph.
Thanks
Crossfilter isn't really built for highlighting, as filtering will remove the data outside the filter from the view of other dimensions and groups. It sounds like you don't want unselected network nodes to disappear, but rather want nodes with property values falling within the selection to be highlighted. I'd build either your histogram or your network directly based on unfiltered data (not based on the Crossfilter) and then whenever the brush event happens, re-render the network nodes, checking the current brush extent against the property values.
How about two crossfilters built from the same records? The filtering one (cfFilt) would work as expected with dimensions for everything that can be filtered. The highlighting filter (cfHigh) would have one dimension (based on a record id or an identity function, d=>d) that is filtered by inclusion in cfFilt.groupAll(), plus dimensions that filter anything that can be highlighted. (cfFilt().groupAll().reduce() will need to return records, not counts. I can say how in comments if anyone needs to know.)
So cfHigh.groupAll() returns the records that pass through all the filtering and all the highlighting.
An interesting (and otherwise hard to achieve) consequence of this approach is that if you highlight something, then a filter makes that thing disappear, and then that filter is removed and the thing comes back, it will stay highlighted as long as nothing came along to change the highlighting filter in the meantime.