I would like edita a row without redraw... I use https://legacy.datatables.net/ref#fnUpdate and the function work like this;
oTable.fnUpdate( 1, 2, 3, 4, 5);
{object|array|string}: Data to update the cell/row with
{node|int}: TR element you want to update or the aoData index
{int}: The column to update (set to undefined to update the whole row)
{bool} [default=true]: Redraw the table or not
{bool} [default=true]: Perform pre-draw actions or not
Example:
oTable.fnUpdate( 'Example update', 0, 0); // Update Single cell (0,0) and redraw
oTable.fnUpdate( 'Example update', 0, 0, false); // Update Single cell (0,0) and NOT redraw
oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Update Row 1 and redraw
And if i want to update without redraw ???
oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1, ???, false ); // Update Row 1 and NOT redraw
Thanks
I find it...
oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1, undefined, false );
var rowIndex = $('#example').dataTable().fnGetPosition( element.closest("tr").get(0));
$('#example').dataTable().fnUpdate( 'Approved', rowIndex , 7,false);
$('#example').dataTable().fnUpdate( 'Approved', 2, 5,false);//for 3rd row 6 column
$('#example').dataTable().fnUpdate( 'rejected', 2, 6,false);//for 3rd row 7 column
or
$('#example').dataTable().fnUpdate( ['Approved',rejected'',...], 2, [0,1,...],false);//for 3rd row all columns
Updating the cell content without redrawing the table and without effecting the column width
$('#...').dataTable().fnUpdate(
'cell data',
<row #>,
<column #>,
false, // redraw as false
false // making predraw actions also false
);
worked for me
Related
Is it possible in Recharts to show a Horizontal line at the Y location where the user has their mouse over and retrieve that Y value so we can display it on the Tooltip?
https://meridian.a2z.com/components/tooltip/?platform=react-web
I've been trying to do some research into how we could get the Y value on the graph where the mouse is hovering or clicked, but I'm having trouble seeing where we could even pull that out.
Any tips on attributes or components we could use to grab this data? Is it even something we have access to from the library?
To clarify, we're trying to get the value of the Y axis at where the user has their cursor over the graph.
So if the graph looks like this and the user has their mouse at the pink dot location, I would be trying to grab out the value of ~7000 - what the y value would be at that graph location
Edit:
Note about responsiveness:
If you want to make this responsive, just adjust the chartBounds based on the padding/margin you've applied to the chart component and you should be good to go.
If you're trying something more advanced and need the height and width to pass to the chart component for more calculations, the following article should help: https://www.pluralsight.com/tech-blog/getting-size-and-position-of-an-element-in-react/
NOTE: This is a bit of a hack and may not be a perfect solution but it should be enough to get you on the right track
You should be able to use the chartX and chartY fields from onMouseMove. Unfortunately, this is just the pixel value under the cursor but you should be able to translate it into the range you are using for your graph.
Here is an example put together using the SimpleLineChart example recharts has up. This should work if you just want to get the Y value under the user's cursor and can be extended to get the X value as well.
const {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} = Recharts;
const data = [
{name: 'Page A', uv: 4000, pv: 2400, amt: 2400},
{name: 'Page B', uv: 3000, pv: 1398, amt: 2210},
{name: 'Page C', uv: 2000, pv: 9800, amt: 2290},
{name: 'Page D', uv: 2780, pv: 3908, amt: 2000},
{name: 'Page E', uv: 1890, pv: 4800, amt: 2181},
{name: 'Page F', uv: 2390, pv: 3800, amt: 2500},
{name: 'Page G', uv: 3490, pv: 4300, amt: 2100},
];
//The pixel bounds for the LineChart, 0,0 is the top left corner
// these were found using the inspector built into the web browser
// these are in pixels but correspond to the values used in your graph
// so 246 is 0 Y on the graph and 5 is 10000 Y on the graph (according to your data)
const chartBoundsY = {min: 246, max: 5}
// The bounds we are using for the chart
const chartMinMaxY = {min: 0, max: 10000}
// Convert the pixel value from the cursor to the scale used in the chart
const remapRange = value => {
let fromAbs = value - chartBoundsY.min
let fromMaxAbs = chartBoundsY.max - chartBoundsY.min
let normal = fromAbs / fromMaxAbs
let toMaxAbs = chartMinMaxY.max - chartMinMaxY.min
let toAbs = toMaxAbs * normal
return Math.ceil(toAbs + chartMinMaxY.min)
}
const SimpleLineChart = React.createClass({
render () {
return (
<LineChart
width={600} height={300} data={data}
margin={{top: 5, right: 30, left: 20, bottom: 5}}
onMouseMove={props => {
// We get the values passed into the onMouseMove event
if(props.isTooltipActive) {
// If the tooltip is active then we display the Y value
// under the mouse using our custom mapping
console.log(remapRange(props.chartY))
}
}}
>
<XAxis dataKey="name"/>
<YAxis/>
<CartesianGrid strokeDasharray="3 3"/>
<Tooltip/>
<Legend />
<Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{r: 8}}/>
<Line type="monotone" dataKey="uv" stroke="#82ca9d" />
</LineChart>
)
}
})
ReactDOM.render(
<SimpleLineChart />,
document.getElementById('container')
)
You can open this example in jsfiddle and paste in the code above in the JS editor to try it out for yourself. http://recharts.org/en-US/examples
Here is the documentation for the mouse event for the LineChart: http://recharts.org/en-US/api/LineChart
This can be done with the axis scale option together with d3's invert method.
The following code excerpt should give you an idea.
const domainY = d3.extent(data, d => d[keyY])
const scaleY = d3.scaleLinear().domain(domainY).range([0, 1])
<AreaChart
onMouseDown={(e) => console.log(scaleY.invert(e.chartY))}
...
<YAxis
domain={['auto', 'auto']}
dataKey={keyY}
type="number"
scale={scaleY}
...
I am using a crossfilter2 with dcv3
My data is in a csv which i loaded into memory
Original Data
Day, ID
1, 2
1, 2
1, 2
2, 5
3, 6
4, 6
Processed data
Day, ID, target
1, 2, True
1, 2, True
1, 2, True
2, 5, False
3, 6, False
4, 6, False
Currently what i am trying to do is create a crossfilter stackedbar chart with 2 bars. If ID == 2, i consider it as one group, and ID !=2 as another group. However, i cannot do it dynamically it in DC/crossfilter which results me having to preprocess the data to add a new column and work off the column as shown by my solution below.
Is there a better way?
var dimID = ndx.dimension(function(d) { return d.day; });
var id_stacked = dimID.group().reduce(
function reduceAdd(p, v) {
p[v.target] = (p[v.target] || 0) + 1;
return p;
},
function reduceRemove(p, v) {
p[v.target] = (p[v.target] || 0) - 1;
return p;
},
function reduceInitial() {
return {};
});
//Doing the stacked bar chart here
stackedBarChart.width(1500)
.height(150)
.margins({top: 10, right: 10, bottom: 50, left: 40})
.dimension(dimID)
.group(id_stacked, 'Others', sel_stack("True"))
.stack(id_stacked, 'Eeid of interest', sel_stack("False"))
This is my sel_stack function
function sel_stack(i) {
return function(d) {
return d.value[i] ? d.value[i] : 0;
};
}
I am plotting a bar chart with x-axis being the day and the Y-axis being the frequency of ID == 2 or ID!=2 in a stacked bar chart
So you want to group by day and then stack by whether ID===2. Although dc.js will accept many different formats, often the trick is getting the data into the right shape.
You're on the right track, but you don't need the extra column in order to create stacks for "is 2" and "not 2". You can calculate it directly:
var dayDimension = ndx.dimension(function(d) { return d.Day; }),
idStackGroup = dayDimension.group().reduce(
function add(p, v) {
++p[v.ID===2 ? 'is2' : 'not2'];
return p;
},
function remove(p, v) {
--p[v.ID===2 ? 'is2' : 'not2'];
return p;
},
function init() {
return {is2: 0, not2: 0};
});
These are standard add/remove functions for reducing multiple values for each bin. You'll find other variations where the name of the field is driven by the data. But here we know what fields will exist, so we can initialize them to zero in init and not worry about encountering new fields.
The add function is called when a row is added to the crossfilter or a filter changes so that a row is included; the remove function is called whenever a row is filtered out or removed from crossfilter. Since we're not worried about undefined (1) we can simply increment (++) and decrement (--) the values.
Finally we need accessors to pull these values out of the object. I think it's simpler to put the stack accessors inline - sel_stack was written for adding a dynamic number of stacks. (YMMV)
.group(idStackGroup, 'Others', d => d.value.not2)
.stack(idStackGroup, 'Eeid of interest', d => d.value.is2);
https://jsfiddle.net/gordonwoodhull/fu4w96Lh/23/
(1) If you do any arithmetic on undefined it casts to NaN and NaN ruins all further calculations.
I am trying to visualize this data in a stacked bar chart with D3 v4:
var data = [
{'id': '10', 'status': 'on', 'variant': 'A', 'value': '200'},
{'id': '10', 'status': 'on', 'variant': 'B', 'value': '500'},
{'id': '11', 'status': 'off', 'variant': 'A', 'value': '100'},
{'id': '12', 'status': 'on', 'variant': 'A', 'value': '600'},
...
]
All elements with the same key id should stack on the x axis, where value defines the height and status defines the color.
A data set may contain multiple elements with the same id but different status or variant, like id=10 in the example.
Which format would be suitable to stack this data? My approach was nesting it:
var nested = d3.nest()
.key(function(d) { return d.id; })
.entries(data);
From here I am not sure how to generate the y0 and y1 values.
Can I use d3.stack?
You could loop through the values array in each top-level object and keep a running total of value, which becomes y0 for each <rect>. y1 then is y0 + value.
Then bind each top-level object to a <g> tag representing the entire stack, translate that to the appropriate x position (assuming bars are vertical), and append <rect>s to each <g> with the values prop as data. Set the height and y position of the rect according to where in the stack it belongs. That might look like:
var groups = d3.selectAll("g")
.data(nested)
.enter().append("g");
groups.attr("transform","translate...");
var rects = groups.selectAll("rect")
.data(function(d) { return d.values })
.enter().append("rect");
rects
.attr("width",...)
.attr("height",...)
.attr("y",...)
While working in Xcode Version 8.0 beta 5 (8S193k), I am trying to use the the following line to adjust the picker with four 'spinners'. (The indexes are correct as I have two other single pickers on the same page.)
let pickCD = app.pickerWheels.element(boundBy: 2)
let pickCB = app.pickerWheels.element(boundBy: 3)
let pickSD = app.pickerWheels.element(boundBy: 4)
let pickSB = app.pickerWheels.element(boundBy: 5)
pickCD.adjust(toPickerWheelValue: "None")
pickCB.adjust(toPickerWheelValue: "1")
pickSD.adjust(toPickerWheelValue: "1")
pickSB.adjust(toPickerWheelValue: "None")
The issue is that the pickers are only moving one position (in the direction of the desired value. For example, if the first spinner has values 'None', '1', '2', '3', '4', '5' and the current position is '3'. When I run the test the spinner will only move to the value '2' and not to 'None'.
The other two spinners are working correctly and will move through over 200 elements to select the correct label using the same commands.
Thoughts?
I have a line graph that has markers disabled by default
markers: {visible: false,size: 10}
On receiving the data, I want to be able to show the marker only for a few points
How can I do that?
The markers.visible can take either a boolean or a function. Simply define a function for the visible property, and check the dataItem in that function call, and return either true or false.
series: [{
type: "line",
markers: {
visible: isVisible
},
data: [1, 2, 3, 4, 5, 6, 7, 8]
}]
With the isVisible function defined like...
function isVisible(e) {
return e.dataItem % 2 === 0;
}
Here is a sample displaying a simple line, but only the even values get markers.
http://jsbin.com/danoh/1/edit
Documentation... http://docs.telerik.com/kendo-ui/api/dataviz/chart#configuration-series.markers.visible