I am using d3.js to plot the histograms. I want to remove the vertical lines that are connected to the plot at the start point and end point of the plot:
http://i.stack.imgur.com/CpP6C.png
Thank you in advance ;)
(function(window, document, undefined) {
'use strict';
// Create an SVG element and create an AxesChart inside it
var makeChart = function(container) {
return container.append('svg')
.chart('AxesChart')
.width(450)
.height(400);
};
// Manipulate the input data to a format accepted by the Histogram chart
var formatData = function(data) {
var rtn = [];
for (var i = 0; i < data['values'].length; i++) {
var bins = data['binning'][i];
rtn.push({
xlow: bins[0],
xhigh: bins[1],
y: data['values'][i],
yerr: data['uncertainties'][i]
});
}
return rtn;
};
// Return an array of objects suitable for d3.plotables.LineChart, filled
// with data generated from the function f, which should return a single
// number when passed a single number.
// The function is evaluated from domain[0] to domain[1] (domain[1] > domain[0])
// in the given number of steps (default: 100).
var dataFromFunction = function(f, domain, steps) {
if (steps === undefined) {
steps = 100;
}
var step = (domain[1] - domain[0])/(1.0*steps),
x = domain[0],
data = [];
for (var i = 0; i <= steps; i++) {
data.push({
x: x,
y: f(x),
xerr: [0, 0],
yerr: [0, 0]
});
x = i*step + domain[0];
}
return data;
};
// Define histogram datasets
var gaussian = formatData(gaussianData),
landau = formatData(landauData),
steps = formatData({
'values': [0, 1, 2, 3, 4, 5],
'binning': [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6]],
'uncertainties': [[0, 0.2], [0.2, 0.7], [0.3, 0.2], [0.2, 0.2], [0.2, 0.3], [0.2, 0.6]]
});
// Generate some line chart data
var sinc = dataFromFunction(function(x) {
return x == 0 ? 1 : Math.sin(Math.PI*x)/(Math.PI*x);
}, [-2*Math.PI, 2*Math.PI]),
line = [
{x: -6, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -4, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -2, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 0, y: 0.0, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 2, y: 0.2, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 4, y: 0.8, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 6, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]}
];
// Define our charts
var hGauss = makeChart(d3.select('#h1'))
.xAxisLabel('Vertex position [mm]')
.yAxisLabel('Frequency');
var h2DGauss = makeChart(d3.select('#h2'))
.xAxisLabel('x')
.yAxisLabel('y')
.animate(false);
var lineChart = d3.select('#h3').append('svg')
.chart('AxesChart')
.width(450)
.height(400);
var gaussianInfo = [
['Name', 'Gaussian'],
['Entries', '10000'],
['Mean', '0.0'],
['RMS', '1.0']
];
// Draw plotables on to charts
hGauss.addPlotable(d3.plotable.Histogram('steps', steps, {showUncertainties: true}));
hGauss.addPlotable(d3.plotable.Histogram('gaussian', gaussian));
hGauss.addPlotable(d3.plotable.Histogram('landau', landau));
hGauss.addOrnament(d3.plotable.TextBox('gaussianInfo', gaussianInfo));
h2DGauss.addPlotable(d3.plotable.Histogram2D('gaussian2d', data2d.data));
lineChart.addPlotable(d3.plotable.LineChart('sinc', sinc));
lineChart.addPlotable(d3.plotable.LineChart('line', line, {showPoints: true, showUncertainties: true, interpolation: 'linear', color: 'green'}));
})(window, window.document);
https://github.com/alexpearce/histograms/commit/f9b5b364153ee9ff151794aa93744681103c955f
This is the answer - you need to make some changes and then you have option if you want this lines or not. Cheers ;)
Related
I want to change the z-index label in plotlyjs
I am using the following code. It currently shows X,Y,Z on hover. X, Y values are good. I want to know if there is some way where we can change the value label of Z?
On hover on the graph I want Z to be shown as 'Value'. How to get that?
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']]
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);
Try the hovertemplate option (https://plot.ly/javascript/reference/#contour-hovertemplate):
var data = [ {
z: [[10, 10.625, 12.5, 15.625, 20],
[5.625, 6.25, 8.125, 11.25, 15.625],
[2.5, 3.125, 5., 8.125, 12.5],
[0.625, 1.25, 3.125, 6.25, 10.625],
[0, 0.625, 2.5, 5.625, 10]],
type: 'contour',
colorscale: [[0, 'rgb(166,206,227)'], [0.25, 'rgb(31,120,180)'], [0.45, 'rgb(178,223,138)'], [0.65, 'rgb(51,160,44)'], [0.85, 'rgb(251,154,153)'], [1, 'rgb(227,26,28)']],
hovertemplate: 'x: %{x}, y: %{y}, Value: %{z}<extra></extra>'
}
];
var layout = {
title: 'Custom Contour Plot Colorscale'
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.49.5/plotly.min.js"></script>
<div id=myDiv>
</div>
I have a annotated heatmap using plotly in the following fiddle https://jsfiddle.net/9ds7mryr/5/
My intention is to have three colours for three individual ranges
<0.75 #FFA500
>0.75 and <0.90 rgb(255,0,0)
>0.90 #F0E7E7
However, right now I get the same colour for some of the values even though they are different if slightly.
How can I ensure values of the same range have the same colour?
Try changing your colorscale to
[
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
]
The colorscale needs to be between 0 and 1, i.e. your values will be automatically normalized to be between those values. Since your values start higher than 0 and lower than 1 they will be shifted. You can change this behavior with zmin and zmax.
var xValues = ['A', 'B', 'C', 'D', 'E', 'max', 'min'];
var yValues = ['W'];
var zValues = [
[0.80, 0.110, 0.220, 0.74, 0.90, 1, 0]
];
var colorscaleValue = [
[0, '#FFA500'],
[0.1, '#FFA500'],
[0.2, '#FFA500'],
[0.3, '#FFA500'],
[0.4, '#FFA500'],
[0.74,'#FFA500'],
[0.75, 'rgb(255,0,0)'],
[0.89, 'rgb(255,0,0)'],
[0.90, '#F0E7E7'],
[0.95, '#F0E7E7'],
[1, '#F0E7E7']
];
var data = [{
x: xValues,
y: yValues,
z: zValues,
type: 'heatmap',
colorscale: colorscaleValue,
showscale: true,
}];
var layout = {
title: 'Annotated Heatmap',
annotations: [],
xaxis: {
ticks: '',
side: 'top'
},
yaxis: {
ticks: '',
ticksuffix: ' ',
width: 700,
height: 700,
autosize: true
}
};
Plotly.newPlot('myDiv', data, layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv">
Whenever I fill a scatter its drawn over the top of the bars on a multi chart type graph.
See example here
http://codepen.io/anon/pen/JXgNBG
var trace1 = {
x: [0, 1, 2, 3, 4, 5],
y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
type: 'scatter',
fill: 'tozeroy'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5],
y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
type: 'bar'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
Any ideas how to draw the bars over the filled area on the scatter? I would like the bars drawn over the top of the filled area to make them stand out.
I have two flot charts and three data sets with crosshair in sync on both charts and dynamic legends that indicates value of each point on graph. Legend in the second chart does not show value where other two work fine. How would one make third or more legends show dynamic values as well. Moreover, can one make improvements to existing code where any number of charts with crosshair in sync can be displayed? Thanks,
Here is the fiddle: http://jsfiddle.net/mashinista/Q24qN/
and this is the code
plot = null;
plot2 = null;
var data1 = [
[gd(2012, 0, 1), 8],
[gd(2012, 1, 1), 13],
[gd(2012, 2, 1), 4],
[gd(2012, 3, 4), 8],
[gd(2012, 4, 1), 16],
[gd(2012, 5, 1), 20],
[gd(2012, 6, 1), 29],
[gd(2012, 7, 1), 23],
[gd(2012, 8, 1), 28],
[gd(2012, 9, 1), 16],
[gd(2012, 10, 1), 8],
[gd(2012, 11, 2), 4]
];
var data2 = [
[gd(2012, 0, 1), 16],
[gd(2012, 1, 1), 14],
[gd(2012, 2, 1), 22],
[gd(2012, 3, 1), 30],
[gd(2012, 4, 1), 28],
[gd(2012, 5, 1), 39],
[gd(2012, 6, 1), 38],
[gd(2012, 7, 1), 28],
[gd(2012, 8, 1), 31],
[gd(2012, 9, 1), 28],
[gd(2012, 10, 1), 22],
[gd(2012, 11, 1), 16]
];
var data3 = [
[gd(2012, 0, 1), 16],
[gd(2012, 1, 1), 14],
[gd(2012, 2, 1), 22],
[gd(2012, 3, 1), 30],
[gd(2012, 4, 1), 28],
[gd(2012, 5, 1), 39],
[gd(2012, 6, 1), 29],
[gd(2012, 7, 1), 23],
[gd(2012, 8, 1), 28],
[gd(2012, 9, 1), 16],
[gd(2012, 10, 1), 8],
[gd(2012, 11, 2), 4]
];
function gd(year, month, day) {
return new Date(year, month, day).getTime();
}
$(function () {
var sin = [], cos = [];
for (var i = 0; i < 14; i += 0.1) {
sin.push([i, Math.sin(i)]);
cos.push([i, Math.cos(i)]);
}
plot = $.plot($("#placeholder"),
[ { data: data1, label: "Query1 = 0.00"}, {
data: data2, label: "Query2 = 0.00"}],
{
series: {
lines: { show: true }
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false},
yaxis: { min: 0, max: 40 },
xaxis: {mode: "time"}
});
plot2 = $.plot($("#placeholder2"),
[ { data: data3, label: "Query3 = 0.00"} ], {
series: {
lines: { show: true },
color: "#2eef34"
},
crosshair: { mode: "x" },
grid: { hoverable: true, autoHighlight: false},
yaxis: { min: 0, max: 40 },
xaxis: {mode: "time"}
});
var legends = $("#placeholder .legendLabel, #placeholder .legendLabel");
var updateLegendTimeout = null;
var latestPosition = null;
function updateLegend() {
updateLegendTimeout = null;
var pos = latestPosition;
var axes = plot.getAxes();
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max || pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) return;
var i, j, dataset = plot.getData();
for (i = 0; i < dataset.length; ++i) {
var series = dataset[i];
// find the nearest points, x-wise
for (j = 0; j < series.data.length; ++j)
if (series.data[j][0] > pos.x) break;
// now interpolate
var y, p1 = series.data[j - 1],
p2 = series.data[j];
if (p1 == null) y = p2[1];
else if (p2 == null) y = p1[1];
else y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
legends.eq(i).text(series.label.replace(/=.*/, "= " + y.toFixed(2) + " "));
}
}
$("#placeholder").bind("plothover", function (event, pos, item) {
plot2.setCrosshair({x: pos.x}),
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
$("#placeholder2").bind("plothover", function (event, pos, item) {
plot.setCrosshair({x: pos.x}),
latestPosition = pos;
if (!updateLegendTimeout) updateLegendTimeout = setTimeout(updateLegend, 50);
});
});
There were two errors which needed fixing:
1) Your legends array contains only the legends from the first plot:
var legends = $("#placeholder .legendLabel, #placeholder .legendLabel");
needs to be
var legends = $("#placeholder .legendLabel, #placeholder2 .legendLabel");
2) In your updateLegend method you only use the data from the first plot:
var i, j, dataset = plot.getData();
I added a for loop over both plots / datasets:
for (var p = 0; p <= 1; p++) {
var i, j, dataset;
if (p == 0) dataset = plot.getData();
else dataset = plot2.getData();
...
legends.eq(i + p * 2).text(series.label.replace(/=.*/, "= " + y.toFixed(2) + " "));
See this updated fiddle for the working code.
3) More charts:
If you want to add a larger number of charts then you need to change the same lines of code as above. For the dataset you can use a switch statement or build an array of flot objects and then use something like
var dataset = plot[p].getData();
And for the legend number you have to count the number of legends / dataseries per chart:
legends.eq(i + countOfLegendsFromOtherCharts(p)).text( ... );
with something like this (but maybe better store this values somewhere):
function countOfLegendsFromOtherCharts(p) {
var count = 0;
for (var i = 0; i < p; i++) {
var dataset = plot[p].getData();
count += dataset.length;
}
return count;
}
Is it possible to change the fill color of a point (linear graph) in Flotr2 ?
my code:
<script>
/* globals*/
var lineColor = '#717171';
var baseLineColor = '#a3d06e';
var titleText = []; /* [title1, title2,...] */
var xticks = []; /* [ [0.9, ""], [1, "strValue1"], ..., [n, strValueN], [n+0.1, ""] ] */
var title = document.getElementById('title');
var data = [ /* the chart data */
[1, 2],
[2, 3],
[3, 3],
[4, 4],
[5, 5],
[6, 5],
[7, 5],
[8, 2],
[9, 3],
[10, 3],
[11, 4],
[12, 5],
[13, 5],
[14, 5],
[15, 5],
[16, 2],
[17, 3],
[18, 3],
[19, 4],
[20, 5],
[21, 5],
[22, 5],
[23, 2],
[24, 3],
[25, 3],
[26, 4],
[27, 5],
[28, 5],
[29, 5],
[30, 5],
];
var container = document.getElementById('chart');
/*Test - remove for real data*/
for(var i=1; i<31; i++){
xticks.push([i, ("label " + i)]);
titleText[i] = "Title " + i;
}
/* chart options */
var personal = { data : data, /* #data# */
lines : { show : true, fill : false, color: lineColor, lineWidth: 4},
points : { show : true, color: lineColor, radius: 20, fillColor:'#ff0000'}
};
var baseline = { data: [[-50,3],[50,3]],
mouse: {track: false},
lines : { show : true, fill : false, color: baseLineColor, lineWidth: 4}
}
setTimeout(setDimentions, 300);
function setDimentions(){
var w = window.innerWidth * 0.8;
var h = window.innerWidth * 0.45;
container.style.width = w + "px";
container.style.height = h + "px";
drawChart();
}
function drawChart(){
var f = Flotr.draw(container, [baseline, personal],
{
resolution: 2, HtmlText: true,
xaxis : { ticks: xticks /* #xticks# */, tickDecimals: true, min:0.8, max: (data.length+0.2)/*#xmax#*/ },
yaxis : { ticks: [1,2,3,4,5], tickDecimals: true, min:0.9, max: 5.1 },
mouse : { track : true, sensibility: 10, trackFormatter: showTitle}
});
}
function showTitle(point){
title.innerHTML = titleText[parseInt(point.x)];
}
It should be enough to use the following options:
mouse : {
track : true,
relative : true,
lineColor : '#FF00FF',
fillColor : '#0000FF'
},
I put a demo here:
http://jsfiddle.net/93by5/1/