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'm writing a stacked bar chart that is working fine on my local machine, however when it is running on a live server it doesn't plot any of the data points. I've considered that it could be the api is taking longer on the live site to get the data, or maybe highcharts is not loading fast enough, but the x-axis populates the values correctly and the library is loading locally (also happens with CDN).
I can even log the values of the chart series and see everything fine. It just doesn't display any data with a line designating 0 on the Y axis. Anyone have any idea what the issue could be?
$.getJSON( 'URL TO API', function(data){
// Sample data output
// data = [
// { 'name' : 'Items', data : [ 'item1', 'item2', 'item3'] }
// { 'name' : 'losses', data : [2, 3, 1] }
// { 'name' : 'Wins', data : [5, 2, 0] }
// ]
var chart = new Highcharts.Chart({
chart: {
type: 'bar',
renderTo: 'chart',
},
title: {
text: 'Wins and Losses'
},
xAxis: {
categories: data[0]['data']
},
yAxis: {
min: 0,
allowDecimals: false,
title: {
text: 'Total'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal',
}
},
series: [
{
name : data[1]['name'],
data : data[1]['data']
},
{
name : data[2]['name'],
data : data[2]['data']
},
]
});
});
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'm facing a serious problem. Whenever I try to add any trendline starting from a bit below to the top of the chart (near about 70-85 degree angle), it changes its width. But in case of vertical and horizental line I'm not facing the problem. Is there any way to prevent this?
My code is:
$(function() {
$.getJSON('http://api-sandbox.oanda.com/v1/candles?instrument=EUR_USD&candleFormat=midpoint&granularity=W', function(data) {
// create the chart
var onadata =[];
var yData=[];
var type='line';
var datalen=data.candles.length;
var all_points= [];
var all_str="";
for(var i=0; i<datalen;i++)
{
var each=[Date._parse(data.candles[i].time), data.candles[i].openMid, data.candles[i].highMid, data.candles[i].lowMid, data.candles[i].closeMid]
onadata.push(each);
yData.push(data.candles[i].closeMid);
}
chart();
function chart()
{
$('#container').highcharts('StockChart', {
credits: {
enabled : 0
},
rangeSelector : {
buttons: [{
type: 'month',
count: 1,
text: '1M'
}, {
type: 'month',
count: 3,
text: '3M'
},{
type: 'month',
count: 6,
text: '6M'
},{
type: 'all',
text: 'All'
}],
selected:3
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title : {
text : 'Stock Price'
},
xAxis :{
minRange : 3600000
},
chart: {
events: {
click: function(event) {
var x1=event.xAxis[0].value;
var x2 =this.xAxis[0].toPixels(x1);
var y1=event.yAxis[0].value;
var y2 =this.yAxis[0].toPixels(y1);
selected_point='['+x1+','+y1+']';
all_points.push(selected_point);
all_str=all_points.toString();
if(all_points.length>1)
{
this.addSeries({
type : 'line',
name : 'Trendline',
id: 'trend',
data: JSON.parse("[" + all_str + "]"),
color:'#'+(Math.random()*0xEEEEEE<<0).toString(16),
marker:{enabled:true}
});
}
if(all_points.length==2)
{
all_points=[];
}
}
}
},
series : [{
//allowPointSelect : true,
type : type,
name : 'Stock Price',
id: 'primary',
data : onadata,
tooltip: {
valueDecimals: 5,
crosshairs: true,
shared: true
},
dataGrouping : {
units : [
[
'hour',
[1, 2, 3, 4, 6, 8, 12]
], [
'day',
[1]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
[1]
]
]
}
},
]
});
}
});
});
and this is my JSfiddle.
Please check the images also.
Normal chart
Chart with trendline
This is normal. It is adjusting the height of the chart (not the width) to accommodate the points you are adding. It adds a little buffer to make the chart point a bit more readable.
You can also use min/max parameters or set tickPositions / tickPositioner to keep ticks always in the same postions.
Docs: http://api.highcharts.com/highcharts
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.