I'm struggling to create labels for the end of my multiline chart in d3. I'm new to this, so I must be missing something. When I add the two chunks of code in to create labels for two of the lines it stops the chart showing up on my browser.
http://bl.ocks.org/resolutionfoundation/eaf769a515614ef700a5
For ref this is what it looks like without final two code chunks
http://bl.ocks.org/resolutionfoundation/f11023133e7ff4be8adc
Grateful for any help!
Just for everyone else to know :
Here is the link to the correct problem :
http://bl.ocks.org/resolutionfoundation/5edbbfb9d5e4f8fd8931
The problem here was the y value for the labels were set like so :
data[0]
where he should have done something like this :
data[data.length-1]
which puts the labels at the correct height at the end of the line :)
Related
I want to create a LINE chart using angular-nvd3, with each data point has label on top and displaying the data value. I was able to find the option "showValues" and it can work for the discreteBarChart, but that options doesn't seem to work for line chart.
Any help? below is a picture of what I wanted. Update: i know that for a matter of fact the "showValues" is not in the LineChart. But is there any workaround.?
Using dimple, how can I make the right-most data point in a line chart be connected to the previous data point by a dotted line, while the rest of the line chart still uses a solid line?
(Think a chart with a future projection at the end, or any situation where the final data point is "different" than the rest.)
I don't know dimple.js. The approach used in an Excel chart would be to plot a second data series and let the "connecting" data points overlap.
A similar approach should be possible with any tool that produces line charts.
I would suggest splitting your data to "real" data and "expectations"/"forecast" data, and create a series for each one.
The real data would contain all data points except for the right most one.
Forecast-data will contain only the two right most points.
For the real data draw the chart as usual and for the forecast data create a line chart with custom classes as shown here: Custom Classes
The line class should look like:
.dotted-line {
stroke-dasharray:"10,10";
}
and before drawing insert the custom class as the class for axisLine:
myChart.customClassList = {
axisLine: 'dotted-line'
}
More on customClasses can be found here
More on dotted lines can found here
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've never used jsplumb before and I have read some of the documentation and looked at the demos, but I still don't understand..
I want to create a DIV like this :
One Input and upto 8 outputs (this value may change)
How do I do this ?
I will be looking at cloning this div and incrementing the divs ID, so I could end up with two or more divs that need to be able to join like this.
Can anyone help with this or point me to some simple examples..
Thanks
You need to add the bigger div as a target endpoint and the smaller div's as source end point.
var e1 = jsPlumb.addEndpoint(idSource, sourceEndpoint);
var e2 = jsPlumb.addEndpoint(idTarget, targetEndpoint);
where sourceEndpoint and targetEndpoints are objects with definitions for how the endpoint will look and behave .
Have a look at one of the examples to get the behaviour you desire.
jsPlumb should then allow you to drag and drop connections from source to targets.
The state machine demo does almost the same thing as what you need.
http://www.jsplumb.org/demo/flowchart/dom.html
I have struggle in a while with my chart but don't understand why is not working.
I want tree map where parents are the block and within these block I want to show dots with the text of birthdate.
The birthdate I want to connect with the second x Axis at the bottom.
I cant see what I'm doing wrong, been looking for hours now.
My files with htm and json are shared on the following link
https://www.dropbox.com/sh/t0x7gdyejb1hj9g/oUZcYmN5EQ
Thanks