Is there a way I can get the x-axis to switch from showing hour, to e.g. week days, months .. when zooming out?
Currently my x-axis is configured as such:
xaxis: {
mode: "time",
minTickSize: [1, "second"],
timeformat: "%H:%M:%S",
}
My default the graph looks nice, but when I zoom out enough times, the labels on the xaxis just display "00:00". How can I change the timeformat so that the date is included also? E.g. Tue 27 00:00 or similar.
Here's an example of when the graph is zoomed out a lot (obviously I need to remote some datapoints to make it look smoother..)
You can add a date using the standard specifiers, like %Y-%m-%d. A full list can be found in the API docs under the Time Series Data section.
To get the format to update based on the range, i.e. show HMS when zoomed in but YMD when zoomed out, is trickier. You'll need to listen for the 'plotzoom' event and check the range to see whether the format needs to change. If so, use getOptions() to retrieve and update the plot's options, then call setupGrid & draw to redraw the plot using the new format.
I solved this by making a custom tickFormatter for the X-axis:
In your xaxis options put:
xaxis: {
mode: "time",
tickFormatter: customXAxisFormatter,
...
}
Then your customXAxisFormatter could be eg. :
function customXAxisFormatter(val, axis)
{
var d = new Date(val);
// If time difference is more than 24 hours
if ((axis.max - axis.min) > (24*3600*1000))
return d.strftime("%a<br>%H:%M");
else
return d.strftime("%H:%M");
}
I hope this helps :)
Related
I Need 10 different Colors in Pie chart Using the Library of pykcharts.
Is it possible Because As per the Documentation they Provide only one shade_color.
Go through this link http://pykcharts.com/tour/pie
#Tkingovr chart_color is for all charts but One dimensional. You can use shade_color for One dimensional charts https://github.com/pykih/PykCharts.js/wiki/Colors#shade-color
#KIRANJOSHI
var selector = "pieContainer", // selector of your chart
colors = ["red","blue","green","yellow","orange"];
setTimeout(function() {
d3.selectAll("#" + selector + "_svg path.pie")
.attr("fill",function(d, i) {
return colors[i];
});
},1000);
setTimeout is required since the chart may take time to render and there is no provision in the current version to run a piece of code on chart render complete.
According to the documentation you should be able to pass in values like this:
{
"chart_color": ["blue","green","Yellow"]
}
The chart also accepts any of the following:
Color Names (Eg: "red")
Hex values (Eg: "#B0171F")
RGB values (Eg: "rgb(176,23,31)" )
I am not sure how the tick placement works with d3 svg axis. I tried playing with the ticks, tickSize options but essentially I get the start and end ticks "sometimes" with random data plotted
http://plnkr.co/edit/i5DBgfWzr2sa8Yugg2A8?p=preview
(Please ignore the angularjs aspect. The part that I am interested in is the following in d3)
var make_x_axis = function () {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
.tickFormat("")
.tickPadding(8);
};
var make_y_axis = function () {
return d3.svg.axis()
.scale(y)
.ticks(6)
.orient("left")
.tickSize(10,10)
.tickPadding(8);
};
How do I always get the start and end ticks rendered for both X and Y axis? I clearly always get the start and end tick lines on both X and y axis (Unsure how that is happening - I do not see a .tick element at that location in the chrome inspector) but the labels are missing. I can find the first and last tick and render a text with the tick label info but clearly I cannot always do it because sometime the axis gives me the start ticks and sometime it does not.
Any help is appreciated.
Thank you
I am not sure I fully understand your question, if you want to remove the ending x-axis ticks, you should set
d3js V3
.outerTickSize(0),
d3js V4 - V6
tickSizeOuter(0)
If you want to customize the ending ticks, you may use
.tickValues(y.ticks(5).concat( y.domain() ));
Have a look at my JSFiddle for a demonstration.
On my chart, I have a time scale xAxis. I want user can do zoom in, zoom out operations to switch among month view(display ticks of one month), week view( display ticks of a week, Mon, Tue, Wed ...), day view( display ticks of 24 hours).
When I call the zoom behavior on svg. My chart is stretching and condensing nicely. But the ticks on the xAxis are changing "gradually" which is not what I want. E.g. when I zoom in at a certain scale, the ticks are [May 3, May 5, May 7 ......], the ticks D3 decides randomly seem to be skipping one day. And it will happen when user zoom further into hours as well.
What I want is: Assume that user is initially on the month view(which displays ticks of one month), then user keeps zooming in till to a certain scale, the ticks of xAxis will turn into 7 days( Mon, Tue, Wed ...... ), if user keeps zooming in, at a certain scale, the ticks turn into hours. I don't want d3 to decide ticks randomly.
How can I achieve that?
For each zoom scale you should set axis.ticks() and axis.tickFormat() explicitly.
When zoom event occurs you can call something like this:
adjustTimeAxis: function() {
switch(this.getZoomState()) {
case 'longDays':
this.axis
.ticks(d3.time.days, 1)
.tickFormat(function(d) { return d3.time.format('%a %e')(d); })
.tickSubdivide(false);
break;
case 'shortDays':
this.axis
.ticks(d3.time.days, 1)
.tickFormat(function(d) { return d3.time.format('%e')(d); })
.tickSubdivide(false);
break;
case 'weeks':
this.axis
.ticks(d3.time.mondays, 1)
.tickFormat(null)
.tickSubdivide(6);
break;
default: // months
this.axis
.ticks(d3.time.months, 1)
.tickFormat(null)
.tickSubdivide(1);
}
} // adjustTimeAxis
In this code function this.getZoomState returns one of the string values ['longDays', 'shortDays', 'weeks'] depending on zoom scale.
You can see how this code works here: http://bl.ocks.org/oluckyman/6199145
For example I have plotted a line chart based on the date and number of students registered on a particular day on x and y axis respectively. When i mouse over to a particular point in the line chart i can view the tool tip displaying the x and y axis values. Instead I want to display the names of the students registered on that day when I mouse over to a particular point. Is there any solution for this problem? If there is no work around with Jqplot, please suggest me any other charts.. Please help me out. Thanks in advance.
Here's a little example I put together for you.
It uses the largely undocumented tooltipContentEditor property of the highlighter plugin:
highlighter: {
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor
}
Where your data is predefined like:
var students = [
['Bob','Mark','Dave'],
['Tim','Mike']
];
var data = [students[0].length,students[1].length];
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return students[pointIndex].join(", ");
}
I am using the FLOT charting library to plot calories consumed over time. I would like the y-axis to use autoscaling (to just show values that are +/- the min and max in the dataset).
However, the chart always uses 0 as the minimum for my bar chart rather than autoscaling the y-axis values. Here is my code:
function DrawCalorieChart(calorieData) {
plot = $.plot($("#CalorieHistoryChart"), [calorieData],
{
series: {
bars: { show: true, barWidth: 0.8, align: "center" }
},
legend: {
show: false
},
xaxis: { tickDecimals: 0, tickSize: 1, mode: "categories", tickLength: 0 },
yaxis: { autoscaleMargin: 0.025 },
grid: { labelMargin: 10 }
});
}
I can manually set a minimum value but the problem is that I don't know what the minimum might be after new data is entered. I have tried removing the yaxis spec altogether, setting an autoscaleMargin (as shown) and setting the min to null. But nothing works - the minimum is either a static value or zero! Any help would be greatly appreciated.
Currently there's no way to do this within the library's own API. You'll need to write some JS to iterate over your values and find a min/max manually. This could be done either outside your plot/redraw calls, or in a processRawData hook, which might work better if you're constantly adding values and redrawing.
Addressing this is actually an active project that I expect will be merged into the Github master branch within the next 2-3 weeks. So depending on whether you're able to wait, and willing to use less-stable code, that's another option.
Current answer after the change mentioned in DNS' answer has been implemented:
Set zero: false in the bar options.
From the official documentation:
Area and bar charts normally start from zero, regardless of the data's range. This is because they convey information through size, and starting from a different value would distort their meaning. In cases where the fill is purely for decorative purposes, however, "zero" allows you to override this behavior. It defaults to true for filled lines and bars; setting it to false tells the series to use the same automatic scaling as an un-filled line.