I'm trying to build a sunburst diagram with an interactive slider. More specifically, I would like the slider, which is based on date, to appear and disappear slices in the sunburst according to the date associated with those slices.
I have created both the slider and the sunburst, but cannot get them to work together.
http://plnkr.co/edit/YIHd7o3fQ9RLFuN5PWVa?p=preview
I believe the problem lies in the 'updateData' function, which compares the date selected by the slider to the date associated with each datapoint. More specifically, the syntax obtaining the date of the slices appears to be incorrect, as it console.log() a "null" value.
Things I've tried:
To check syntax, I replaced d.data.Cattime with d.data.id. The latter logs the dataset information to the console - suggesting the syntax is correct. Strangely, this doesn't work with d.data.parentId.
I thought the problem might be that items under the Cattime heading is not represented as a date. But this code, console.log(parseDate(data[1].Cattime)); suggests that this is recognized as a date.
Any suggestions appreciated.
You should compare two date objects in your return statement.
svg.selectAll(".node").style("fill", function(d) {
return new Date(((d.data.data.Cattime))) > new Date(h) ? "red" : "black";
}
Also, initially you are setting fill color of path as a style property, but in your update function you are setting it as an attribute.
Apparently, its value doesn't change when you set it as an attribute later on. So, either change update function to style or change your initialization to attribute.
working example
Related
I am trying to build report using Telerik report designer and not able to identify if charts in below format are supported, if supported which chart type we have to use and which property will fill in color between low and high
candlestick , range chart only displays lines (2nd image)
For the candlestick, it looks like a configuration issue. Please, check these things:
High, Low, Open, Close are not properly set
The data source fields that are used are not of numeric type (i.e. hold numerics as strings)
As for coloring the candlestick, check DataPointStyle property. there you can either set BackgroundColor directly, or use DataPointConditionalFormatting in order to add dynamic formatting based on the underlying data.
I am not sure what is the chart in the first picture, can you please shed some more light on its purpose?
I am working with D3 to try and create a simple bar chart. My x-axis uses ScaleTime and my y-axis uses ScaleLinear. In the pictures below, you can see that the values I've put for the domain (date values) go past the the range. Shouldn't the ticks be confined to the line? Been struggling with this for a while and haven't been able to find anything on the internet.
Graph
Inspect Element
EDIT
After applying .clamp, this is the result
New Graph
And here is the main part of my code I'm looking at (some of the values are arbitrary)
Code
I think this is because clamping is disabled by default on time scales:
Constructs a new time scale with the specified domain and range, the default interpolator and clamping disabled.
It's hard to suggest a fix without seeing your code, but try something like this:
d3.scaleTime()
.domain([domain)
.range([range])
.clamp(true)(Date.now())
I have the following result set giving me a specific status of an item . I need to build a SSRS 2015 Gantt chart to represent this data. I am having difficulty getting the data to display.
Result Set: StatusDate,Status,BegDate,EndDate, StatusDays
In the chart, I want the category to be on monthly intervals of the range provided (BegDate – EndDate) and the series to be each DAY in the range provided (BegDate – EndDate).
The bars should represent the item being Up or Down with “Up” being Green and “Down” being black for each day (x-axis) of each month (y-axis).
Hoped for Results
The current preview shows the X & Y axis' correctly, but does not show any "bars" to represent the data.
This is my first chart using SSRS and I am quite lost. Does anyone know where I can get a true tutorial on Range Bar Charts for SSRS 2015 or how I might overcome this “data Display” challenge I am stuck on? I appreciate any direction / guidance offered.
This issue was ultimately resolved by #AlanSchofield through another (and probably more clear) question, found here.
After choosing the correct chart, setting the correct properties, and determining the correct values I was able to get the chart I needed, but the behavior was still off. It would not show the a status more than once.
To fix this, and simply put, I needed to sort my data using Dense_Rank and then add the new "sort" column to my Series Group in the Chart properties. Worked like a charm!
Also got some useful guidelines on this blog post.
I've got a graph of small multiples with line charts. All is spiffy, except I cannot figure out how to get the tooltip to grab the data I need it to.
The sample and the code is at http://bl.ocks.org/emagee/8b2f557396d6f16ba65f. The tooltip code starts at line 198, with the toolTip variable declared just above that. The tooltip itself is working awesomely, but I cannot figure out how to get the tooltip to show the "date" and "count" variables. I did figure out how to get the "subject" in tool tip, but that is redundant, as you will see.
Specifically, my problem stems from not knowing how to skip a level as I dig deeper into the object -- "key" is the first level, then "values", then an unnamed construct, THEN the data I need ("date" and "count").
Any guidance on how to get from "key" to the "date" and "count" data would be most appreciated. I do understand that it may be more of a basic JS problem than a D3.js problem, but I'm a bit shaky with both!
Addendum (and, I'm afraid, a second question) -- I'm also wondering now if part of the problem is that I'm accessing the entire line/path -- as opposed to individual points. Should I perhaps overlay some appropriately sized, invisible circles/points on the lines and have the tooltip try to take readings from those...
First question you have to ask is do you want the date and count of where they moused over or do you want the date and count of the closest point to where they moused over? I'm assuming the later, so that's what I'll answer.
To do this, I'd use a combination of invert and a bisector:
.on("mouseover", function(s) {
var xDate = x.invert(d3.mouse(this)[0]), //<-- give me the date at the x mouse position
bisect = d3.bisector(function(d) { return d.date; }).left, //<-- set up a bisector to search the array for the closest point to the left
idx = bisect(s.values, xDate); //<-- find that point given our mouse position
You can now use:
s.values[idx].date
s.values[idx].count
Here's a working example.
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);