I am getting this kind of result:
Which is weird because why on earth am I getting this values on my y axis 1 1 2 2 2. My expected Y Axis points are just 1 and 2 since the result that I have is
[[["2013-01-30", "2"], ["2013-01-31", "2"], ["2013-02-01", "1"]]]
What i'm trying to do here is to reverse the Y axis as being 1 as the highest or on the top, just like on the screenshot.
Here is my code:
I am getting this one on my json result via ajax. This is the result:
[{"execution_datetime":"2013-01-30","sales_rank":"2"},{"execution_datetime":"2013-01-31","sales_rank":"2"},{"execution_datetime":"2013-02-01","sales_rank":"1"}] , that is the result of the data on the jQuery.each
var response =[[]];
var maxSR = 1;
jQuery.each(data, function(index, value) {
if( this.sales_rank > maxSR ) {
maxSR = this.sales_rank; //I am getting the largest number in the response array so that I can assign it on the Y-AXIS MIN
}
response[0].push([this.execution_datetime, this.sales_rank]);
});
//response has already a value of:
//[[["2013-01-30", "2"], ["2013-01-31", "2"], ["2013-02-01", "1"]]]
var tmpMin = response[0][0];
var xMin = tmpMin[0];
var plot2 = $.jqplot('myChart',response,{
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d'},
tickInterval:"1 days",
min: xMin,
},
yaxis:{
tickOptions:{ formatString:'%d' },
max:1,
min:parseInt(maxSR),
},
},
highlighter:{
show:true,
sizeAdjust: 7.5,
},
cursor: {
show:false,
},
});
I also tried removing the tickOptions:{ formatString:'%d' }, on the y-axis, it seems to be working, the problem is that, I am getting some floats on my Y-Axis which I don't like. How would I solve that one?
Another question incase this will be solved, is it possible to set a kind of offset to the x axis so that the points won't lie on the border?
Your help will be greatly appreciated! Thank you! :)
With this you can reverse the Y axis values:
tickOptions:{ formatString:'%i'}
To eliminate values on your y axis 1 1 2 2 2 you should use:
numberTicks: value
is it possible to set a kind of offset to the x axis so that the points won't lie on the border?
You could use this:
xaxis:{
//
min: xMin <-- subtract 1 to this value.
//
yaxis:{
min: parseInt(maxSR) <-- subtract 1 to this value.
I think the max is 1 and min is 2 in the below code. You want to set max to 2 and min to 1
yaxis:{
tickOptions:{ formatString:'%d' },
max:1,
min:parseInt(maxSR),
},
Example
yaxis:{
tickOptions:{ formatString:'%d' },
max:2,
min:1,
},
Related
I would like the graph to adjust itself according to 5 y axes for a chartsjs linear graph. As of now chartsjs adjusts the number of y axes after the data. I would like it to always be 5 and have the data adjust itself accordingly.
If we want to limit the minimum and maximum value for the y-axis then we can add the scales property to the options and set the yAxes property.
In the following example we are setting the minimum value for the y-axis to -10 and maximum value to 80 and we are also defining the stepSize of 10.
var options = {
scales: {
yAxes: [{
ticks: {
max: 80,
min: -10,
stepSize: 10
}
}]
},
};
I have a ton of data associated with time. I want to plot a, hopefully, simple line graph. A simplified example:
var data = [{ time: 13:30, size: 100 }, { time: 13:37, size: 500}, { time: 13: 42, size: 300 }
{ time: 13:51, size: 150 }, { time: 13:56, size: 175 }, { time: 15:59, size: 75 }
{ time: 16:11, size: 75 }, { time: 16:37, size: 125 }, { time: 15:27, size: 200 } [...]
{ time: 20:36, size: 500 }]
Many time values, and corresponding size values. Of course, I do not want to plot every single time value on this graph. Instead I want to take the lowest value, 13:30, then plot the time on the axes at 30 minute intervals (i.e. 13:30, 14:00, 14:30 ... 20:30) until I hit the latest time in my array of data. At the same time, I want to plot every size value. So, the graph will only display a tick for 13:30 and 14:00, but the values that correspond with 13.37, 13.42, 13.51, 13.56 will be plotted on the line.
How would I go about doing this?
My first attempt was something like this:
var graph = d3.select('.graph'),
WIDTH = 790,
HEIGHT = 250,
MARGINS = {
top: 20,
right: 20,
bottom: 20,
left: 50
}
xScale = d3.scale.linear().range([MARGINS.left, WIDTH - MARGINS.right]),
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([smallest, largest]),
xAxis = d3.svg.axis().scale(xScale),
yAxis = d3.svg.axis().scale(yScale).orient("left");
NB the "smallest" and "largest" variables are the smallest and largest size values in my data array, calculated elsewhere. Obviously this is wrong because this would plot every single time value on the axes (as explained above, I do not want this) and even if I did it errors and glitches horribly.
How would I go about achieving what I want to achieve?
Thx
-- Gaweyne
Solved it. d3.time.scale not d3.scale.linear()
xScale = d3.time.scale(range([MARGINS.left, WIDTH - MARGINS.right]).domain(new Date([//Earliest Date//]), new Date([//Latest Date//]))
Note: Although this is a self-answered question, I am always curious about better approaches.
sin(x) and cos(x) for x in degrees.
Goal: I would like to adjust this initial plot and add a 2nd X axis to show both degrees and radians.
How do I set up jqPlot PlotOptions to add x and y labels, change scales, and add a second X axis?
I am using a JavaScript library that I wrote called html5csv [License: GPL] that support various data analysis operations and interfaces to jqPlot for plotting. It allows the specification of the jqPlot plotOptions object for each plot.
The (currently blank) plotOptions are on the first line of code. You may assume the plotOptions are correctly delivered to jqPlot by the subsequent code invoking CSV().jqplot() from the html5csv library.
html5csv + jqplot dual line graph without special axes
plotOptions = {};
CSV.begin('%F', {dim:[36,4],header:['deg','rad','sin','cos'],
func: function(i,j){
var deg = 10*(i);
var rad = deg*2*Math.PI/360.0;
if (j===0) return deg;
if (j===1) return rad;
if (j===2) return Math.sin(rad);
if (j===3) return Math.cos(rad);
}
}).
jqplot([['chart1',[['deg','sin'],['deg','cos']], plotOptions]]).
table('tab1',{header:1}).
go();
jsfiddle of single axes sine, cosine wave plot
This jqPlot documentation shows up to 2 X axes and 9 Y axes but when calling new Axis() I get Uncaught ReferenceError: Axis is not defined in the console. To fix this I tried adding more of the jqplot .js files to the script headers but it did not help.
jqplot Axis formatting options documentation shows all the options to configure axis labels, ticks, etc. for a particular axis if I could create one.
How do I proceed from here?
Don't call new Axis(); This is done for you internally in jqPlot.
Basically, if you declare the right keys in plotOptions, the Axis will be set up for you. But if the keys are missing or misnamed, it will obviously fail.
Here are the finished examples:
Part 1: Customized set of single axes
Output
jqplot PlotOptions Input
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
Note: You don't need to call new Axis, but you do need to name the object fields as shown.
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
CSV.begin('%F', {
dim: [36, 4],
header: ['deg', 'rad', 'sin', 'cos'],
func: function(i, j) {
var deg = 10 * (i);
var rad = deg * 2 * Math.PI / 360.0;
if (j === 0) return deg;
if (j === 1) return rad;
if (j === 2) return Math.sin(rad);
if (j === 3) return Math.cos(rad);
}
}).
jqplot([
['chart1', [
['deg', 'sin'],
['deg', 'cos']
], plotOptions]
]).
table('tab1', {
header: 1
}).
go();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
Part 2: Dual X axes, with degrees and radians scales
Output
jqPlot PlotOptions Input
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
x2axis: {
show: true,
label: 'rad',
min: 0,
max: 2 * Math.PI,
numberTicks: 9
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
plotOptions = {
axes: {
xaxis: {
show: true,
label: 'deg',
min: 0,
max: 360,
tickInterval: 45
},
x2axis: {
show: true,
label: 'rad',
min: 0,
max: 2 * Math.PI,
numberTicks: 9
},
yaxis: {
show: true,
label: 'y',
min: -2.0,
max: 2.0
}
}
};
CSV.begin('%F', {
dim: [36, 4],
header: ['deg', 'rad', 'sin', 'cos'],
func: function(i, j) {
var deg = 10 * (i);
var rad = deg * 2 * Math.PI / 360.0;
if (j === 0) return deg;
if (j === 1) return rad;
if (j === 2) return Math.sin(rad);
if (j === 3) return Math.cos(rad);
}
}).
jqplot([
['chart1', [
['deg', 'sin'],
['deg', 'cos']
], plotOptions]
]).
table('tab1', {
header: 1
}).
go();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.css" />
<script src="https://cdn.rawgit.com/DrPaulBrewer/html5csv/7f39da16/html5csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/jquery.jqplot.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqPlot/1.0.9/plugins/jqplot.canvasAxisTickRenderer.js"></script>
Notes: No need to call new Axis() here, either. Name the plotOptions keys properly and it works.
Plotting of data used the original single X coordinate using the 1st X axis.
Reference
From the jqPlot Axis docs:
Axes options are specified within an axes object at the top level of the plot options like so:
{
axes: {
xaxis: {min: 5},
yaxis: {min: 2, max: 8, numberTicks:4},
x2axis: {pad: 1.5},
y2axis: {ticks:[22, 44, 66, 88]}
}
}
There are 2 x axes, ‘xaxis’ and ‘x2axis’, and 9 yaxes, ‘yaxis’, ‘y2axis’. ‘y3axis’, ... Any or all of which may be specified.
Useful axis options excerpted from the documentation
Note: Additional options do exist. These are the most basic ones.
In a few of these I edited slightly for clarity.
show
true to display the axis on the graph.
label
Label for the axis
showLabel
true to show the axis label.
min
minimum value of the axis (in data units, not pixels).
max
maximum value of the axis (in data units, not pixels).
autoscale
true to Autoscale the axis min and max values to provide sensible tick spacing.
If axis min or max are set, autoscale will be turned off. The numberTicks, tickInterval and pad options do work with autoscale, although tickInterval has not been tested yet. padMin and padMax do nothing when autoscale is on.
ticks
1D [val, val, ...] or 2D [[val, label], [val, label], ...] array of ticks for the axis. If no label is specified, the value is formatted into an appropriate label.
numberTicks
Desired number of ticks. Default is to compute automatically.
tickInterval
number of units between ticks. Mutually exclusive with numberTicks.
showTicks
true to show the ticks (both marks and labels) or not. Will not override showMark and showLabel options if specified on the ticks themselves.
showTickMarks
true to show the tick marks (line crossing grid) or not. Overridden by showTicks and showMark option of tick itself.
syncTicks
true to try and synchronize tick spacing across multiple axes so that ticks and grid lines line up. This has an impact on autoscaling algorithm, however. In general, autoscaling an individual axis will work better if it does not have to sync ticks.
tickSpacing
A number giving approximate pixel spacing between ticks on graph. Used during autoscaling. This number will be an upper bound, actual spacing will be less.
I am currently working with d3.js and have to work with seconds and microseconds. For this I intend to use a axis that is formatted similar to this:
I tried using two x-axes but the problem is that I don't know how to make the µ-sec axis dependent on the sec axis in order to restart the µ-sec numeration from zero after a new sec tick.
Here's a example of a data entry:
{"id": 0, "start": 5667572130, "end": 5667581035, "taskName": "t"},
And heres how I initialize the two axes:
x = d3.scale.linear().domain( [ timeDomainStart, timeDomainEnd ] ).range( [ 0, width ] ).clamp( true );
x2 = d3.scale.linear().domain( [ timeDomainStart/1000000, (timeDomainEnd/1000000) ] ).range( [ 0, width ] ).clamp( true );
xAxis = d3.svg.axis().scale( x ).orient( "bottom" ).tickSize( 4 ).tickPadding( 4 ).ticks(5);
x2Axis = d3.svg.axis().scale( x2 ).orient( "bottom" ).tickSize( 8 ).tickPadding( 8 ).tickFormat( d3.format( "f" ) ).ticks(10);
Here's a jsfiddle, it is based one following gantt example https://dk8996.github.io/Gantt-Chart/
I have several points that I try to represent using a graphael line chart. Almost all of them are below 0.03. However, the chart sets 1 as the maximum and all points are shown to be very down at the chart. When I have even one point over 0.03, graphael sets the maximum value something more than 0.03 and therefore the chart displays correctly. What can I do for the rest cases where all my points are below 0.03? It is really very ungly, and not helpful at all.
Is there a way to set the max value of the y axis automatically?
If you cannot help me, can you please run it, just to tell me if he can run it normally? It wouldn't take much time...
This is what I mean
I noticed that it also might produce very wrong y axis labels...
My code is shown below
var lines = r.linechart(30, 30, 600, 440,[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71]],[[0.02046,0.00635,0.02813,0.02808,0.02385,0.00729,0.02145,0.01978,0.02683,0.03006,0.03105,0.01211,0.0083,0.0022,0.02172,0.01541,0.01181,0.02418,0.00552,0.02708,0.01011,0.0105,0.0294,0.00132,0.00615,0.02303,0.00065,0.00967,0.00381,0.02167,0.01357,0.0221,0.02512,0.00918,0.01072,0.01083,0.00598,0.00195,0.01716,0.00347,0.03058,0.01815,0.02899,0.01537,0.0241,0.0241,0.00451,0.00088,0.01574,0.00688,0.0143,0.0024,0.03047,0.02876,0.00528,0.00996,0.00865,0.02681,0.02194,0.00082,0.00664,0.01178,0.01596,0.00516,0.0165,0.00895,0.01869,0.03082,0.02318,0.01089,0.00943,0.00986]], {axisxstep : 12,axisystep : 5,nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});