I've plotted win rate on a Flot chart here: http://jsfiddle.net/xR66k/
The x-axis displays the week number, but I don't want the points between these ticks (for example between week 37 and 38, and between week 41 and 42) – how can I remove these?
I'm creating the ticks with the following code:
var data = [[1382911200000,7.6805],[1382306400000,27.4607],[1381701600000,13.0376],[1381096800000,-26.3855],[1380492000000,-11.9624],[1379887200000,-5.018],[1379282400000,-11.0009],[1378677600000,50.5376],[1378072800000,0],[1377468000000,0]];
var ticks = [];
for (var i = 0; i < data.length; i++) {
ticks.push(data[i][0]);
}
Why does Flot plot extra data points?
As I said in my comment this is a known limitation of the threshold plugin, so, let's work around it. In this fiddle, I've simply created two series one with just points and one with just lines. The "just lines" will get threshold properly without the addition of point markers.
data = [
{ label: 'Win Rate', data: data, points: {show:false} },
{ label: null, data: data, points: {show:true}, lines: {show:false} }
];
Related
I want to change the y axis max range based on plotting data. So When I draw the graph, it dynamically assign the y axis range based on maximum plotting data.
Currently, I am not defining any maximum range for Y axis in options to achieve the above. So it do dynamically assign maximum y-axis range, based on data plotting
This is my code for above implementation
var source = [];
var options = {
xaxis: {
...
}
yaxis: {
min: 0,
axisLabel: "Y",
axisLabelUseCanvas: false,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: "Verdana, Arial, Helvetica, Tahoma, sans-serif",
axisLabelPadding: 15
},
}
plotObj = $.plot($("#placeholder"), source, options) ;
It is working fine and allocating y axis max range dynamically. But, I have included "jquery.flot.selection.js" plugin to zoom the selected area. So it zoom to the ranges.yaxis.from to ranges.yaxis.to with below mentioned code
$("#placeholder").on("plotselected", function(ev, ranges) {
//clearInterval(protection_timer);
axes_data = plotObj.getAxes(); //get plotted axis ranges
axes_data.xaxis.options.min = ranges.xaxis.from ;
axes_data.xaxis.options.max = ranges.xaxis.to ;
axes_data.yaxis.options.min = ranges.yaxis.from;
axes_data.yaxis.options.max = ranges.yaxis.to;
...
plotObj.setData(graphData);
plotObj.setupGrid();
plotObj.draw();
});
Now, when user double click on the placeholder area, I need to reset beck the graph. But this time, as y axis max range is undefined, it is not resetting back. How can I get the y axis range, it was displaying in before zooming ? please give some suggestion
Expand your plotselected event with the second line here:
axes_data = plotObj.getAxes(); //get plotted axis ranges
axes_data.yaxis.originalMax = axes_data.yaxis.max; // save max value
axes_data.xaxis.options.min = ranges.xaxis.from;
and in the doubleclick event to reset the graph add the corresponding line:
axes_data.yaxis.max = axes_data.yaxis.originalMax; // restore max value
I've got spectrum from a Fourier transformation. It looks like this:
Police was just passing nearby
Color represents intensity.
X axis is time.
Y axis is frequency - where 0 is at top.
While whistling or a police siren leave only one trace, many other tones seem to contain a lot of harmonic frequencies.
Electric guitar plugged directly into microphone (standard tuning)
The really bad thing is, that as you can see there is no major intensity - there are 2-3 frequencies that are almost equal.
I have written a peak detection algorithm to highlight the most sigificant peak:
function findPeaks(data, look_range, minimal_val) {
if(look_range==null)
look_range = 10;
if(minimal_val == null)
minimal_val = 20;
//Array of peaks
var peaks = [];
//Currently the max value (that might or might not end up in peaks array)
var max_value = 0;
var max_value_pos = 0;
//How many values did we check without changing the max value
var smaller_values = 0;
//Tmp variable for performance
var val;
var lastval=Math.round(data.averageValues(0,4));
//console.log(lastval);
for(var i=0, l=data.length; i<l; i++) {
//Remember the value for performance and readibility
val = data[i];
//If last max value is larger then the current one, proceed and remember
if(max_value>val) {
//iterate the ammount of values that are smaller than our champion
smaller_values++;
//If there has been enough smaller values we take this one for confirmed peak
if(smaller_values > look_range) {
//Remember peak
peaks.push(max_value_pos);
//Reset other variables
max_value = 0;
max_value_pos = 0;
smaller_values = 0;
}
}
//Only take values when the difference is positive (next value is larger)
//Also aonly take values that are larger than minimum thresold
else if(val>lastval && val>minimal_val) {
//Remeber this as our new champion
max_value = val;
max_value_pos = i;
smaller_values = 0;
//console.log("Max value: ", max_value);
}
//Remember this value for next iteration
lastval = val;
}
//Sort peaks so that the largest one is first
peaks.sort(function(a, b) {return -data[a]+data[b];});
//if(peaks.length>0)
// console.log(peaks);
//Return array
return peaks;
}
The idea is, that I walk through the data and remember a value that is larger than thresold minimal_val. If the next look_range values are smaller than the chosen value, it's considered peak. This algorithm is not very smart but it's very easy to implement.
However, it can't tell which is the major frequency of the string, much like I anticipated:
The red dots highlight the strongest peak
Here's a jsFiddle to see how it really works (or rather doesn't work).
What you see in the spectrum of a string tone is the set of harmonics at
f0, 2*f0, 3*f0, ...
with f0 being the fundamental frequency or pitch of your string tone.
To estimate f0 from the spectrum (Output of FFT, abs value, probably logarithmic) you should not look for the strongest component, but the distance between all these harmonics.
One very nice method to do so is a second (inverse) FFT of the (abs, real) spectrum. This produces a strong line at t0 == 1/f0.
The sequence fft -> abs() -> fft-1 is equivalent to calculating the auto-correlation function (ACF) thanks to the Wiener–Khinchin theorem.
The precission of this approach depends on the length of the FFT (or ACF) and your sampling rate. You can improve precission a lot if you interpolate the "real" max between the sampling points of the result using a sinc function.
For even better results you could correct the intermediate spectrum: Most sounds have an average pink spectrum. If you amplify the higher frequencies (according an inverse pink spectrum) before the inverse FFT the ACF will be "better" (It takes the higher harmonics more into account, improving acuracy).
I have this graph made with achartengine library:
a------------------------
What I want to do is to have a color field in it between particular values, like that:
Some of my code:
protected void setRenderer(XYMultipleSeriesRenderer renderer, int[] colors,
PointStyle[] styles) {
renderer.setAxisTitleTextSize(16);
renderer.setChartTitleTextSize(20);
renderer.setLabelsTextSize(15);
renderer.setLegendTextSize(15);
renderer.setPointSize(2f);
renderer.setMargins(new int[] { 20, 30, 15, 20 });
int length = colors.length;
for (int i = 0; i < length; i++) {
XYSeriesRenderer r = new XYSeriesRenderer();
r.setColor(colors[i]);
r.setPointStyle(styles[i]);
renderer.addSeriesRenderer(r);
}
}
I really dont know how to do that. Is there a way, how to accomplish that?
Any help appreciated.
Jan
You have a scatter chart defined. You could do a combined XY chart which would include the current scatter chart and an extra range bar chart that would actually build the colored rectangle you need.
An example for building a combined XY chart is available here.
In some cases of my Pie Chart, I would like to show the user the percentage relative to slices of the Pie Chart instead of showing the values of the slices.
For example: I have three slices in my pie: A representing 70% of the pie, B representing 15% of the pie and C representing 15% of the pie.
When I click to hide the slice A I want to show to the user the percentage of the remaining slices, in this example it'll be B = 50% and C = 50%.
Is it possible in NVD3?
Important: I don't want to reload the chart when click to hide some slice.
You can use chart.tooltipContent to override the chart tooltip label. The following is adapted from the live code example on NVD3's website. http://nvd3.org/livecode/#codemirrorNav
Example: http://plnkr.co/edit/UiGLIj?p=preview
nv.addGraph(function() {
var chart = nv.models.pieChart()
.x(function(d) { return d.label })
.y(function(d) { return d.value })
.showLabels(true);
chart.tooltipContent(function(key, x, obj){
var enabledTotal = data[0].values
.filter(function(item){return !item.disabled;})
.reduce(function(a, b){return a + b.value}, 0);
return Math.round((obj.value/enabledTotal) * 100) + "%";
})
d3.select("#chart svg")
.datum(data)
.transition().duration(1200)
.call(chart);
return chart;
});
Using three.js, I'm working on a web page to display a flip cube (a.k.a. magic cube; see e.g. the video on this page).
On a flip cube, there are typically images that are spread out across multiple pieces of the cube. For example, the boat image shown above is spread across the faces of four cubelets. In three.js terms, there are multiple meshes that need to use the same image for their material texture, but each at a different offset.
As far as I understand it, in three.js, offset is a property of a texture, not of a material or a mesh. Therefore, it would appear that you cannot have a single texture that is used at a different offset in two different places.
So does that mean that in order to have different parts of the boat image shown on four different faces, I have to create four separate textures, meaning that we load the boat image into memory four times? I'm hoping that's not the case.
Here's a relevant piece of the code:
// create an array with the textures
var textureArray = [];
var texNames = ['boat', 'camels', 'elephants', 'hippo',
'natpark', 'ostrich', 'coatofarms-w', 'kenyamap-w', 'nairobi-w'];
texNames.map(function(texName) {
textureArray.push(THREE.ImageUtils.loadTexture(
'images/256/' + texName + '.jpg' ));
});
// Create a material for each texture.
for (var x=0; x <= 1; x++) {
for (var y=0; y <= 1; y++) {
for (var z=0; z <= 1; z++) {
var materialArray = [];
textureArray.map(function(tex) {
// Learned: cannot set this offset for one material,
// without it affecting all materials that use this texture.
tex.offset.x = x * 0.2;
tex.offset.y = y * 0.2;
materialArray.push(new THREE.MeshBasicMaterial( { map: tex }));
});
var cubeMaterial = new THREE.MeshFaceMaterial(materialArray.slice(0, 6));
var cube = new THREE.Mesh( cubeGeom, cubeMaterial );
cube.position.set(x * 50 - 25, y * 50 - 25, z * 50 - 25);
scene.add(cube);
}
}
}
If you look at it on http://www.huttar.net/lars-kathy/tmp/flipcube.html, you'll see that all the texture images are displayed offset by the same amount on each cubelet face, even though they are set to different offsets on different cubelets. This seems to confirm that you can't have different uses of the same texture with different offsets.
How can I get different meshes to use the same texture at different offsets, so I don't have to load the same image multiple times into multiple textures?
What you say is true. Instead of adjusting the texture offsets, adjust the face vertex UVs of the geometry.
EDIT: There is another solution more in line with what you want to do. You can clone a texture like so:
var tex = new THREE.Texture.clone();
Cloning a texture will result in the loaded image being reused, and the new texture can have it's own offsets. Do not try to clone the texture until the image loads, however.
With this alternate approach, you do not have to adjust UVs, and you do not have to load an image more than once.
three.js r.58