Develop Reference

React.js continuous scroll

I have a component (for a visual view):
The current way I render this is like so:
const today = new Date()
const minimumDate = new Date(new Date().setDate(today.getDate() - 14))
const maximumDate = new Date(new Date().setDate(today.getDate() + 14))
const currentDate = minimumDate;
const dateRange = [];
while(currentDate <= maximumDate){
const newDate = new Date(currentDate); newDate.setHours(0,0,0,0)
dateRange.push(newDate)
currentDate.setDate(currentDate.getDate() + 1)
}
const [itemDays, setItemDays] = useState(dateRange)
itemDays.map((date, i) => <CalendarDay key ={i} workout={{}} date={date}/>)
What i want is to render a set amount of days on the calendar, having the entire calendar would cause massive performace hits. The above code does this for +-14 days and the current day. What I need is to convert the scoll bar length into some for of index which corresponds to the dates in itemDays so that when it gets below or above a certain index I can then load the next or previous day continuously.
The trouble is, every method ive tried falls flat. Ive tried these methods which are not accurat enough:
Getting the centre element and try to determine where we are in the array
Using the scroll position and the itemDays length to generate an index (The math never checks out, could be to do with the way scrollLeft works)
Each method was either too far from being a feasible solution or would require working with a bunch of edge cases. I would also like to try to snap the scroll to the centre element which I cant do without getting some form on index like the above mentioned.

dc.js line chart starting from zero after each point

I have a line chart as shown in the fiddle http://jsfiddle.net/djmartin_umich/qBr7y/
The graph works fine and plots as expected. But I need one change to be made so that the plots become triangular shaped and I could see a series of irregular triangles. I mean after every point in Y, it should drop to 0 and start afresh. I know we could achieve this by explicitly adding data points to point to 0. But, just wondering if we could do that without creating additional data points.
HTML:
<div id="line-chart"></div>
<div id="log">Incoming Data:</div>
JS:
var startDate = new Date("2011-11-14T16:17:54Z");
var currDate = moment(startDate);
var cf = crossfilter([{date: startDate, quantity: 1}]);
AddData();
var timeDimension = cf.dimension(function(d){ return d.date; });
var totalGroup = timeDimension.group().reduceSum(function(d){ return d.quantity; });
var lineChart = dc.lineChart("#line-chart")
.brushOn(false)
.width(800)
.height(200)
.elasticY(true)
.x(d3.time.scale().domain([startDate, currDate]))
.dimension(timeDimension)
.group(totalGroup);
dc.renderAll();
window.setInterval(function(){
AddData();
lineChart.x(d3.time.scale().domain([startDate, currDate]));
dc.renderAll();
}, 800);
function AddData(){
var q = Math.floor(Math.random() * 6) + 1;
currDate = currDate.add('day', 5);
cf.add( [{date: currDate.clone().toDate(), quantity: q}]);
$("#log").append(q + ", ");
}
CSS:
#log{
clear:both;
}
Thanks,
Vicky

You can use a "fake group" to achieve this effect.
This is a general-purpose technique for preprocessing data that allows you to change what the chart sees without modifying the data in the crossfilter. In this case, we want to add a data point immediately after each point returned by the crossfilter group.
The fake group wraps the crossfilter group in an object that works like a group. Since in most cases dc.js only needs to call group.all(), this is pretty easy:
function drop_to_zero_group(key_incrementor, group) {
return {
all: function() {
var _all = group.all(), result = [];
_all.forEach(function(kv) {
result.push(kv);
result.push({key: key_incrementor(kv.key), value: 0});
})
return result;
}
}
}
The fake group here produces two data points for each one it reads. The first is just a duplicate (or reference) of the original, and the second has its key incremented by a user-specified function.
It might make sense to parameterize this function by the zero value as well, but I mostly wanted to pull out the date incrementor, since that involves another trick. Here is a date incrementor:
function increment_date(date) {
return new Date(date.getTime()+1);
}
This uses date.getTime() to get the integer value (in milliseconds since the beginning of 1970), adds one, and converts back to a date.
Actually, the first time I tried this, I forgot to include +1, and it still worked! But I don't recommend that, since dc.js is likely to get confused if there is more than one point with the same x value.
Apply the fake group by wrapping the group before passing it to the chart
lineChart
.group(drop_to_zero_group(increment_date, totalGroup));
Here's a fork of DJ's fiddle: http://jsfiddle.net/gordonwoodhull/dwfgma8j/4/
FWIW I also changed dc.renderAll() to dc.redrawAll() in order to enable animated transitions instead of blinking white and rendering from scratch each time. The transitions are not perfect but I think it's still better than the blink. I have a fix but it's a breaking change so it will go into dc.js 2.1.

