Related
I am trying to plot a flot graph, but the date won't show. I do have flot.time loading and the time stamps are correct as I validated them. Can anyone see anything wrong with the code. The graph plots perfectly, but it shows the time stamp instead of the date.
if ($("#site-stats").length) {
var companies = [[1534892400000,4], [1534978800000,1], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,3], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,1], [1536361200000,0], [1536447600000,0], [1536534000000,4], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var users = [[1534892400000,6], [1534978800000,8], [1535065200000,1], [1535151600000,0], [1535238000000,0], [1535324400000,1], [1535410800000,5], [1535497200000,3], [1535583600000,2], [1535670000000,4], [1535756400000,1], [1535842800000,3], [1535929200000,2], [1536015600000,1], [1536102000000,1], [1536188400000,1], [1536274800000,2], [1536361200000,0], [1536447600000,0], [1536534000000,5], [1536620400000,0], [1536706800000,0], [1536793200000,0], [1536879600000,0], [1536966000000,0], [1537052400000,0], [1537138800000,0], [1537225200000,0], [1537311600000,0], [1537398000000,0], ];
var plot = $.plot($("#site-stats"), [{
data : companies,
label : "Company Registrations"
}, {
data : users,
label : "User Registrations"
}], {
series : {
lines : {
show : true,
lineWidth : 1,
fill : true,
fillColor : {colors : [{ opacity : 0.1}, {opacity : 0.15}]}
},
points : {show : true},
shadowSize : 0
},
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
yaxes : [{
min : 0,
tickLength : 2
}],
grid : {
hoverable : true,
clickable : true,
tickColor : $chrt_border_color,
borderWidth : 0,
borderColor : $chrt_border_color,
},
tooltip : true,
tooltipOpts : {
content : "Your sales for <b>%x</b> was <b>%y</b>",
dateFormat : "%y-%0m-%0d",
defaultTheme : false
},
colors : [$chrt_main, $chrt_second],
xaxis : {
ticks : 10,
tickDecimals : 0
},
yaxis : {
ticks : 20,
tickDecimals : 0
},
});
}
});
You have two xaxis properties in your options object:
xaxis : {
mode : "time",
dateFormat : "%y-%0m-%0d"
},
and
xaxis : {
ticks : 10,
tickDecimals : 0
},
The second overwrites the first one with the time format. Put them together and it works fine (see this fiddle):
xaxis: {
mode: "time",
dateFormat: "%y-%0m-%0d",
ticks: 10,
tickDecimals: 0
},
I have to set up a graph for a web application, and I decided to use Highcharts because it seems to be the most flexible. I managed to create what I wanted, but I can't do it in one graphic, I have to create two.
My goal is to have a bar graph, with negative values on the left and positive values on the right, and category names in the middle (and being able to place HTML in it but it's secondary).
Here is the link to what I have today:
$(function() {
Highcharts.setOptions({
chart : {
type : 'bar'
},
title : { text : '' },
subtitle : { text : '' },
plotOptions : {
bar : { dataLabels : { enabled : true }}
},
legend : { enabled : false },
credits : { enabled : false },
yAxis : {
title : false,
opposite : true
},
xAxis : {
categories : ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels : { format : "" },
type : "category",
visible : false,
title : false,
showEmpty: false,
reversed : true
}
});
// Graphique gauche (négatifs)
var leftChart = new Highcharts.Chart({
chart: { renderTo: 'gphLeft' },
yAxis: { reversed : false },
xAxis: { opposite : true },
series : [{
data : [null, -150, null, null, -680]
}]
});
// Graphique droite (positifs)
var rightChart = new Highcharts.Chart({
chart: { renderTo: 'gphRight' },
yAxis: { reversed : false },
xAxis: { opposite : false },
series : [{
data : [180, null, 258, 487, null]
}]
});
});
I have tried different techniques and answers found on the Internet, but I can't find a solution.
(I hope you understand, because I use a translator)
Can somebody help me?
I use Zingchart to plot some log Data therefore I need to display every single point in the graph. I activated the points attribute in the json(see
$scope.graphoptions = {
theme:"dark",
"gui":{
behaviors:[]
},
globals: {
shadow: false,
fontFamily: "Helvetica"
},
type: "line",
plot: {
aspect: "segmented",
marker: {}
},
"legend":{
margin :"5% 88%",
layout: "float",
fontSize : "10px",
backgroundColor: "#888888",
borderColor : "#000000",
shadowColor : "transparent",
toggleAction: "hide",
item: {
markerStyle : "circle",
fontColor: "#ffffff"
},
},
scaleX: {
zooming: true,
item: {
fontColor: "white"
},
guide: {
visible: false
},
"transform": {
"type": "date",
"all": "%G:%i",
}
},
"scaleY": {
zooming:true,
lineColor : "#DDD",
tick : {
lineColor : "#DDD"
},
item : {
fontColor : "#DDD"
},
refLine : {
lineColor : "#DDD"
},
},
tooltip : {
//we have to store the tooltip fkt globally so its ouside angulars
//scope thatswhy we have to pass the data to the function
jsRule : "applyTooltip("+$scope.fileName+")",
shadow:false
},
plotarea: {
"adjust-layout":true,
backgroundColor : '#272822'
},
}
for full json).
As you can see in this screenshot
Some points of the read Graph are drawn but none of the blue one.
When I zoom in:
Some markers of the Blue graph are displayed.
Is this a bug or do I have to activate an other attribute in the json I am not aware of.
Thanks in advance!
Assuming that your data is supposed to plot on those points, then you would need to increase the number of default markers drawn on the plot. By default, ZingChart calculates this number based upon the number of points, and the width of a chart.
maxNodes: N where N is the maximum amount of nodes you want displayed at a given point. e.g. maxNodes: 1000
If tooltips are important at a fine resolution, you would need to also change maxTrackers: N, where N is the amount of nodes to track for a tooltip. Do note that this will decrease performance heavily depending on the number of nodes to track. e.g. maxTrackers: 1000
I am working on an application where I am trying to plot a similar graph to what is plotted at Open Weather. I am using the FlotJS library to query their API and plot the graphs.
Here is my code. I apologize for the verbosity.
/*
* RUN PAGE GRAPHS
*/
// load all flot plugins
loadScript("js/plugin/flot/jquery.flot.cust.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.resize.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.time.min.js", function(){
loadScript("js/plugin/flot/jquery.flot.tooltip.min.js", generatePageGraphs);
});
});
});
function generatePageGraphs(){
var fetchWeatherUrl = '//api.openweathermap.org/data/2.5/forecast?lat=' + farmLat + '&lon=' + farmLng;
$.ajax({
method: 'get',
dataType: "jsonp",
url: fetchWeatherUrl,
success: function(response){
var temp = [];
var humidity = [];
var rain = [];
$.each(response.list, function(i, item){
if(moment(item.dt, 'X').isSame(moment(), 'day')){
var temperature = ( ( parseFloat(item.main.temp)-273.15 )*1.80 ).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), temperature]);
humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.main.humidity)]);
if(item.rain != undefined){
rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain["3h"])]);
}
}
});
var mainWeatherGraphData = [{
label: "Temperature",
data: temp,
lines: {
show: true
},
points: {
show: true
}
},
{
label: "Humidity",
data: humidity,
lines: {
show: true
},
points: {
show: true
},
yaxis: 2
},
{
label: "Rain",
data: rain,
bars: {
show: true,
barWidth: 1000*60*30,
align: 'center'
},
yaxis: 3
}];
var mainWeatherGraphOptions = {
xaxis : {
mode : "time",
},
yaxes : [
{
position: 'left'
},
{
position: 'right'
},
{
position: 'right'
}
],
tooltip : true,
tooltipOpts : {
content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>",
dateFormat : "%y-%m-%d",
defaultTheme : false
},
legend : {
show : true,
noColumns : 1, // 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 : [0, 5], // distance from grid edge to default legend container within plot
backgroundColor : "#efefef", // null means auto-detect
backgroundOpacity : 0.4 // set to 0 to avoid background
},
grid : {
hoverable : true,
clickable : true
}
};
var mainWeatherGraph = $.plot($("#mainWeatherGraph"), mainWeatherGraphData, mainWeatherGraphOptions);
}
});
// Daily forecast
fetchForecastUrl = 'http://api.openweathermap.org/data/2.5/forecast/daily?lat=' + farmLat + '&lon=' + farmLng;
$.ajax({
method: 'get',
dataType: "jsonp",
url: fetchForecastUrl,
success: function(response){
var temp = [];
var humidity = [];
var rain = [];
$.each(response.list, function(i, item){
var temperature = ( ( parseFloat(item.temp.day)-273.15 )*1.80 ).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), temperature]);
humidity.push([moment(item.dt, 'X').valueOf(), parseFloat(item.humidity)]);
if(item.rain != undefined){
rain.push([moment(item.dt, 'X').valueOf(), parseFloat(item.rain)]);
}
});
var dailyForecastGraphData = [{
label: "Temperature",
data: temp,
lines: {
show: true
},
points: {
show: true
},
},
{
label: "Humidity",
data: humidity,
lines: {
show: true
},
points: {
show: true
},
yaxis: 2
},
{
label: "Rain",
data: rain,
bars: {
show: true,
barWidth: 1000*60*60*8,
align: 'center'
},
yaxis: 3
}];
var dailyForecastGraphOptions = {
xaxis : {
mode : "time",
},
yaxes : [
{
position: 'left'
},
{
position: 'right'
},
{
position: 'right'
}
],
tooltip : true,
tooltipOpts : {
content : "<b>%s</b> on <b>%x</b> will be <b>%y</b>",
dateFormat : "%y-%m-%d",
defaultTheme : false
},
legend : {
show : true,
noColumns : 1, // 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 : [0, 5], // distance from grid edge to default legend container within plot
backgroundColor : "#efefef", // null means auto-detect
backgroundOpacity : 0.4 // set to 0 to avoid background
},
grid : {
hoverable : true,
clickable : true
}
};
var dailyForecastGraph = $.plot($("#dailyForecastGraph"), dailyForecastGraphData, dailyForecastGraphOptions);
}
});
}
The two graphs are almost identical except the data which they are portraying.
The main (first) graph has the all the y axis plotted correctly. And we can see the axis for all 3 correctly. The daily (second) graph does have the rain y axis, although the options for them are similar.
Other than this, all tooltips are working fine but the temperature tooltips where I can see the placeholder %y and not the real value.
I have been debugging this code for the past 2 hours and I am not a Flot expert and I am not able to figure what is wrong.
Can anybody look at the code and tell me what is going wrong? Thank you in advance.
While you're creating your temperature data arrays, you need to parse the temperature value as a float. Make sure to parse the value as a float for both graphs. You're doing this for your humidity variable, and that is why the tooltip is working for that series.
var temperature = ((parseFloat(item.main.temp) - 273.15) * 1.80).toFixed(0);
temp.push([moment(item.dt, 'X').valueOf(), parseFloat(temperature)]);
JSFiddle updated with all of the same versions used in the theme you're using: JSFiddle
I am stuck on a series disappearance issue on highstock v1.3.10.
I have tried setting ignoreHiddenSeries to false, adjusting minRange and min/maxPadding but adjusting range still wipes off one of my series (called raffData, myChart.series[3])
Any ideas on how to resolve this please?
Issue reproduction steps:
change series type to stepline.
select 2yr in range selector
Raff channels disappear when in a widescreen resolution (desktop).
They will reappear when adjusting the xAxis range, when candle or ohlc is re-selected, or when the browser width is minimized (with chart.reflow set to true).
jsfiddle
fullscreen result
myChart = new Highcharts.StockChart({
chart : {
panning: false,
ignoreHiddenSeries: false,
renderTo : 'container',
alignTicks: false,
marginLeft : 25
},
plotOptions : {
line : {
lineWidth : 0.7
},
series : {animation : true}
},
rangeSelector : {
inputDateFormat: '%e %b, %Y',
inputEditDateFormat: '%d/%m/%Y',
//selected : 1,
buttons: [{
type: 'month',
count: 6,
text: '6m'
}, {
type: 'year',
count: 1,
text: '1y'
}, {
type: 'year',
count: 2,
text: '2y'
}, {
type: 'year',
count: 3,
text: '3y'
}, {
type: 'year',
count: 5,
text: '5y'
}, {
type: 'year',
count: 10,
text: '10y'
}, {
type: 'all',
text: 'All'
}]
},
title : {
text : getTick
},
tooltip : {
valueDecimals : 2
},
navigator : {
enabled : true
},
yAxis : [{
gridLineWidth : 0.8,
height : 410
}],
series : [{
type : series_type, // ohlc, candlestick, spline...
step : true,
name : getTick,
data : data,
lineWidth : 1,
dataGrouping : {
enabled : false,
units : [[
'week',
[1]
], [
'month',
[1, 2, 3, 4, 6]
],[
'year',
null
]]
}
},
{
type: 'spline',
name : 'linReg',
data : lrData,
enableMouseTracking : true,
color : '#F0F0F0',
dashStyle : 'Dash',
lineWidth : 1
},
{
type: 'areasplinerange',
name : 'RaffChannel',
data : raffData,
enableMouseTracking : false,
color : '#839bfc',
dashStyle : 'Dash',
fillOpacity : 0.2,
lineWidth : 1,
yAxis : 0
}] //end series
}); //ends chart
Nevermind, I overcame the issue by loading an additional hidden series that contains just date and the close price.
So for line, spline or area types I simply hide the OHLC series and show the close-only series using setVisible without redraw. Referring to the series by myChart.get(id) is a reliable way of pointing to the correct series.