I'm displaying a graph that dynamically deals with a wide range of values, and the x axis is all dates. When the graph is only displaying days of the months, hours, years, or months, it's fine, but between days of the month and months it stops rendering both axes. I know this because I'm using the slider to change how much data is displayed, and over certain ranges the slider stops showing movement and the axes aren't displayed.
I'm using the regular axes functions and epoch seconds in by data. any advice would be appreciated.
the below is the code i'm using to render the axes.
var xAxis_{{device_strip}} = new Rickshaw.Graph.Axis.Time({
graph:graph_{{device_strip}},
timeFixture: new Rickshaw.Fixtures.Time.Local()
});
xAxis_{{device_strip}}.render();
var yAxis_{{device_strip}} = new Rickshaw.Graph.Axis.Y({
graph:graph_{{device_strip}},
});
yAxis_{{device_strip}}.render();
I figured out that the issue I was having was caused by the version of d3 the project was using. It should have been using version 3 and it was instead it was using version 4.
Related
I have a chart to display values across time, but there aren't data points for each day. The chart is just displaying dates on the X axis where data points exist. I want each date to have a vertical line, and the day displayed below for every day in the range (unless overlapping).
I'm using chart.ja version 4.2.1
Extra Points :-)
I would also know how to keep the dates from overlapping when a large range (lots of dates) is being plotted.
Lastly, is it possible to display the dates on three lines, where the top line is the day, the second line shows the month name (once) in the middle of the month, and the third line shows the year in the middle of the year.
I have an nvd3 line chart that needs to display every date in a month on the x axis. For the current month (July) I have generated 31 x,y pairs. However, the chart omits a couple of those data points. Most data points, actually, have the y coordinate set to null (because not all dates have data, but I still need to display every date).
This is how it looks now:
As you can see, there are some dates missing: 07/08/2018, 07/15/2018, 07/22/2018, 07/30/2018 and 07/31/2018.
This is my code:
chart.xAxis.ticks(weightData.length); // this is 31
chart.xAxis.rotateLabels(-35);
chart.xAxis.showMaxMin(false); // if this is true, even less data is displayed
Is there a way to force the chart do display all the data on the x axis?
I have found the answer here:
NVD3 Line Chart X Axis Ticks Are Missing
The point is to use tickValues() instead of ticks() as the answer on the post in link says.
How can force nvd3 graph to have certain number of ticks to be displayed, for example, please find below the image of the graph plotted:
as seen below I have 7 values pushed to the array holding the 7 days of the week. However looks like they have more number of ticks than the actual values. What I'm looking for is something similar to this:http://nvd3.org/examples/line.html
However when i hover over these ticks they are misaligned as shown:
thats where the graph line should be and thats where the hovered tick shows the tooltip.but for some reason i dont get 7 ticks displayed instead gets 10 ticks displayed and all the hovered tooltips get misaligned.I also tried to force nvd3 to have specific # of ticks but didnt work.
chart2.xAxis
.ticks(7)
.tickFormat(function(d) {
return d3.time.format.utc('%b %d')(new Date(d));
});
here is the fiddle: http://jsfiddle.net/86hr7h1s/4/
I should ideally display 7 days and 7 ticks on the graph as oppose to duplicate days and 10 ticks on the graph.
Any ideas whats wrong and how to correct this?
EDIT::::::
I was able to fix my issue for 7 days with the below answer, using the tickValues() instead of ticks(). However, for large values, say display a graph data of 2 months, i'll have 30 data points. I still see that my graph ticks on hover dont align:
As you can see above the hover points still dont align with the vertical ticks. I dont want to force the ticksValues for more than 7 days on the graph.
Ay ideas how this could be achieved?
FYI:
I used this to make nvd3 display 7 values:
var datas = this.graphFunction(data);
chart2.xAxis.tickValues(datas[0].xAxisTickValues);
http://jsfiddle.net/86hr7h1s/5/
Thanks!
If you want to control the ticks precisely, you should use .tickValues() rather than ticks().
API Doc
I understand that the question was asked a long time ago, but I recently faced the same issue and found a good solution for it.
The reason of the issue with inaccurate ticks on the x-axis is the inaccurate internal numeric representation of dates that we want to display on the x-axis. As we can see here
https://nvd3.org/examples/line.html
when values on the x-axis are numbers, all ticks are displayed accurately. When we want to display dates on the x-axis, we also need to convert dates to some numeric representation. Typically dates are converted to the numeric representation via the Date.prototype.getTime() function and then labels are formatted using a code like this
chart.xAxis.tickFormat(d3.time.format('%b %Y')(date))
But the accuracy which the getTime() function provides to us is redundant in most cases. Assume we want to display only months and years on the x-axis and have a sorted list of dates where different items always have different moths but the item with a particular month may have any day and time. So, there may be a situation, where two adjacent list items have though have different months are very close to each other (for example, "Feb 28" and "Mar 1"). When we convert these list items to numeric representation using the getTime() function, the resulting list of big numbers remembers how far adjacent list items stand apart from each other. As the distance between adjacent chart points is always equal in NVD3 charts, NVD3 tries to fine-tune labels display to provide the info that some numbers are close to each other, but others are not. It leads to inaccurately displayed labels or even to duplicated labels if a chart has few points.
The solution is to omit redundant information about date and time when we convert dates to numbers. I needed to display only months and years on the x-axis and this code works great for me.
function getChartData(data) {
var values = data.map(function(val) {
return {
x: val.x.getUTCFullYear() * 12 + val.x.getUTCMonth(),
y: val.y
}
});
return [{
values: values,
key: 'date'
}];
}
function formatDate(numericValue) {
var year = Math.floor(numericValue / 12);
var month = numericValue % 12;
return shortMonthNames[month] + ' ' + year;
}
nv.addGraph(function() {
var data = [
...
{
x: new Date(2020, 2, 15, 15, 12),
y: 90
},
{
x: new Date(2020, 3, 3, 3, 54),
y: 50
},
...
];
var chart2 = nv.models.lineChart()
.showXAxis(true)
.showYAxis(true);
chart2.xAxis.tickFormat(formatDate);
d3.select('svg#svg')
.datum(getChartData(data))
.call(chart2);
return chart2;
});
Here we don't use the .tickValues() NVD3 function and so don't interfere to the default rendering engine, so the NVD3 lib can automatically add or remove axis labels when the viewport width is changed, and ticks and corresponding vertical lines are displayed exactly on the place where they should be.
Here is the full working example
http://jsfiddle.net/AlexLukin/0ra43td5/48/
Background
I have a zoomable time graph which I build incorporating the following code:
var x = d3.time.scale().range([0, 100]);
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(customformatter);
When the appropriate interval is years, it shows ticks of years. Months shows months, etc.
Problem
This works wonderfully, generating great ticks until I zoom down into weeks, at which point I need to be able to dictate what day of the week ticks show for (Sunday, monday, etc.). I am aware of the multiformat custom generator for tickFormat in which you can specify the format given the appropriate interval. That will not change the ticks, however. Is there a way to set the start of the weeks' rules while maintaining the tick generation that otherwise exists at the year, month, day (etc.) level? Can the default start date be set to some other day of the week for the d3 library?
This is hardly a recommendable answer to my own question, but if anyone is desperate one way is to override the source code in /src/time/week.js:
d3_time.week = d3_time.sunday;
d3_time.weeks = d3_time.sunday.range;
d3_time.weeks.utc = d3_time.sunday.utc.range;
d3_time.weekOfYear = d3_time.sundayOfYear;
Just swap out 'sunday' for another day of the week.
I have been trying a lot in Highchart js and still cant find a way to reduce the number of elements in the series.
If i get more than 15 days data i have to reduce it back and show to user as 15 days data so that user can see the data without crowding of data. Max 90 days will be given in the series which i have to reduce to 15 days.
check my current code here in http://jsfiddle.net/MULZL/
can any one give me a solution for it ?
P.S: I dont want to reduce it to first 15 days or last 15 days. I want to do it just because getting 90days in the chart looks crowded and i dont want zoom functions to apply. I want the solution for ignoring some data (days) to make it 15days if it is more than 15 days
You can programmatically zoom into the required time range using the Axis.setExtremes method. In your case you may want to do it on load
Here is how you would do it, if you want to zoom into the 1st 15 days of the given data, you can easily modify to zoom into last 15 days.
function zoomTo15Points(chart){
var points=chart.series[0].points;
if(points.length<15) return;
var min=points[0].x;
var max=points[14].x;
// If you wish to zoom to 15 days and not 15 points, you can modify max as
// var max=min + 1000*60*60*24*14
chart.xAxis[0].setExtremes(min,max);
chart.showResetZoom();
}
If you do not want to let the user zoom out, you can disable the last line, but you also will have to disable zooming, else the button would appear if user zooms inside the 15 days.
Highchart Zoom on Load # jsFiddle
You can try dataGrouping feature of highStock
var dataGrouping = {
groupPixelWidth: 40,
units: [[
'day',
[1, 2, 3,4,5,6]
]]
};
Highcharts would make sure all your columns are at least the specified width (40), if the number of coulmns is large, such that it's not possible to have that width, it will group data using the units, so it will group data of 1 day into 1 column or 2 days into 1 column and so on.
Not sure if you really want exactly 15 plots, but I think you concern was to avoid crowding of data, this does exactly that, but the number of columns will vary based on the width you specify, the width of the plotArea and allowed units and its multiples. Tweak the values as per your data and width of your chart.
jsFiddle