I display a data set in a scatter plot using jqPlot. There are repeated values in the data set. Is there a way to represent the fact there are multiple data points in one location on the graph? Perhaps by growing the point marker bigger?
Alternately, is there another kind of graph I should be using?
Here is my Javascript code for the scatter plot.
var qr=[[1,5],[4,5],[6,5],[4,5],[0,5],[4,5],[6,5],[4,5]];
var gr_html = $.jqplot('par_sca_div', [qr], {
seriesDefaults:{
showLine:false,
markerRenderer: $.jqplot.MarkerRenderer,
markerOptions: {
size: 5
}
},
series:[{
markerOptions: {
style: 'circle',
size:5,
},
}],
axes:{
xaxis:{
label:'Score',
},
yaxis:{
renderer:$.jqplot.canvasTextRenderer,
label:'Rate',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
labelOptions:{
fontSize: '10pt'
},
},
}
});
Use the pointLabels plugin and make your label reflect the amount of identical points.
Add the labels to your array:
var qr=[[1,5, null],[4,2, null],[6,5,'2'],[4,5,'3'],[0,5,null],[4,5,'3'],[6,5,'2'],[4,5,'3']];
and enable point labels in your series:
series:[{
pointLabels:{
show: true,
},
Here is a working jsfiddle example with the above.
As for an algorithm of dynamically adding the label to your original array, you can iterate your original array and create a matrix which will represents the point and the number of repeats.
For example:
[4,5] will be represented as pointMatrix[4][5] with a value of 3.
Then iterate your array again and using the matrix add the corresponding point label value to your original array.
Related
I need a bar chart that comparatively displays two sets of data side by side along a horizontal axis.
So I have a stacked (but not clustered) column series XY chart (amCharts 5) which looks like this:
The plotted data is coming from an array of objects:
[
{
current: 61,
previous: 29,
...
},
{
current: 60,
previous: 29,
...
},
...
]
Now, how can I achieve this:
Do I need to find the average between current and previous then set that as a base, or do I really need negative values (say for previous) to achieve that? Either way, I was unable to make it look like above.
Found an example with amCharts4 but I don't understand how should I modify my chart to achieve the same mirror bar chart look.
I've put the chart together in a Codesandbox playground, I would appreciate some help. Data is hardcoded and there's an object with previous negative values aswell.
To do that, you need two vertical axes with opposite directions. They could be configured like so:
let yAxisCurrent = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {}),
calculateTotals: true,
visible: true,
min: 0
})
);
let yAxisPrevious = chart.yAxes.push(
am5xy.ValueAxis.new(root, {
renderer: am5xy.AxisRendererY.new(root, {
inversed: true // <--- DO NOT FORGET THIS
}),
calculateTotals: true,
visible: true,
min: 0
})
);
Then add this line of code:
chart.leftAxesContainer.set("layout", root.verticalLayout);
Here is the result: https://codesandbox.io/s/sleepy-hooks-vwucth
I have a set of data basically from node-edge graph: a number of nodes (from A1...A10) and a list of edges (i.e. A1-A3, A2-A3, A4-A6 etc.). I want to create a bubble chart from this data, however, if I simply pass my edges as points I end up with axes reduced to nodes with edges (if A5 does not have edges, it will not show) and Y axis is sorted depending on the first edge point, not alphabetically (if A3 was in the first edge, it will be first on the Y axis). What I am looking for is to manually pass list of nodes (A1...A10) to plotly.js to build identical X and Y axes. Is it possible?
Found a suitable solution in Plotly.js: Cannot show full categorical x-axis
var layout = {
xaxis: {
title: 'x Axis Label'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['0001','0002','0003']
},
yaxis: {
title: 'Y Axis Label %>'
, autorange: false
, type: 'category'
, categoryorder: 'array'
, categoryarray: ['one','two','three', 'etc']
},
};
However, still had to use autorange: true otherwise it would not display initial graph correctly
I have series with simple integer values. So there is no need to have float numbers as y-axis labels.
I use the axisLabelFormatter to convert y to integers. But the result is, that I have duplicated integer values on the y-axis.
How can I get a y-axis, which is labeled only with single integers at the correct place?
I would like to have the secondary y-axis with a different grid too
See also the example at https://jsfiddle.net/eM2Mg/9559/.
I have tried your example, modified it and I have got this result
I have modified your code the next way
var graph2 = new Dygraph(document.getElementById("graph2"), data, {
axes: {
y2: {
axisLabelFormatter: function(y) {
return texts[y] || parseInt(y);
},
drawGrid: true,
independentTicks: true,
pixelsPerLabel: 100,
gridLinePattern: [2,2]
}
},
legend: "always",
series: {
"State": {
axis: "y2",
strokeWidth: 2,
stepPlot: true,
}
},
strokeWidth: 2,
title: "my try to get what I want"
});
I have set the option drawGrid and independentLabels to true.
It is necessary to adjust the pixelsPerLabel to the size you think the 3 values auto, on, off are better shown.
And the grid patterLine to show a different grid for the right y axis.
You can also remove the drawGrid if you consider it look better without the grid.
I hope this could be a solution for you! Regards!
I want to plot a graph with the following as the xaxis:
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
notice how there is a skip between 31.5 and 32.1. However, when I plot my line graph, there is a large space between these two points. Here's my code:
$(document).ready(function(){
var cust1 = [[31.1,10],[31.2,15],[31.3,25],[31.4, 60],[31.5,95]];
var cust2 = [[31.1,0],[31.2,15],[31.3,30],[31.4, 50],[31.5,85]];
var data = [];
data.push(cust1);
data.push(cust2);
var xaxis = [31.1,31.2,31.3,31.4,31.5, 32.1,32.2,32.3,32.4,32.5];
var plot3 = $.jqplot('line-chart', data,
{
title:'Design Progress',
axes: {
xaxis: {
//renderer: $.jqplot.LineRenderer,
label: 'Work Weeks',
ticks: xaxis
},
yaxis: {
label: "Percent Complete",
max: 100,
min: 0
}
}
}
);
});
I think it's because I'm not specifying a renderer option in my xaxis options. However, I've tried to use $.jqplot.LineRenderer and $.jqplot.CategoryAxisRenderer without any luck (I even set my xaxis values as strings but that didn't work). Anybody know what's going on?
Here's a pic to further clarify:
Reason why it happens : jQuery flot library is building the graph with values that determined by your data.
When you provide such data, the plugin will set the axis values to be as same as the text and with the borders of the numbers you gave.
what you can do, is set the text to be different than the axis value.
You can easily do it by options.xaxis.ticks.push([value, "the text"]).
Pay attention that you are the one who is going to set which label will have which axis value, and this calls for setting the options parameter before calling the $plot
I have one long unixtime, value Array which is used to initiate a flot chart, and some buttons to change the scale, what I can't seem to be able to do is get Y-axis to scale with the change in X-scale.
Here is an example chart:
http://jsfiddle.net/U53vz/
var datarows = //Data Array Here
var options = { series: { lines: { show: true }, points: { show: true } },
grid: { hoverable: true,clickable: false, },
xaxis: { mode: "time", min: ((new Date().getTime()) - 30*24*60*60*1000), max: new Date().getTime(), }
};
function castPlot() {
window.PLOT = $.plot("#placeholder", [{ data: dataRows }], options
);
};
In the official example scaling is automatic and unspecified on the Y-axis:
http://www.flotcharts.org/flot/examples/axes-time/index.html
The only alternative I can think of is looping through the dataset and calculating new Y min/max on each button press. Unless I am breaking some very obvious default function.
When calculating y-scale, flot does not look at only the "viewable" data but the whole dataset. Since the data points are still present, the y min/max respects them. So your options are:
Subset the series data down to the desired range and let flot scale both x and y.
As you suggested, calculate your own min/max on the y axis.
If you plot get any more complicated than it is now (especially if you start setting up click/hover events on it), I would also recommend you switch to redrawing instead of reiniting your plot.
var opts = somePlot.getOptions();
opts.xaxes[0].min = newXMin;
opts.xaxes[0].max = newXMax;
opts.yaxes[0].min = newYMin;
opts.yaxes[0].max = newYMax;
somePlot.setupGrid();
somePlot.draw();
EDITS
Here's one possible solution.