I'm trying to do a Flot multiline (with multiple y axes) with labels in all values, but I can't do it...
My code is:
HTML:
<div id="placeholder-bar-chart" class="mychart"></div>
JAVASCRIPT:
var d1 = [[1456531200000,14.46],[1456704000000,11.07],[1456790400000,13.12],[1456876800000,10.8],[1457049600000,16.51]];
var d2 = [[1456617600000,"1"]];
var data1 = [
{
label: "Values",
yaxis: 1,
data: d1
}, {
label: "Events",
data: d2,
yaxis: 2,
points: {show: true,
radius: 6}
}];
var ticks = [[0,""],[1, "Event1"],[2, "Event2"],[3, "Event3"]];
var p = $.plot($("#placeholder-bar-chart"), data1, {
xaxis: {
mode: "time",
tickSize: [1, "day"],
tickLength: 0,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
axisLabelPadding: 5
},
yaxes: [
{
position: "left",
color: "black",
},
{
position: "right",
ticks: ticks,
color: "black",
}],
grid: {
hoverable: true,
clickable: false,
borderWidth: 0,
borderColor:'#f0f0f0',
labelMargin:8,
},
legend: {
show: true,
noColumns: 2
}
});
$.each(p.getData()[0].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '</div>').css( {
position: 'absolute',
left: o.left + 4,
top: o.top - 43,
display: 'none'
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
$.each(p.getData()[1].data, function(i, el){
var o = p.pointOffset({x: el[0], y: el[1]});
$('<div class="data-point-label">' + el[1] + '</div>').css( {
position: 'absolute',
left: o.left + 4,
top: o.top - 43,
display: 'none'
}).appendTo(p.getPlaceholder()).fadeIn('slow');
});
And I get this graphic:
It would be possible to put the labels on all points?
I'd like to put on events values the corresponding tick label.
http://jsfiddle.net/gaia/8v55wzjc/117/
You need to specify the yaxis for which the coordinates are calculated in the pointOffset function like described in the documentation. For the event label(s) use:
var o = p.pointOffset({x: el[0], y: el[1], yaxis: 2});
Updated fiddle.
Related
I need to create a div container for a highcharts graphic. This should be done by means of code, but I can not make it work.
The reason to create divs by code is because I have to show many graphics.
Currently I first create the div, then the id and finally the properties.
Error on graphic:
Example :
http://jsfiddle.net/povyq7em/1/
My code is:
var nombre="container-speed";
var div = document.createElement('div');
div.setAttribute("style", "width: 580px; height: 400px; float: left");
div.setAttribute("id", nombre);
var gaugeOptions = {
chart: {
type: 'solidgauge'
},
title: null,
pane: {
center: ['50%', '85%'],
size: '140%',
startAngle: -90,
endAngle: 90,
background: {
backgroundColor: (Highcharts.theme &&
Highcharts.theme.background2) || '#EEE',
innerRadius: '60%',
outerRadius: '100%',
shape: 'arc'
}
},
tooltip: {
enabled: false
},
yAxis: {
stops: [
[0.1, '#55BF3B'], // green
[0.5, '#DDDF0D'], // yellow
[0.9, '#DF5353'] // red
],
lineWidth: 0,
minorTickInterval: null,
tickAmount: 2,
title: {
y: -70
},
labels: {
y: 16
}
},
plotOptions: {
solidgauge: {
dataLabels: {
y: 5,
borderWidth: 0,
useHTML: true
}
}
}
};
var chartSpeed = Highcharts.chart(nombre, Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: 200,
title: {
text: 'Speed'
}
},
credits: {
enabled: false
},
series: [{
name: 'Speed',
data: [80],
dataLabels: {
format: '<div style="text-align:center"><span style="font-size:25px;color:' +
((Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black') + '">{y}</span><br/>' +
'<span style="font-size:12px;color:silver">km/h</span></div>'
},
tooltip: {
valueSuffix: ' km/h'
}
}]
}));
.highcharts-yaxis-grid .highcharts-grid-line {
display: none;
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<!--<div id="container-speed" style="width: 300px; height: 200px; float: left"></div>-->
Thank you very much for your help.
You're just missing one step. You need to append the element after you create it. Here's the beginning of your code:
var nombre="container-speed";
var div = document.createElement('div');
div.setAttribute("style", "width: 580px; height: 400px; float: left");
div.setAttribute("id", nombre);
// APPEND ELEMENT TO document.body
document.body.appendChild(div);
Also, I updated your fiddle
Per your request, I updated the fiddle once more. I made 3 changes. Only one of which were really important.
declare and value name to be used as element id and as argument for grafica()
var name = "chart-" + i;
alter setAttribute to div.setAttribute("id", name);
***MOST IMPORTANTLY, you changed the variable nombre to name in every place but here var chartSpeed = Highcharts.chart(name, Highcharts.merge(gaugeOptions, {... which you can tell, I've updated.
I'm having trouble on reload chart with updated details, I'm showing graph based on user activity on daily basis, on initial load with preset values the graph is formed precisely
Here I'm using flot chart library, in that flot chart library I'm using line graph
This is initial graph
But when I use custom values instead of loading a new graph with updated values, the custom values is get appended to the right end of x-axis on the graph.
When I use the custom values, the graph looks like,
In second graph, the included data will added to its old data at right side instead of showing it in correct order
here is my code for first graph, input data in vm.allsessionReport
input data will get by programmatic
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};
code for my second graph, input data has changed to
vm.allSessionReport = [];
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
vm.allSessionReport = [
["2017-06-28", 0],
["2017-06-29", 0],
["2017-06-30", 0],
["2017-07-01", 0],
["2017-07-02", 0],
["2017-07-03", 0],
["2017-07-04", 17],
["2017-07-05", 0],
["2017-07-06", 0],
["2017-07-07", 0]
]
vm.sessionData = [{
"color": "#7dc7df",
"data": vm.allSessionReport
}];
console.log('session data 2nd', vm.sessionData)
vm.sessionOptions = {
series: {
lines: {
show: true,
fill: 0.01
},
points: {
show: true,
radius: 4
}
},
grid: {
borderColor: '#eee',
borderWidth: 1,
hoverable: true,
backgroundColor: '#fcfcfc'
},
tooltip: true,
tooltipOpts: {
content: function (label, x, y) { return x + ' : ' + y; }
},
xaxis: {
position: ($scope.app.layout.isRTL ? 'top' : 'bottom'),
tickColor: '#eee',
mode: 'categories'
},
yaxis: {
position: ($scope.app.layout.isRTL ? 'right' : 'left'),
tickColor: '#eee'
},
shadowSize: 0
};
I've seen tutorials and posts about getting data from the x axis into the tooltip but I am overriding it with categories and cannot figure out how to get the x axis to show up in the tooltip.
This is what im working with:
function showTooltip(x, y, contents) {
$('<div id="tooltip" class="flot-tooltip tooltip"><div class="tooltip-arrow"></div>' + contents + '</div>').css({
top: y - 43,
left: x - 15,
}).appendTo("body").fadeIn(200);
}
var data = [[1492854610, -1240],[1492939020, -1273],[1493025073, -1279],[1493117066, -1186],[1493198484, -1269],[1493289175, -1198],[1493370646, -1280],[1493458518, -1255],[1493543731, -1275],[1493630250, -1273],[1493716306, -1279],[1493803609, -1264],[1493889258, -1276],[1493975557, -1278],[1494064529, -1235],[1494155440, -1160],[1494237980, -1224],[1494321047, -1280],[1494407990, -1271],[1494494125, -1275],[1494581609, -1257],[1494668321, -1252],[1494753220, -1277],[1494847855, -1140],[1494925963, -1278],[1495012537, -1275],[1495099289, -1269],[1495188205, -1227],[1495273568, -1244],[1495358329, -1272]];
$.plot($("#placeholder"), [{
label: "Delay: ",
data: data,
color: "#3a8ce5"
}], {
xaxis: {
mode: "categories",
tickLength: 0,
ticks: [[0, "1:50 AM"],[1, "1:17 AM"],[2, "1:11 AM"],[3, "2:44 AM"],[4, "1:21 AM"],[5, "2:32 AM"],[6, "1:10 AM"],[7, "1:35 AM"],[8, "1:15 AM"],[9, "1:17 AM"],[10, "1:11 AM"],[11, "1:26 AM"],[12, "1:14 AM"],[13, "1:12 AM"],[14, "1:55 AM"],[15, "3:10 AM"],[16, "2:06 AM"],[17, "1:10 AM"],[18, "1:19 AM"],[19, "1:15 AM"],[20, "1:33 AM"],[21, "1:38 AM"],[22, "1:13 AM"],[23, "3:30 AM"],[24, "1:12 AM"],[25, "1:15 AM"],[26, "1:21 AM"],[27, "2:03 AM"],[28, "1:46 AM"],[29, "1:18 AM"]]
},
yaxis: {
min: -2000,
max: 1000,
},
series: {
lines: {
show: true,
fill: true
},
points: {
show: true,
}
},
grid: {
hoverable: true,
clickable: true,
markings: [
{ color: '#000', lineWidth: 1, yaxis: { from: 0, to: 0 } },
]
},
legend: {
show: false
}
});
$("#placeholder").bind("plothover", function(event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$("#tooltip").remove();
var y = item.datapoint[1].toFixed();
showTooltip(item.pageX, item.pageY,
item.series.label + " = " + y);
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
I am trying to get the times part of the categories. The item array has 3 pieces of data, none of which are the times
jFiddle:
http://jsfiddle.net/zw14y8c3/2/
The item.datapoint[0] data has the index of the x-axis tick. With that you can get the actual tick label from the ticks array:
var x = $("#placeholder").data('plot').getAxes().xaxis.ticks[item.datapoint[0]].label;
See the updated fiddle for the full example.
I am trying to show time intervals between Min and Max of a certain time range. Eg: 2015-04-30 10:20:00 and 2015-04-30 10:30:00 on x axis
I will be fetching all the values from database(which has datetime stored in 2015-04-30 10:27:58 format and passing it through webmethod.
If I create var data1 as
var data1 = [
['2015-04-30 10:27:58', 1690.25], ...
];
It won't work. So I am guessing I would need to convert '2015-04-30 10:27:58'milisecond ticks when creating var data1.
But I do not want to display time in a proper time format such as 10:27:58 instead of 1430369878000 on xaxis. (I want exclude date part).
How can I achieve this?
//RED
var data1 = [
[1430369878000, 1690.25], [1430369879000, 1696.3], [1430369880000, 1659.65]
];
//BLUE
var data2 = [
[1430369878000, 1682.1], [1430369879000, 1680.65], [1430369880000, 1685.1]
];
var dataset = [
{
label: "Sell out",
data: data1,
color: "#FF0000",
points: { fillColor: "#FF0000", show: true },
lines: { show: true }
},
{
label: "Buy in",
data: data2,
color: "#0062E3",
points: { fillColor: "#0062E3", show: true },
lines: { show: true }
}
];
var options = {
series: {
shadowSize: 5
},
xaxes: { mode: "time",
min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
timeformat: "%H/%M/%S"
},
yaxis: {
color: "black",
tickDecimals: 2,
axisLabel: "Gold Price in USD/oz",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 6
},
legend: {
noColumns: 0,
labelFormatter: function (label, series) {
return "<font color=\"white\">" + label + "</font>";
},
backgroundColor: "#000",
backgroundOpacity: 0.9,
labelBoxBorderColor: "#000000",
position: "nw"
},
grid: {
hoverable: true,
borderWidth: 3,
mouseActiveRadius: 50,
backgroundColor: { colors: ["#ffffff", "#EDF5FF"] },
axisMargin: 20
}
};
$(document).ready(function () {
setInterval(function () {
$.plot($("#flot-placeholder"), dataset, options);
$("#flot-placeholder").UseTooltip();
}, 1000)
});
var previousPoint = null, previousLabel = null;
$.fn.UseTooltip = function () {
$(this).bind("plothover", function (event, pos, item) {
if (item) {
if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
previousPoint = item.dataIndex;
previousLabel = item.series.label;
$("#tooltip").remove();
var x = item.datapoint[0];
var y = item.datapoint[1];
var date = new Date(x);
var color = item.series.color;
showTooltip(item.pageX, item.pageY, color,
"<strong>" + item.series.label + "</strong><br>" +
x +
" : <strong>" + y + "</strong> (USD/oz)");
}
} else {
$("#tooltip").remove();
previousPoint = null;
}
});
};
function showTooltip(x, y, color, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'none',
top: y,
left: x,
border: '2px solid ' + color,
padding: '3px',
'font-size': '9px',
'border-radius': '5px',
'background-color': '#fff',
'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
opacity: 0.9
}).appendTo("body").fadeIn(200);
}
The options for the x-axis are under the name xaxes not xaxis therefore they are not used. (Also your min and max values are outside of the data range.)
// not xaxes:
xaxis: {
mode: "time",
//min: parseInt((new Date("2015-04-30 10:27:58")).getTime()),
//max: parseInt((new Date("2015-04-30 10:43:39")).getTime()),
timeformat: "%H/%M/%S"
},
See this fiddle for a working example.
PS: You use the $.plot() function with setInterval which is okay but you should only call UseTooltip() once.
I have a chart with ordering by date.
My problem is the chart lines joining false from start to end.
My options:
var options =
{
grid:
{
color: "#dedede",
borderWidth: 1,
borderColor: "transparent",
clickable: true,
hoverable: true
},
series: {
grow: {active:false},
lines: {
show: true,
fill: false,
lineWidth: 2,
steps: false
},
points: {
show:true,
radius: 5,
lineWidth: 3,
fill: true,
fillColor: "#000"
}
},
legend: { position: "nw", backgroundColor: null, backgroundOpacity: 0, noColumns: 2 },
yaxis: { tickSize:50 },
xaxis: {
mode: "time",
tickFormatter: function(val, axis) {
var d = new Date(val);
return d.getUTCDate() + "/" + (d.getUTCMonth() + 1);
}
},
colors: [],
shadowSize:1,
tooltip: true,
tooltipOpts: {
content: "%s : %y.0",
shifts: {
x: -30,
y: -50
},
defaultTheme: false
}
};
Note: I'm not re-ordering any data. Just giving the timestamp with this function:
function gd(year, month, day) {
return new Date(year, month - 1, day).getTime();
}
Setting the data like this:
$.each(e.data, function(i, e){
data.push([gd(parseInt(e['year']), parseInt(e['month']), parseInt(e['day'])), parseInt(e['value'])]);
});
var entity = {
label: e.campaign,
data: data,
lines: {fillColor: randomColor},
points: {fillColor: randomColor}
};
entities.push(entity);
Console log:
When creating line charts, flot will connect the data points using the order from the data series, ignoring the actual x-coordinates. That's why data series should be in ascending order.
A minimal example (using your data in ascending order):
var d1 = [
[1401310800000, 275],
[1401397200000, 270],
[1401483600000, 313],
[1401570000000, 279],
[1401656400000, 216],
[1401742800000, 255],
[1401829200000, 244],
[1401915600000, 70]
];
$.plot("#chart", [ d1 ]);
Here is a jsfiddle showing the chart.