Develop Reference

Flot JS turn target into diamond shape

I've three series of data: for green bars, red bard and target like
var dataBarsRed = {
data: [
[2, 3], ],
label: 'Bars in Red',
color: 'red'
};
var dataBarsGreen = {
data: [
[1, 2],
[3, 1],
[4, 3]
],
label: 'Bars in Green',
color: 'green'
};
var dataLines = {
data: [
[1, 3, 3],
[2, 3.5, 3.5],
[3, 1.5, 1.5],
[4, 2.5, 2.5]
],
label: 'Lines',
color: 'navy',
bars: {
barWidth: 0.5
}
};
I've attached the fiddle for it.
It is possible to make the target as diamond () using Flot JS?

You can customize the point shape by specifying it in the series options (or each individual series). The symbol plugin can be used access more shapes:
var options = {
series: {
points: {
shape: "diamond"
}
}
}
This updated JSFiddle uses the symbols plugin to show diamonds as the point marker.

Plotly.js modebar groups icons and places it over legend

Here is the picture of my problem. As you can see, my modebar is appearing as a grouped set of icons and is placing it over the legend. I just copy and pasted some example code from their site using example data. I have no other css affecting this at all. Below is the blob of code I am using.
The similar post here shows what it SHOULD look like, they are all in a single row and out of the way of the legend.
How do I make my modebar look like the one in the second link?
<div id="myDiv"></div>
<script>
var trace1 = {
x: [0, 1, 2],
y: [10, 11, 12],
type: 'scatter'
};
var trace2 = {
x: [2, 3, 4],
y: [100, 110, 120],
yaxis: 'y2',
type: 'scatter'
};
var trace3 = {
x: [3, 4, 5],
y: [1000, 1100, 1200],
yaxis: 'y3',
type: 'scatter'
};
var data = [trace1, trace2, trace3];
var layout = {
yaxis: {domain: [0, 0.33]},
legend: {traceorder: 'reversed'},
yaxis2: {domain: [0.33, 0.66]},
yaxis3: {domain: [0.66, 1]}
};
Plotly.newPlot('myDiv', data, layout, {displaylogo: false});
</script>

Official "answer" for acceptance: this is usually due to external CSS.

Flot: combine stacked bars and line in one chart

I'm trying to combine stacked bars and a line chart in one flot plot.
The problem I'm facing is, that the line data also gets stacked. Which means the data for the first point (line.data[0]) will be plotted as 15 but I would like it to be 5.
Please see this jsfiddle: http://jsfiddle.net/derkinzi/eor5ngjd/
It works when setting stack: null but I need the stacks. Also giving the line it's own yaxis doesn't solve the problem. (change line 90 to: yaxis: 2)
How can I amend the code so line.data get's it's independent plotting with an independent yaxis?
Basically I need this but with stacked bars: http://jsfiddle.net/derkinzi/eor5ngjd/11/
This is my dataset:
var stack1 = {
label: 'stack1',
data: [
[1, 6],
[2, 3],
[4, 5],
[4, 3],
[5, 4]
],
bars: bar_options
};
var stack2 = {
label: 'stack2',
data: [
[1, 4],
[2, 4],
[3, 4],
[4, 4],
[5, 4]
],
bars: bar_options
};
var line = {
label: 'line',
data: [
[1, 5],
[2, 15],
[3, 15],
[4, 15],
[5, 20]
],
lines: line_options,
yaxis: 1,
points: {
radius: 5,
show: true
},
};
var dataset = [stack1, stack2, line];

As describes in the stack plugin, you can specify the stack option per data series, so in your case do this:
var stack1 = {
//...
stack: true,
};
var stack2 = {
//...
stack: true,
};
var line = {
//...
stack: false,
//...
};
Also, when you define multiple axes, use the yaxes property, not yaxis.
Updated fiddle

Does Flot supports interval bar plot?

Does Flot offers an option to make the bar chart float?. I am looking for a Flot equivalent to interval bar plot (PyChart). The following picture is taken from the link:
(I am aware that Flot may not support this since it seems like each bar in Flot only has one variable, but I am not sure).
Edit: Any javascript library suggestion is also welcome!

I managed a workaround using Flot's bar chart and Flot's stacking. Basically for the empty space, I create a stack with white color (which somehow got translated into transparent except for the edges). Unfortunately, Flot's stacking require all stacks of the same level to be of the same type/color. In order to circumvere this, some of the bars have zero width in the stacks of wrong colors. Result looks surprisingly good!
The corresponding code follows (the example data does NOT corresponds to the image above, since it would be a little too large. This shows only two of the "colors").
var series = [
{
data: [
[24.0, 0],
[6.93333333333, 1],
[6.95, 2],
[6.91666666667, 3],
[6.95, 4],
],
color: "#FFFFFF",
},
{
data: [
[0.0, 0],
[0.0666666666667, 1],
[0.05, 2],
[0.0833333333333, 3],
[0.05, 4],
],
color: "#FFFF00",
},
];
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]];
var options = {
series: {
bars: {
show: true,
barWidth: .75,
horizontal: true,
align: "center"
},
stack: true,
},
xaxis: {
ticks: 24,
},
yaxis: {
ticks: date_ticks_pre,
},
zoom: { interactive: true },
pan: { interactive: true },
};
$.plot('#flot_plot',
series,
options);

jQplot line plot starts from x=0

I would like to create a line plot for a vector of y values. In the default situation, x should starts from 1. I am wondering is there a way to let x values start from 0?
Below is my code and demo:
$(document).ready(function() {
var s= [12, 45, 89, 181, 111, 147, 116]
$.jqplot('chart1', [s], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
pad: 0
}
},
legend: {
show: true,
location: 'nw',
placement: 'inside',
fontSize: '11px'
}
})
})
​

Edit: it is also necessary to set the data of x.
Here is the demo.

In the first paragraph of this link the author mentions that for what you are trying to achieve, you need an array of x,y data points (the ordered pairs themselves must be arrays too). So in your specific case this should give the desired effect:
var s= [[0, 12], [1, 45], [2, 89], [3, 181], [4, 111], [5, 147], [6, 116]];
For larger arrays of ordered pairs you can use a for loop to generate the ordered pair-arrays.