Develop Reference

How can I align scale with axis in Highcharts?

By default, the scale for the x-axis and y-axis are on the bottom & left of the chart, respectively. I want them adjacent to the plot lines (the x- and y-axis). Here's an illustration of what I'm hoping to achieve: imgur.com/a/tf53t
I know that I can use offset: to move the scales to a specific pixel location, but they no longer align to the plot lines if I change the maximum/minimum values on either axis.
I labeled where I think offset should go in the code below, but I'm not sure what to type after it.
http://jsfiddle.net/z7eyv/60/
Here's the specific part of the code in question:
yAxis: {
min: -20,
max: 20,
tickInterval: 1,
endOnTick: false,
title: {
text: ''
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},
plotOptions: {
series: {
states: {
hover: {
enabled: false,
halo: {
size: 0
}
}
}
}
},
xAxis: {
min: -20,
max: 14,
tickInterval: 1,
gridLineWidth: 1,
endOnTick: false,
offset: //???????????????????????????????????????
title: {
text: '',
},
plotLines: [{
value: 0.1,
width: 1,
color: 'black'}]
},

Flot Chart - different color on single line chart based on data points

Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);

There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.

Align label and the marker on the same vertical line(Highcharts)

I want to add a dash like in the red circle from the first point(blue). Is it possible?
Here is my code
function graph(graph_id, value_array,tool_tip_title, max, min){
$('#'+graph_id).highcharts({
chart: {
type: 'areaspline',
backgroundColor:'transparent'
},
title: {
text: false
},
xAxis: {
type: 'datetime',
labels: {
formatter: function() {
return moment(this.value).format("HH:mm:ss");
}
}
},
yAxis: {
title: {
text: false
},
gridLineColor: 'transparent',
labels:{enabled: true},
gridLineWidth: 0,
minorGridLineWidth: 0,
min: min,
max: max
},
tooltip: {
shared: true
},
credits: {
enabled: false
},
plotOptions: {
areaspline: {
fillOpacity: 1
},
series: {
tooltip: {
dateTimeLabelFormats: {
second:"%A, %b %e, %H:%M:%S"
}
},
marker: {
fillColor: '#3D84B1',
lineWidth: 2,
lineColor: 'white',
radius: 6
}
}
},
series: [{
showInLegend: false,
name: tool_tip_title,
color: "#EC615F",
data: value_array
}]
});
}
I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.

Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner. In your case, I think you can simply add two extra dates, like this:
tickPositioner: function() {
var tp = this.tickPositions; // get default positions
tp.splice(0, 1, this.min); // replace first label
tp.splice(tp.length - 1, 1, this.max); // replace last label
return tp;
}
Simple demo: http://jsfiddle.net/p98rggva/

you can use startOnTick and min as per your minimum data.
startOnTick: true,
min: your smallest data of xAxis/in date use first timestamp of sorted data

jqplot - Want to restrict y axis ticks

In below code y axis values are not readable, I guess its overlapping.
How to set suitable y axis tick range:
$(document).ready(function(){
var line1 = [82,82];
var line2 = [22,22];
var line3 = [0,0];
var ticks = [1,2];$.jqplot('line', [line1, line2, line3], {
animate: true,
axesDefaults:{min:0,tickInterval: 1},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
series: [{lineWidth: 1.5, label: 'Passed'},
{lineWidth: 1.5, label: 'Failed'},
{lineWidth: 1.5, label: 'Skipped'}],
axes: {
xaxis: {
label: "Run Number",
ticks: ticks,
tickOptions: {
formatString: "%'d Run"
},
pad: 1.2,
rendererOptions: {
tickInset: 0.3,
minorTicks: 1
}
},
yaxis: {
label: "TC Number me"
,tickOptions: {
formatString: "%'d Tc"
},
}
},
highlighter: {
show: true,
sizeAdjust: 10,
tooltipLocation: 'n',
tooltipAxes: 'y',
tooltipFormatString: '%d : <b><i><span style="color:black;">Test Cases</span></i></b>',
useAxesFormatters: false
},
cursor: {
show: true
},
grid: {background: '#ffffff', drawGridLines: true, gridLineColor: '#cccccc', borderColor: '#cccccc',
borderWidth: 0.5, shadow: false},
legend: {show: true, placement: 'outside', location: 'e'},
seriesColors: ["#7BB661", "#E03C31", "#21ABCD"]
});
});

You have either to remove the tickInterval option in axesDefaults to let jqplot computes his own ticks or add the numberTicks option in axesDefaults in order to tell jqplot to draw x ticks where x is the number given to the numberTicks option.
If you use axesDefaults:{min:0, tickInterval:1}, jqplot will draw ticks from 0 to your maximal value with an interval of 1 unit (80+ ticks from 0 to 82).
If you use axesDefaults:{min:0}, jqplot will draw 5 ticks (by default) from 0 to your maximal value computing a same gap between two ticks.
If you use axesDefaults:{min:0, tickInterval:1, numberTicks:15}, jqplot will draw 15 ticks starting at 0 and with an interval of 1 unit (15 ticks from 0 to 14).
If you use axesDefaults:{min:0, numberTicks:15}, jqplot will draw 15 ticks from 0 to your maximal value computing a same gap between two ticks.
Choose the option which best fits.

Barchart in Flot.js showing null values

Im trying to get my bar chart to display the a simple series of data.
Its displaying the data correctly however it is filling up the grid with zero values of data that does exist between the range.
See the image.
$.plot($('#somediv'), result, {
lines: {
show: false
},
bars: {
barWidth: 12,
horizontal: false,
align: "center",
show: true,
zero:false,
fill:true,
fillColor:'#fefefe',
},
points: {
show: false,
symbol: "circle",
fill: false
},
grid: {
hoverable: true,
backgroundColor: '#fefefe',
borderColor: '#eee',
borderWidth: 1,
clickable: true
},
series: {
lines: {
show: false,
lineWidth: 1
},
shadowSize: 0
},
xaxis: {
mode: null,
},
yaxis: {
min: 0
},
selection: {
mode: "y"
},
});
and here is the data
[{"label":"Sales","data":[["180","23"],["3","12"],["183","10"],["154","5"],["239","4"]]}]
and here is the result in the screenshot.
The data series on the bottom is the product ID, the y axis is the # of Sales of each product
What I want is that each tick shows 1 bar, but I cant understand the documentation from
https://github.com/flot/flot/blob/master/API.md

Flot isn't filling the grid with nulls; it is correctly plotting the x-values - 180, 3, 183, etc. that you gave it. If those values don't actually correspond to positions on an axis, you should simply use 1, 2, 3, ... instead.