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.
Related
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?
Using Highcharts 5.0.11 .JS version and Solid Gauge.
Page has two temperature Gauges which are going to be half crescent in shape.
The first Gauge Internal Temperature is fine, but when trying to play with settings to create an inverse Gauge the chart stops displaying ticks and labels associated to them as shown below along with link to my fiddle. The key thing I have found is that when ever the start angle is higher than the end angle this is the result and the problem occurs.
JS Fiddle Here to show Code for above
HTML
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.js"></script>
<!--Temperature Block-->
<div style="width: 600px; height: 200px; margin: 0 auto; background-color: black;">
<div id="containerinternalTemp" style="width: 200px; height: 200px; float: left"></div>
<div id="containerexternalTemp" style="width: 200px; height: 200px; float: left"></div>
</div>
JavaScript
$(function() {
// Temperature Guage Options
var temperatureGaugeOptions = {
chart: {
backgroundColor: null,
type: 'solidgauge'
},
title: null,
pane: {
size: '90%',
background: {
backgroundColor: 'white',
innerRadius: '93%',
outerRadius: '102%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
// the value axis
yAxis: {
stops: [
[0, '#045ce2'],
[0.1, '#045ce2'],
[0.2, '#045ce2'],
[0.25, '#045ce2'],
[0.3, '#0489e2'],
[0.4, '#0489e2'],
[0.5, '#04cbe2'],
[0.52, '#04cbe2'],
[0.521, '#f9c527'],
[0.6, '#f9a426'],
[0.7, '#f98826'],
[0.8, '#f95e26'],
[0.9, '#f95e26']
],
lineWidth: 0,
minorTickInterval: 5,
tickPixelInterval: 50,
tickWidth: 1,
labels: {
style: {
color: 'white'
},
enabled: true,
distance: 12,
useHTML: true
}
},
plotOptions: {
solidgauge: {
innerRadius: '95%',
dataLabels: {
x: -20,
y: 35,
borderWidth: 0,
useHTML: true
}
}
}
};
// Internal Temperature
$('#containerinternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
yAxis: {
min: -15,
max: 40,
},
pane: {
startAngle: -180,
endAngle: 0,
},
series: [{
name: 'inTemp',
data: [13],
dataLabels: {
style: {
color: 'orange',
},
format: '<div style="text-align:center"><span style="font-size:25px;">{y}°C</span><br/>' + '<span style="font-size:10px;color:white">Internal</span></div>'
}
}]
}));
// External Temperature
$('#containerexternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
yAxis: {
min: -15,
max: 40,
},
pane: {
startAngle: 180,
endAngle: 0
},
series: [{
name: 'exTemp',
data: [5],
dataLabels: {
style: {
color: 'orange',
},
format: '<div style="text-align:center"><span style="font-size:25px;">{y}°C</span><br/>' + '<span style="font-size:10px;color:white">External</span></div>'
}
}]
}));
});
I have tried various settings and the closest results I can achieve is below using the reversed:true option and having the start angle lower than the end angle, the only problem being that the plot line is drawn from a start point of 40. I require it to start from -15 and draw up to 5.
Js Fiddle for second result
Javascript - The only change is the reversed: true added on the yAxis and the start and end angle for the pane.
// External Temperature
$('#containerexternalTemp').highcharts(Highcharts.merge(temperatureGaugeOptions, {
yAxis: {
min: -15,
max: 40,
reversed: true
},
pane: {
startAngle: 0,
endAngle: 180
},
series: [{
name: 'exTemp',
data: [5],
dataLabels: {
style: {
color: 'orange',
},
format: '<div style="text-align:center"><span style="font-size:25px;">{y}°C</span><br/>' + '<span style="font-size:10px;color:white">External</span></div>'
}
}]
}));
I have searched and found an issue from 2015 with Solid Gauge charts HERE and trying to do what I have done. This issue looks to have been fixed and I can not find anything else to show this being an outstanding problem with Highcharts platform.
Many thanks in advance from anyone who takes the time to read and review this question.
It looks like it is a problem with automating calculation of the tick positions when endAngle is greater than startAngle. You can force the tick positions by setting axis tickPositions or tickPositioner. In your case, you can grab the tick positions from the first gauge chart in the tick positioner callback.
yAxis: {
min: -15,
max: 40,
// reversed: true
tickPositioner: function() {
var tickPositions = $('#containerinternalTemp').highcharts().yAxis[0].tickPositions
return tickPositions;
}
example: http://jsfiddle.net/egr0ge11/
Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);
There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.
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 flot chart for charts. Please find following...
js array
data_visits = [
[new Date('06/02/2014 01:00').getTime(), 100],
[new Date('06/05/2014 10:00').getTime(), 200],
[new Date('06/10/2014 13:00').getTime(), 300],
[new Date('06/15/2014 15:00').getTime(), 400],
];
chart code
if($('#flot_overview').length) {
var chart_placeholder = $('#flot_overview');
var options = {
grid: {
clickable: true,
hoverable: true,
autoHighlight: true,
backgroundColor: null,
borderWidth: 0,
color: "#666",
labelMargin: 10,
axisMargin: 0,
mouseActiveRadius: 10,
minBorderMargin: 5
},
series: {
lines: {
show: true,
lineWidth: 2,
steps: false,
fill: true
},
points: {
show:true,
radius: 4,
symbol: "circle",
fill: true
}
},
tooltip: true,
tooltipOpts: {
content: "<span style='display:block; padding:7px;'>%x - <strong style='color:yellow;'>%y</strong></span>",
xDateFormat: "%b %d, %Y %H:%M",
shifts: {
x: 20,
y: 0
},
defaultTheme: false
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeformat: '%H:%M',
labelWidth: "40"
},
yaxis: { min: 0 },
legend: {
noColumns: 0,
position: "ne"
},
colors: ["#0892cd"],
shadowSize: 0
};
$.plot(chart_placeholder,[{
label: "Click / Visits",
data: data_visits,
points: {fillColor: '#fff'},
lines: {fillColor: 'rgba(8,146,205,.2)'}
}],options);
}
It generates chart properly and shows correct time in tooltip, but it does not show correct time in xAxis as per my settings, it always show 00:00 for all xaxis if i use timeformat: '%H:%M' it works fine if i format this as date.
Please help, thanks.
Since your data spans multiple days, flot is logically placing the tick marks at the start each day. This means that with a time format of '%H:%M', you then get 0:00.
In my mind something like this makes a lot more sense for you data.