I would like to retrieve only the values which are rendered, I found _minReal and _maxReal but they are the absolute ends of the value range(so even when I zoom in, they remain constant). I need this to be able to refetch data when zooming in.
Related
My d3 timeline chart is showing some junk value (decimal) in the x-axis tick, instead of showing the date and time.
This only happens when there is a single data in the graph.
As shown in the diagram below.
code sandbox - https://codesandbox.io/s/exciting-clarke-yfd1e
I found the root cause of this, It is happening because of the initial call on the chart load. I am doing a zoom transform on the chart load. If I remove this line it works as expected but I can't remove as this is required (Initial zoom transform to apply on default chart load - d3.zoomIdentity).
Code creating the issue is below -
var transform = d3.zoomIdentity.translate(200, 0).scale(0.5);
svg.call(zoom.transform, transform); //This is initial call on chart load
Please suggest to me how to fix this issue in the d3 chart.
Thanks in advance.
This seems to be an issue with the scale, so when there is only one data the default behavior is considering it as a date but after transforming it's considered as a number
and the junk value is coming as last 3 digits of the number i.e, in your case
startTime: "1574504520049" is .049
So if you update the scale to somewhere near that you will be able to get time as
d3.zoomIdentity.translate(100, 50).scale(0.0000000001)
Please check https://github.com/d3/d3-zoom/issues/57
it will help you find a proper scale for the problem.
I have dygrpah live data update which updated data every seconds.
Once i will do the vertical zoom and data will gets refreshed after a second so vertical zoom gets reset again; and chart start updating data as usual.
can any one have idea how to maintain vertical zoom and update the data?
Thanks
Use "valueRange" property.
In "zoomCallback" callback function, you will getting the yRanges. Assign the range to the "valueRange" property. You could something similar to this,
grpah.updateOptions({
valueRange: [zoomMinY, zoomMaxY]
});
I have some bar charts that leverage crossfilter to allow a user to dynamically filter the data set. When a user selects some portion of the data set, then the other bar charts show fewer records, as part of that data is getting filtered out.
I'd also like to have a stacked bar chart that shows the percent of all records that have been selected, vs. the percent of original records. So for example, pre-brush selection, the stacked bar chart would have just one rectangle at 100%. Then, after selecting some of the data, it could show one bar with 60% and another bar with 40%.
Is this possible? How would I go about implementing this type of solution either via d3.js + crossfilter, or dc.js?
Define a dimension dim that you don't filter on, then dim.all().length / crossfilter.size().
If you are using the latest alpha of crossfilter2, you can just use crossfilter.all().length / crossfilter.size() without needing to define an additional dimension.
Is it possible to get the current scale value of the Leaflet component?
The image above shows "300 km" or "100 miles" that i would like to retrieve by a method. The existing documentation does only show how to add the scale control with specific options: http://leafletjs.com/reference.html#control-scale
Be careful with the scale at low zoom levels (when you see a large portion of the world).
The scale that you see is actually valid for the center horizontal line of your map view. It is even slightly wrong for the corner of the map, where it is placed!
If you just want to "duplicate" that visual scale somewhere else, you could simply create another Scale Control and extract its HTML container instead of embedding it to your map:
document.getElementById("myNewContainerId").appendChild(
L.control.scale(options).onAdd(map)
);
If you want to read the actual pixel length and text of the Scale Control, you could retrieve them through the internal _mScale.style.width and _mScale.innerHTML properties of the Scale Control. Replace _mScale by _iScale if you want the imperial values instead of the metric ones.
Otherwise, if you want to be able to measure some distance between 2 points on the map, you should rather use the myLatLng.distanceTo(otherLatLng) method, which would be far more accurate, as it would not only use the correct scale at the myLatLng actual latitude, but also correct for the possible different scale along the path to otherLatLng if it is placed at a different latitude.
Returns the distance (in meters) to the given LatLng calculated using the Haversine formula. See description on wikipedia
I need to draw a graph to display engine status.That is i will be having time like 1-2,2-3,3-4 along axis and by using bar graph i need to display whether engine was on or off at these time.
That is from 1-2 if it is off it will how black and 2-4 if it is on it will show blue color and again if the status is changed it should show black from blue.Right now i have customised jquery high charts for displaying one bar,by removing some parameters.
I need to know how i implment this here or is it possible in this graph?
You can do this with a column range chart, with minimal fudging.
The main issue is making sure you set your data points correctly, and to set grouping:false in the plotOptions. The x value needs to be specified for each data as well, or else they will all be given a separate x value
Example:
http://jsfiddle.net/jlbriggs/o9ck2zLn/
This can easily be adapted to a time axis by supplying the timestamps as the y values.