canvas js: how to remove a datapoint dynamically but without creating a "hole" in chart?

After hours and hours playing with canvasJS I couldn't find a way to dynamically remove points from my chart in an elegant way.
What I want to do is to allow users to select/deselect data he want to see plotted. For instance, on a chart that shows data from Jan/2014 to Dec/2014 (axis X), if the user choose not to show Feb/2014, I iterate thru dataPoints, remove such point and call render(). The column with data corresponding to February then disappear, but on X axis, the label for February is still shown, creating a "hole".
If First or Last item is deselected, then the result is OK, such month is not displayed.
I have tried using Date() for x, tried using Integers for x and formatting the Date as a label but none worked for me.
So, before starting looking for another solution I would like to know if you guys could help me out figuring what I`m doing wrong.
Best regards!!

I have gone through the question and created an example. Here is the JSFiddle
Here is the logic which I used:
for(var i=0; i<dataPoints.length ; i++){
var dp = dataPoints[i];
var dataPointMonth = (new Date(dp.label).getMonth());
if( dataPointMonth !== monthToHide){
dp.x = index++;
newDataPoints.push(dp);
}
}
You can use labels instead of x value in this case and use formatDate method in order to format date values as required and use labelFormatter for further customization.
labelFormatter : function ( e ) {
return CanvasJS.formatDate( e.label, "MMM");
}

Javascript Graph plugin to show values , Date Wise , Week wise and Month wise

I have following values in JavaScript
Variables
var start= '29-10-2015';
var end= '29-12-2015';
var Targetvalue = parseFloat("1000000");
var dealjson = '[{"dealdate":"25-11-2015","cost":200000}]';
I want to show the performance in a graph according to week wise , day wise and month wise ,
For example between start and end there are 9 week so In the graph it should show in which week the deal was done and should compare to the target for the week which will be
weeklyTarget = Targetvalue \totalnumberofweek
dailyTarget = Targetvalue \totalnumberofdays
monthlyTargte = Targetvalue \totalnumberofmonths
Can any one suggest any plugin which I can use it
Thanks in advance

According to my Knowledge and experience you should use the chartjs library. Because its fulfill your requirements easily a its documentation was really very easy and understandable properly. Its also very Simple to use and provide multiple types of graphs and visualization also.

Shopify Dashing: CoffeeScript not showing X axis as months

Similar to: Not able to display Month names on Rickshaw Graph on Coffeescript
Although, this question is similar to the above, I have already tried the given answer on that question and I still am unable to change the numerical values along the 'X' axis into month names
Code that is relevant from RickshawGraph.coffee:
xAxisOptions = new Rickshaw.Fixtures.Time()
time = xAxisOptions.unit('month')
x_axis = new Rickshaw.Graph.Axis.Time(graph: graph, timeUnit: time, timeFixture: xAxisOptions)
y_axis = new Rickshaw.Graph.Axis.Y(graph: graph, tickFormat: Rickshaw.Fixtures.Number.format)
I'd like to be able to show month names instead of numbers... Can anyone suggest a solution?

Okay, here's how I got at least the dates to show, although another issue has cropped up because of it:
New Code
format = (d) ->
enddate = new Date()
startdate = new Date()
startdate.setMonth(startdate.getMonth() - 12)
d = d3.time.months(startdate,enddate)
x_axis = new Rickshaw.Graph.Axis.X(graph: graph, pixelsPerTick: 1000, tickFormat: format)
Here's the link to the other issue (Which is related to this, but different):
https://stackoverflow.com/questions/26141212/coffeescript-dashing-rickshaw-graph-range-of-dates-parse