My jqplot graph's highlighter is showing a wrong value if the line is curly.
Here on the image attached you can see that it's showing value 49% above number 50 that is shown on the y-axes, and it should be below.
I don't know why is that happening and how can I fix it. Any suggestions?
Wrong value shown in highlighter
Can you post some source code?
Anyway, in jqplot there is a way to customize the labels tick.
For example you can add a 'formatter' function, to manipulate the tick data and format. Like:
...
options.axes.xaxis.tickOptions.formatter = function(format,value) {
return xAxiformatter(value).toFixed(2);
}
...
function xAxiformatter(value) {
return -4.57 + xSlope * (value - modMinX);
}
...
http://www.jqplot.com/docs/files/plugins/jqplot-canvasAxisTickRenderer-js.html#$.jqplot.CanvasAxisTickRenderer.formatter
You can use this formatter function also to make a "workaround" solution for the problem.
Related
I got a great answer yesterday helping me set up a conditional rule that allows me to display the points on my scatter chart as images or dots based on a variable 'displaytype'
Here's the link to the answer: D3 conditionally append image OR circle element based on variable
I'm porting my solution into Power BI and the dataset will contain a field 'display_type' which will be either 'image' or 'dot'
So I'm trying to update my variable and link it to the data but the if statement doesn't seem to recognise the output from the function.
eg
The Current variable is:
var displaytype = "image" // or "dot"
I'm trying to change that to:
var displaytype = function(d) {
return d.display_type
};
or
var displaytype = function(d) {
return data[0].display_type
};
However, the result has no impact to the display whatsoever so I guess I'm missing something (probably simple) ?
Any help much appreciated as always
I am trying to filter data on my choropleth chart from a bargraph. Strange thing is that it is not showing correct value on selecting a bar from the accompanying bar chart.
Here is the jsfiddle: https://jsfiddle.net/anmolkoul/jk8LammL/
The script code begins from line 4794
If i select WIN004 from the bar chart, it should highlight only five states and the tooltip should reflect the values for the data. Some states are highlighted for whom WIN004 does not exist.
I changed the properties of the choropleth from
.colors(d3.scale.quantize().range(["#F90D00", "#F63F00", "#F36F01", "#F09E01", "#EDCB02", "#DDEA03", "#ADE703", "#7EE404", "#50E104", "#24DE05", "#05DB11"]))
.colorDomain([-1, 1])
To
.colors(d3.scale.linear().range(["green", "white", "red"]))
.colorDomain([-2, 0, 2])
But i get a lot of white states where its hard to discern what has been highlighted. The tool tip for some white-ed-out states show -0.00 :/
Here is the fiddle http://jsfiddle.net/anmolkoul/jk8LammL/1/
So i guess either its a problem with my color range or how my data is getting parsed.
I would ideally like to specify the data ranges in the .colorDomain based on the top and bottom values of the riskIndicator dimension. My functions are not working though. Should i use d3.max or riskIndicator.top here?
EDIT:
I got the color domain dynamic by using the min and max values but still the graph is not performing as expected? Could this be an issue with the geochoropleth chart? I further took a working geochoropleth example and ported my data to it and even that gave me the same issue of representing data incorrectly. I thoughit could be a data problem but i validated using a couple of good BI tools and their map charts displayed data correctly.
Could this be an issue with the dc choropleth?
Thank you.
Anmol
This has the same root cause as the issue in this question:
Crossfilter showing negative numbers on dc.js with no negative numbers in the dataset
In short, floating point numbers don't always cancel out to zero when added and subtracted. This "fake group" will ensure they snap to zero when they get close:
function snap_to_zero(source_group) {
return {
all:function () {
return source_group.all().map(function(d) {
return {key: d.key,
value: (Math.abs(d.value)<1e-6) ? 0 : d.value};
});
}
};
}
Added it to the FAQ!
I have a composite graph of two line charts. For one of them i'm attempting to apply a custom color range based on the value of each point on the line:
.colors(['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)'])
.colorDomain ([0,3])
.colorAccessor (d,i) ->
if d.points[i].data.value.avg > 50
return 0
else
return 3
The problem is I keep getting only one color for the entire graph... Not to mention d returns as an object of all the points instead of a single point... (maybe a hint of the problem?)
Am i doing something wrong here and/or is there an easier way to do this?
You didn't get an answer so I'll try to look into it with you.
First, I created a fiddle at http://jsfiddle.net/djmartin_umich/4ZwaG/.
.colors( ['rgb(215,48,39)', 'rgb(244,109,67)', 'rgb(253,174,97)', 'rgb(254,224,144)' ] )
.colorDomain ([0,3])
.colorAccessor(function(d, i){
if(d[i] && d[i].data.value > 150)
return 3;
else if(d.data.value > 150)
return 2;
else return 1;
});
I had to play around with the color accessor to get it to stop throwing errors. The method was called twice with an array of elements and twice for each element in the array (24 times total).
Once I got it compiling I inspected the chart and saw this:
The chart has a path element that defines the line and a bunch of circles that define the points on the line. The points are part of the tool-tip that display when you hover over the different points on the line.
The path seems to be colored by the value returned when the array of values was passed in and the hover-points on the line are each colored by the value returned for that element.
So the path of the line is given a single color. It sounds like your expectation is for different portions of the line to be colored differently based on their y-value, but this is not how the line is rendered.
The article at http://www.d3noob.org/2013/01/applying-colour-gradient-to-graph-line.html describes how you can use gradients to achieve the effect you desire. I believe the author is "hard-coding" the start and stop points for each gradient, so it won't get you all the way to your answer but it should help you get started.
I hope this helps!
-DJ
I'm trying to make an chart using the default line plus bar chart, but I want to use two or more streams in the bars, is it possible?
Currently, when I try to do this, I got some trouble with the effects of the chart, and so I can't show properly the hover balloon of the bars, he always display the data of just one of the streams. But the main problem is the dates of x axis, displaying 1970's dates, when I remove the second stream of bars, the dates display well:
Anyone already tried to do this kind of chart successfully?
EDIT
Adding Fiddles:
Fiddle with two columns stream and messy dates
Fiddle with just one column stream and ok dates
I'm calling this kind of graph:
linePlusBarChart()
The problem with the dates is that your data contains timestamps (i.e. in seconds), but Javascript expects milliseconds. This is easily fixed by multiplying the values by 1000:
series.values = series.values.map(function (d) {
return {
x: d[0]*1000,
y: d[1]
}
});
The tooltip problem is actually a bug in NVD3 -- it's not meant to be used this way. The problem boils down to the mouseover handler assuming that the first item of the data is representative of what you want. You can fix this for your case by selecting the item by data point number modulo 2 (because there're two bars):
.on('mouseover', function(d,i) {
d3.select(this).classed('hover', true);
dispatch.elementMouseover({
point: d,
series: data[i%2],
pos: [x(getX(d,i)), y(getY(d,i))],
pointIndex: i,
seriesIndex: i%2,
e: d3.event
});
})
This will only work for exactly two bar series though. Updated jsfiddle with the modified NVD3 code here.
Is it possible to use selection.attr() after selection.each()? I have the following simple code:
var line = d3.svg.line()...;
chart
.selectAll('.gw')
.selectAll('path.line')
.each(function(d, i) {
$this.computeXXX(d, ....);
})
.attr('d', line);
I've checked that the 'attr' function is being called, but for some reason when I go back and try to check the 'path' elements that make up the selection, they never have the 'd' attribute set. What's the return from the 'each' call? I checked the d3 API docs and it didn't mention that there was any type of return value, yet there does seem to be.
Any suggestions on how I can fix this?
You can certainly use .attr() after .each(). I've made a very ugly example based on a pre-made chart from tributary. Anyway, you can see it uses .each() to draw an orange stroke and then modifies other attributes after. If you post more details of your code or put in on a fiddle or tributary we/I can probably help you fix it.