I have a problem when I use Flot
I notice that it happens at the same minute but different second
2018/10/16 13:12:55 71.755
2018/10/16 13:12:09 71.700
2018/10/16 13:10:52 70.781
Here is my configuration:
//Display graph
$.plot($("#data-chart"), ds, {
colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: $chrt_border_color,
borderWidth: 0,
borderColor: $chrt_border_color
},
zoom: {
interactive: true
},
pan: {
interactive: true
},
selection: {
mode: "xy"
},
xaxis: {
ticks: 5,
mode: "time",
timeformat: "%d/%m/%y",
},
yaxis: {
min: 0,
ticks: 5,
max: 110,
panRange: [-10000, 10000]
},
tooltip: true,
legend: {
show: true,
noColumns: 4, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#000", // border color for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to avoid background
},
tooltipOpts: {
content: "<b>Date: %x</b> = <span>%y.3</span>",
dateFormat: "%d/%m/%y %H:%M:%S",
defaultTheme: false
},
});
Can someone help me?
Related
I am having an issue with jqplot where stacked bars are sometimes displaying a bar for 0. I don't want a bar for 0. All of the numbers associated with each bar add up to the max. Here is what I am seeing.
Stacked bars with 0 labels removed
The problem is with MS/AL (27 stops). There is a blue bar, but that bar represents 0. This doesn't always happen though. There is actually a third color that could show in the bar, but none of this example shows it.
Here is an example with point labels showing the 0 (instead of hideZeros:true) just to prove that 0 is causing a bar to render.
Stacked bars with labels for 0s
Here is my javascript:
$.jqplot(div_id, customer_amount, {
title:{
text: v.truck_label+' ('+v.count+' stops)',
textAlign: 'left'
},
animate: true,
stackSeries: true,
axesDefaults:{
showTicks: false,
tickOptions:{
show: false,
showTicks: false,
showGridline: false
},
rendererOptions: {
baselineWidth: 1.5,
drawBaseline: false
}
},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
highlightMouseOver: false,
//shadow: false
shadowAngle: 35,
shadowAlpha: 0.1,
shadowDepth: 4
},
pointLabels: {
show: true,
formatString: '%d',
hideZeros:true
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
showTicks: false,
ticks: [''],
tickOptions:{
show: false,
showGridline: false
}
},
xaxis: {
max: max,
showTicks: false,
tickOptions:{
show: false,
showGridline: false
}
}
},
grid: {
drawGridLines: false,
drawBorder: false,
shadow: false,
borderColor: 'transparent',
background: 'transparent'
},
seriesColors: series_colors
});
Does anybody know what is happening? Any suggestions?
See the working fiddle...
var options = {
title: 'Title ',
stackSeries: true,
seriesColors: ["#eb4b3d", "#ffc800", "#009149"],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
hideZeros: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
// renderer: $.jqplot.CategoryAxisRenderer,
//
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min: 0,
tickInterval: 5,
max: 50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
http://jsfiddle.net/arzv5j6o/3/
I'm using http://www.flotcharts.org/. Why do my grid lines disappear?
Here is code for my plot options:
var options = {
grid: {
markings: EVS,
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 1,
fillColor: {
colors: [{
opacity: 1
}, {
opacity: 1
}]
}
}
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)", "rgba(255, 255, 255, 1)"],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15
},
labelHeight: 15,
tickLength: 5
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10
},
max: vmax + 20,
min: 0,
minTickSize: 1,
tickSize:20,
tickLength: 10
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60
},
tooltip: true,
tooltipOpts: {
id: 'flotTip', //"flotTip"
content: '%x : %y km/h', //"%s | X: %x | Y: %y"
shifts: {
x: 10, //10
y: 20 //20
},
defaultTheme: true, //true
lines: {
track: true, //false
threshold: 0.01 //0.05
},
onHover: function (flotItem, $tooltipEl) {
if (flotItem.seriesIndex == 1) $tooltipEl[0].innerHTML = "Postój";
}
}
};
I just want simple yaxis lines.
PS. The crosshair is from the crosshair plugin.
Don't set the tickLength option if you want to have the lines at the ticks. Flot doesn't have "grid lines" per se, but tick lines which can run through the grid. If you only want them on one axis, set the option on one axis but not the other.
From the documentation (emphasis mine):
"tickLength" is the length of the tick lines in pixels. By default, the innermost axes will have ticks that extend all across the plot, while any extra axes use small ticks. A value of null means use the default, while a number means small ticks of that length - set it to 0 to hide the lines completely.
I'm having problems with the formatting of the following flot chart:
I want my second series (gray) straight, just as square. It should start from 682 and end in 683. How to solve it?
Options for my flot:
var options = {
grid: {
clickable: true,
hoverable: true
},
series: {
lines: {
show: true,
fill: true,
lineWidth: 0,
fillColor: { colors: [{opacity: 1 }, { opacity: 1}] },
},
},
colors: ["rgba(41, 150, 206, 0.9)", "rgba(67, 90, 110, 0.4)",],
crosshair: {
mode: "xy",
color: "#323232",
lineWidth: 1,
},
xaxis: {
mode: mode,
show: true,
position: "bottom",
color: "#323232",
font: {
size: 10,
lineHeight: 15,
},
labelHeight: 15,
},
yaxis: {
show: true,
position: "left",
color: "#323232",
labelWidth: 20,
font: {
size: 10,
},
max: 150,
min: 0,
},
pan: {
interactive: true,
cursor: "move",
frameRate: 60,
},
tooltip: true,
tooltipOpts: {
id: 'flotTip',
content: '%x : %y km/h',
shifts: {
x: 10,
y: 20,
},
defaultTheme: true,
lines: {
track: false,
threshold: 0.05,
},
}
};
If you have zero values outside the range where your data has non-zero values the graph will connect those (valid) datapoints with diagonal lines. If you want to end the graph at a specific point change the values after that point to null.
This is described in the documentation:
If a null is specified as a point or if one of the coordinates is null or couldn't be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected.
I am using the jqPlot chart in one of my project.
I am creating the chart same as like below.
http://i.stack.imgur.com/p8QiA.jpg
The charts are working fine, but the line chart values should not get stack. But, in my code, the line series values also getting stacked.
For Example: Over all Stacked bar chart value is 10, the line chart value is 50. But, In my scenario the line chart value is plotting at the position 60 instead of 50.
My Code is below.
plot = $.jqplot(chartId, [d1, d2, d3], {
seriesColors: ["#d82b25", "#707b7f", "#083a6d"],
title: titles,
stackSeries: true,
animate: true,
animateReplot: true,
cursor: {
style: 'pointer',
show: true,
zoom: false,
looseZoom: false,
showTooltip: false
},
series:[
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 0,
highlightMouseOver: false
}
},
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 20,
highlightMouseOver: false
}
},
{
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
],
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 2
},
location: 's',
placement: 'outside',
labels: types,
yoffset: 52
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
tickOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
pad: 0
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
drawMajorGridlines: false,
tickOptions:{
renderer: $.jqplot.CategoryAxisRenderer,
angle:-90
}
},
yaxis: {
showGridline: false,
tickOptions: {
formatString: "%.1f"
},
rendererOptions: {
forceTickAt0: true
},
label:'Volume($ Billions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
y2axis: {
showGridline: false,
tickOptions: {
show: true,
formatString: "%.1f"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
},
label:'US($ Millions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
grid:{
background: '#ffffff',
borderColor: '#333333',
borderWidth: 1.0,
gridLineColor: '#575757'
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5,
tooltipLocation : 'ne'
}
});
Please kindly some one help me to solve this.
Thanks in advance...
If to look at the source code of the jqPlot framework and search for stackSeries line, you can find that it is used so:
if (this.stackSeries && !series.disableStack)
And according to the documentation the disableStack property is what you need.
true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array.
Your line non-stacked series is placed after the bar stacked series, so this parameter will work properly. Use it so:
series:[
{ //...
},
{ // ...
},
{
disableStack: true,
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
]
Im trying to get my bar chart to display the a simple series of data.
Its displaying the data correctly however it is filling up the grid with zero values of data that does exist between the range.
See the image.
$.plot($('#somediv'), result, {
lines: {
show: false
},
bars: {
barWidth: 12,
horizontal: false,
align: "center",
show: true,
zero:false,
fill:true,
fillColor:'#fefefe',
},
points: {
show: false,
symbol: "circle",
fill: false
},
grid: {
hoverable: true,
backgroundColor: '#fefefe',
borderColor: '#eee',
borderWidth: 1,
clickable: true
},
series: {
lines: {
show: false,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
mode: null,
},
yaxis: {
min: 0
},
selection: {
mode: "y"
},
});
and here is the data
[{"label":"Sales","data":[["180","23"],["3","12"],["183","10"],["154","5"],["239","4"]]}]
and here is the result in the screenshot.
The data series on the bottom is the product ID, the y axis is the # of Sales of each product
What I want is that each tick shows 1 bar, but I cant understand the documentation from
https://github.com/flot/flot/blob/master/API.md
Flot isn't filling the grid with nulls; it is correctly plotting the x-values - 180, 3, 183, etc. that you gave it. If those values don't actually correspond to positions on an axis, you should simply use 1, 2, 3, ... instead.