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.
Related
I am trying to load data via CSV file. Now if I have it already on the page as a hidden div, it works great. But trying to load it from a CSV file via Jquery $.get is not working. The x and y axis shows, but the heatmap itself does not.
The javascript looks like this (without the actual file offhand):
$.get('http://www.urltofile.com/cell001.csv', function(csv) {
generateHeatMap($('#heatmapBody'),csv);
});
function generateHeatMap(target,data) {
target.highcharts({
chart: {
type: 'heatmap',
//height: highChartsArguments.chartHeight
margin: [60, 10, 80, 50]
},
boost: {
useGPUTranslations: true
},
title: {
text: 'Highcharts extended heat map',
style: {
color: 'black',
fontSize: '12px',
fontFamily: 'Verdana'
}
},
xAxis: {
type: 'text',
min: 0,
max: 427,
labels: {
align: 'left',
x: 5,
y: 14,
format: '{value}' // long month
},
showLastLabel: false,
tickLength: 16
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [0, 16, 32, 48, 64, 80, 96, 112, 133],
tickWidth: 1,
min: 0,
max: 133,
reversed: true
},
colorAxis: {
max: 1.5,
min: -1.5,
minColor: '#00FF00',
maxColor: '#FF0000',
stops: [
[0.0, '#00FF00'],
[0.5, '#003319'],
[0.9, '#FF0000'],
[1, '#FF0000']
]
},
credits: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
symbolHeight: 60
},
series: [{
name: 'heatmap',
data: {
csv: data
},
boostThreshold: 100,
borderWidth: 0,
nullColor: '#EFEFEF',
tooltip: {
headerFormat: 'Test<br/>',
pointFormat: '{point.x} {point.y}: <b>{point.value}</b>'
},
turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
}],
exporting: {
enabled: false
}
});
}
The CSV is over 100K rows. Is that causing a problem perhaps? As a sample, it looks like
Gene,Label,zScore
0,0,3.630958
0,1,1.547901
0,2,-0.604027
0,3,0.486755
0,4,-0.359456
0,5,0.228968
0,6,3.197601
0,7,1.554732
0,8,0.374111
Any help would be appreciated.
You load the data incorrectly. Series object is not responsible for handling csv data. If you use data module, you should move the data from series options to top level options, like this:
data: { // this is how you load the with data module
csv: data
},
series: [{
... // here, options for series goes but not data
}]
Compare your code with the official example: http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/heatmap/
I recently encountered a weird issue with HighStock.
Firstly here is my code http://jsfiddle.net/woon123/br0e8mkw/
$(document).ready(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$('#analytics_line').highcharts('StockChart', {
credits: {
enabled: false
},
title: {
text: 'Analytics of Deals'
},
subtitle: {
text: 'View Count and Redemption Count'
},
rangeSelector: {
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 3,
text: 'Day',
dataGrouping: {
forced: true,
units: [
['day', [1]]
]
}
}, {
type: 'year',
count: 1,
text: 'Week',
dataGrouping: {
forced: true,
units: [
['week', [1]]
]
}
}],
buttonTheme: {
width: 60
},
},
yAxis: {
floor: 0,
title: {
text: 'Number'
}
},
plotOptions: {
dataLabels: {
visible: true
},
series: {
compare: 'value'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b><br/>',
valueDecimals: 2
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: [{
id: "First Graph",
name: "First Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [20, 23, 23, 23, 23, 23, 23, 23, 23, 23],
}, {
id: "Second Graph",
name: "Second Graph",
pointStart: 1444060800000.0,
pointInterval: 24 * 3600 * 1000,
data: [9, 12, 16, 16, 16, 16, 16, 16, 16, 16],
}, ]
}, function (chart) {
// apply the date pickers
setTimeout(function () {
$('input.highcharts-range-selector', $(chart.container).parent())
.datepicker();
}, 0);
});
// Set the datepicker's date format
$.datepicker.setDefaults({
dateFormat: 'yy-mm-dd',
onSelect: function () {
this.onchange();
this.onblur();
}
});
});
In this case, First Graph is suppose to be above Second Graph according to the data. When you compare the series, First Graph values are always higher then Second Graph.
However, the graph plotted actually cause First Graph to be below Second graph although when you mouse over the lines, it gives the correct values.
Furthermore, First Graph is suppose to start at 20 but as you can see it starts at 0, and the Y-axis values are wrong as well (0-2.5-5)
However, all these errors can be solved by placing 0 at the start of the data.
For the case of First Graph it is [0, 20, 23, 23, 23, 23, 23, 23, 23, 23, 23] and Second Graph it is [0, 9, 12, 16, 16, 16, 16, 16, 16, 16, 16].
Can anyone advice why is this the case and perhaps provide a solution to allow my data to start with a positive integer rather then 0
Take out the compare on the plotOptions, series
series: {
compare: 'value'
}
Fiddle: http://jsfiddle.net/br0e8mkw/2/
From the API: http://api.highcharts.com/highstock#plotOptions.series.compare
Compare the values of the series against the first value in the visible range. The y axis will show percentage or absolute change depending on whether compare is set to "percent" or "value". When this is applied to multiple series, it allows comparing the development of the series against each other. Defaults to undefined.
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.
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.
Am using flot js to get chart.Its coming fine but I am getting half of chart.What is the issue here,
My code is
<div style="width:1120px; height:500px;">
<div id="chart_2" style="width:1100px; height:480px;" > </div>
</div>
DataSet1 = [
[new Date("2013/01/02").getTime(), 60],
[new Date("2013/02/03").getTime(), 16 ],
[new Date("2013/03/04").getTime(), 32 ],
[new Date("2013/04/05").getTime(), 189],
[new Date("2013/05/06").getTime(), 192],
[new Date("2013/06/06").getTime(), 154],
[new Date("2013/07/06").getTime(), 336],
[new Date("2013/08/06").getTime(), 203],
[new Date("2013/09/06").getTime(), 366],
];
chartColor = $(this).parent().parent().css("color");
$.plot($("#chart_2"),[ { data: DataSet1} ] ,{
xaxis:
{ mode: "time",
min: (new Date("2013/01/01")).getTime(),
max: (new Date("2014/11/09")).getTime(),
timeformat: "%d/%m/%y",
ticks: [new Date("2013/01/01").getTime(),new Date("2013/02/01").getTime(),new Date("2013/03/01").getTime(),new Date("2013/04/01").getTime(),new Date("2013/05/01").getTime(),new Date("2013/06/01").getTime(),new Date("2013/07/01").getTime() ],
minTickSize :30
}
,yaxis: {
min:0, max: 400, tickSize: 50
},
series: {
label: "Revenue",
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0
},
grid: { hoverable: true,
clickable: true,
tickColor: "rgba(255,255,255,.15)",
borderColor: "rgba(255,255,255,0)"
},
colors: ["#294777"],
legend: {
show: true
}
});
what did i make here to get half chart
SOLVED
Your max value is clipping your chart.
max: (new Date("2013/9/09")).getTime(),