I'm trying to draw a simple multi line chart from nested data. I'm facing no javascript errors but there is no chart drawn. Even the x-Axis is missing but I cannot find the reason why.
I have made an example here with only one user, the goal would be to have a multitude of users.
http://blockbuilder.org/con-ssc/56b1f647f43b03e8ad5fc923a551b0ed
A few things:
I can't make any sense out of your parseTime function. You parse it, then format it to a string, then parse it again, why?
Your x-axis doesn't show because your SVG needs to be sized to the full width/height, not width/height minus margins.
Your data is not-sorted by the x-axis variable.
Your y scale domain is not being properly set.
Fixing all these problems results in this here.
Related
So I have a site where I am doing some data modeling using plotly.js. I am plotting a large number of points (in the thousands). on my backend, I calculate regression equations for the points, and generate coordinates for each x value on the graph. When I plot the equation points in a plotly.js trace, I sometimes get extremely weird results such as
Which is supposed to be a polynomial curve where I get the points using the equation
yPoints.push((quad[0] * (m*m)) + (quad[1] * m) + quad[2])
Where quad[0] quad[1] and quad[2] are the coeffecients that I got from determining the regression analysis.
I am not sure why I am getting such weird graph results for certain sets of coordinates. Does anybody have any idea why?
Alternatively does anybody know of any way to plot a function in a plotly.js graph using either plotly or a third party?
let me know if you need any more info.
Thanks for the help!
Thanks for all of the comments NVRM. As it turns out it wasn't an SVG issue. It wasn't even a plotly issue. The issue was with my data. I have a database which I query for the data that I used to generate the trendline (the points on the graph). For some reason occasionally the y value of the points that I am generating was NULL. This was causing some oddities with the regression calculations, and there were some outliers generated when the value was NULL.
There is still a few oddities with the graph, but the main one is resolved by removing the values with NULL from the trendline consideration.
The moral of the story is always check your data kids.
I'm working on a project where we have some Highcharts graphs populated from database; one of them is an scatter graph and we need to surround the points placed on the outside area of the graph.
We need a graph like this but we need the area surrounding the outside points of the scatter; is there a easy way to do this with Highcharts?
We need it to work on IE11 (client's specs).
We can do it with a new polygon serie to make by getting it from codebehind or from database, but that may take too much development time and will slow down the queries. So we need to know if there is an easier way to do it via Highcharts or Javascript
Thanks in advance.
I am not very familiar with Highcharts, but i could not find such functionality in their API. However there is an easy algorithm to solve your problem.
All you need is to have an array containing the border elements and connect the points from this list like here.
Finding those points is not too hard. Compute the linear equation between two extreme points (like the one on the very top and very right). The resulting formula looks like f(x) = m*x + b
Now you check for all points within that x-range if their y-coordinate is higher than this line (or lower when doing it with the point on the very bottom). If so just add them to your border array and continue with the other extreme points.
Is there a way to create a horizontal bar chart (or modify the row chat)?
The row chart does almost what I want, however I want the y axis to be a continuous variable and it seems the row chart defines the y axis in terms of discrete/ordinal variables.
I was also thinking about rotating the svg with d3. (Rotating the whole div worked, however the brush effect did not rotate too).
I was thinking:
dc.renderAll();
d3.select("body").select("#barChart3").select("svg").attr("transform", function(d) { return "rotate(90)"});
however that erased the whole chart rather than rotating it.
Any suggestions?
Update:
I am having some success with rotating the svg (the brush works), however the graph is being cut off and I can't figure out why...
The two charts are completely different codebases and have different features. The Y axis of a row chart does not even use a scale, so you are quite right that it can't be made continuous in its present form.
It is an eventual goal to merge them, but for now I think rotating is your best bet.
As for the clipping problem you're having, look for the clip-path attribute on the generated SVG. It would need to be rotated as well, but for a quick fix you can probably remove it.
I am using d3.js along with dc.js and Crossfilter. As seen on the below image, the chart should end on 12/31/2016 as there is no data after that but keeps on going. Probably stuck at the last value. This is only happening in line chart. When I use a bar chart it does not happen.
Is this a known bug? Not sure what else I can do? I copied the configuration exactly from the dc.js example page (composite chart) and applied my dataset.
Found the problem. My dimensions were based on dates and some records had a typo in them. Instead of 2013, it had 2103 which caused the problem.
I have a temperature line graph, and I want to draw a red vertical line when the two temperatures (surface temp and dew point) cross. So far what I do is I draw a vertical rectangle on top of my graph at places I calculated it crosses.
It works correctly, but there are a few downsides to this :
The line kind of stands out of the graph ... we can tell I added it later and not in the graph itself;
The pixels are hardcoded, if I change the graph width it might not be good (I could probably fix this, but still)
I would like a little tooltip when I highlight a line, but since it's a simple rectangle, it just sits there and is not dynamic at all.
What would be my best option to integrate this line better un my graphs?
Thanks!
plotLines are your best way to draw the line - http://api.highcharts.com/highcharts#xAxis.plotLines
Two things:
1) The difficult part will be calculating where the lines cross. if they do not cross at a data point, which they most likely won't, there will need to be some guesswork involved, as there is no value you can retrieve from the chart to tell you the axis value where they cross.
2) if you are using separate y axes for these two series, which I assume you must be since they are completely different units and scales, then the point where the lines cross will be COMPLETELY arbitrary and meaningless, as where they cross will be strictly a matter of how the scaling for each axis is set up, and the values have no actual correlation to each other.