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
},
Related
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 am using normal stacked column Highchart for displaying two items where sometimes any of the item value might become zero. In that case i am not getting next chart elements of that stack displayed instead only one of stack element is displayed. my sample code snippet mentioned below which might not straight forward to reproduce the issue but anyway
chartType : 'chart',
options : {
chart : {
animation : false,
type : 'column',
height : chart_height
},
credits : {
enabled : false
},
legend : {
enabled : true
},
title : {
text : null
},
colors : ['#ED561B', '#50B432'],
plotOptions : {
series : {
stacking : 'normal',
minPointLength : 3
}
},
tooltip : {
useHTML : true
},
xAxis : {
categories : categories,
},
yAxis : {
title : {
text : translations['chart.tooltip_packets'],
useHTML : Language.isRtl() ? Highcharts.hasBidiBug : false
},
opposite : Language.isRtl()
}
},
series : [{
index : '0',
name : 'SSS',
data : [0, 15, 10, 20, 13, 14]
tooltip : {
style : {
color : '#ED561B'
},
headerFormat : '',
pointFormatter : function () {
return '<strong>' + translations['chart.tooltip_packets'] + '</strong><br/>' + this.category + ': ' + this.y;
}
}
}, {
index : '1',
name : 'DDD',
data : [800, 0, 0, 0, 0, 0]
tooltip : {
style : {
color : '#50B432'
},
headerFormat : '',
pointFormatter : function () {
return '<strong>' + translations['chart.tooltip_packets'] + '</strong><br/>' + this.category + ': ' + this.y;
}
}
}
]
My chart looks like
In chart, i have zero value SSS in the first stack and rest of the DDD have zero values but had some value of SSS there which is missing on the chart.
I don't know what is the issue here. Can any one help me?
ok i find out the problem. turn out that you set a size for points that has value 0 with this line
minPointLength: 3
and the values with 10 15 20 are at yAxis starting at 0 but also the point with 0 value are starting at 0 and by you setting minPointLength the points with 0 value are bigger than the others and are on top of the others, so the stacked values are 0-15 and the 0 has extra size that is not stacked. did i explained myself correctly?
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 have a serious problem with the canvas height of my jqplot graph.
It is an horizontal bar graph. The number of bars is dynamic, so the height of the canvas SHOULD BE dynamic as well.
What I get is that whatever is the number of bars, the height of the canvas is always the same.
barWidth, barMargin, barPadding are ignored.
Here is my code:
$.jqplot(tip, data, {
stackSeries : false,
captureRightClick : true,
seriesDefaults : {
renderer : $.jqplot.BarRenderer,
rendererOptions : {
barDirection : 'horizontal',
barWidth : 15,
barPadding : 5,
barMargin : 15,
highlightMouseDown : true
},
shadowAngle : 135,
pointLabels : {
show : true,
location : 'e',
edgeTolerance : -40
}
},
title : {
show : true
},
series : [{
label:'aaa'
}],
axesDefaults : {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
}
},
});
Does someone understand why height doesn't adapt automatically?
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.