Essentially I want to draw something like this: http://i.stack.imgur.com/JEKOg.png (the gridlines, not the graph).
It seems if tickSize is set to one (below) then there are a bunch of lines drawn with their corresponding axis number below them.
xaxis, yaxis: {
show: true,
min: -20,
max: 20,
tickSize: 1,
tickLength: 0
}
If it's not set (below), the graph'll automatically draw one every 5 units along with their numbers
xaxis, yaxis: {
show: true,
min: -20,
max: 20,
tickLength: 0
}
I want gridlines every 1 unit but numbers every 5 but I don't see a method to do it.
You can manually specify the tick labels with an array:
ticks: [[0, "0"], [1, ""], [2, ""], [3, ""], [4, ""], [5, "5"]],
Or, you can specify a function to do it:
ticks: function(axis) {
var tickArray = [[0,"0"]];
for(var i=axis.min; i<axis.max+1; i++) {
var label = i%5?"":i;
tickArray.push([i, label]);
}
return tickArray;
},
Demo: http://jsfiddle.net/jtbowden/gryozh7x/
You can also use a tickFormatter:
tickSize: 1,
tickFormatter: function (val, axis) {
return val%5?"":val;
}
Demo: http://jsfiddle.net/jtbowden/gryozh7x/1/
Related
Does Flot offers an option to make the bar chart float?. I am looking for a Flot equivalent to interval bar plot (PyChart). The following picture is taken from the link:
(I am aware that Flot may not support this since it seems like each bar in Flot only has one variable, but I am not sure).
Edit: Any javascript library suggestion is also welcome!
I managed a workaround using Flot's bar chart and Flot's stacking. Basically for the empty space, I create a stack with white color (which somehow got translated into transparent except for the edges). Unfortunately, Flot's stacking require all stacks of the same level to be of the same type/color. In order to circumvere this, some of the bars have zero width in the stacks of wrong colors. Result looks surprisingly good!
The corresponding code follows (the example data does NOT corresponds to the image above, since it would be a little too large. This shows only two of the "colors").
var series = [
{
data: [
[24.0, 0],
[6.93333333333, 1],
[6.95, 2],
[6.91666666667, 3],
[6.95, 4],
],
color: "#FFFFFF",
},
{
data: [
[0.0, 0],
[0.0666666666667, 1],
[0.05, 2],
[0.0833333333333, 3],
[0.05, 4],
],
color: "#FFFF00",
},
];
date_ticks_pre = [[0, "Okt 19, 2014"], [1, "Okt 20, 2014"], [2, "Okt 21, 2014"], [3, "Okt 22, 2014"], [4, "Okt 23, 2014"]];
var options = {
series: {
bars: {
show: true,
barWidth: .75,
horizontal: true,
align: "center"
},
stack: true,
},
xaxis: {
ticks: 24,
},
yaxis: {
ticks: date_ticks_pre,
},
zoom: { interactive: true },
pan: { interactive: true },
};
$.plot('#flot_plot',
series,
options);
I am trying to plot a chart in my page.Am able to set the chart values properly.But the values are not setting. Because of this am getting space at the end .
var DataSet1 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 16 ],
[new Date("2014/03/17").getTime(), 32 ],
[new Date("2014/03/24").getTime(), 189],
[new Date("2014/03/31").getTime(), 250] ];
var DataSet2 = [
[new Date("2014/03/03").getTime(), 0],
[new Date("2014/03/10").getTime(), 40],
[new Date("2014/03/17").getTime(), 20 ],
[new Date("2014/03/24").getTime(), 180],
[new Date("2014/03/31").getTime(), 230] ];
/* to find last 4 weeks mondays */
var newDate = new Date();
var day = newDate.getDay();
var date = newDate.getDate();
var xaxisArray = [];
for(var i = 0;i<5;i++){if(i!=0){
var tempnewDate = new Date(setNewDate);
setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7));
xaxisArray.push(setNewDate);
} else {
setNewDate =newDate.setDate(date-day+1);
xaxisArray.push(setNewDate);
}
}
$.plot($("#chart-revenue2"),[
{ data: DataSet1,label: "#FST",},
{ data: DataSet2, label: "SCND",
points: { show: true },
lines: { show: true,fill: false},
yaxis: 2,color:"#C76C6B"} ] ,
{
xaxis:
{
mode: "time",
min: xaxisArray[4],
max:xaxisArray[0],
timeformat: "%d/%m/%y",
ticks: xaxisArray.reverse(),
minTickSize :30
}
, yaxes: [
{
min:0, max: 400, tickSize: 50
},
{
position: "right",
min:0, max: 300, tickSize: 50
}
],
series: {
lines: {
show: true,
lineWidth: 3,
fill: true
},
shadowSize: 0,
},
grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }},
colors: ["#294777"],
legend: { show: true, container: '#chart-revenue1-table' }
});
Please check my fiddle..
The problem is how you are calculating the dates for your axis ticks. When you create newDate, it has hours, minutes and seconds, which are then included in each tick. Make sure they are all zero and it will all line up:
var newDate = new Date()
newDate.setHours(0);
newDate.setMinutes(0);
newDate.setSeconds(0);
There's probably a better way to do that, I just haven't looked it up :)
See it working here: http://jsfiddle.net/ryleyb/htsBz/1/
You've set the maximum on the xaxis beyond the last point you have data for. What did you expect it to do? It doesn't have data, so it leaves it blank. If you want your axis to fit, set it's max to max: new Date("2014/03/31").getTime(), or better yet, just don't set the max and let flot autoscale it for you.
I am trying to deploy barchart using jqplot. Now How to decrease the width of grids and ticks?
I have removed the gridline by setting showGridline to false, But its still showing vertically.
My screen.
I want the x-axis ticks to appear something like this.
my js code.
$(document).ready(function () {
var s1 = [10, 20, 30, 40];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 15
}
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});
May be someone can help?
To remove the gridlines, apply below property on both x-axis and y-axis:
tickOptions: {
showGridline: false
}
In you code you have set the barWidth to 15px. before drawing the graph please make sure the width of the div is no less more than the number of x-axis tixks * 15 (approx).
or
Adjust the width of each bar at runtime based on the width of your div.
Here is the example which solves your problem:
JsFiddle link
HTML Code:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:310px; height:300px;"></div>
Js code:
$(document).ready(function () {
var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 25
},
shadow: false
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});
I have a problem with data labels overlapping columns in my chart.
$('#container').highcharts({
chart: {
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [[Date.UTC(2013, 3, 1, 0, 0, 0), 169],
[Date.UTC(2013, 4, 1, 0, 0, 0), 176],
[Date.UTC(2013, 5, 1, 0, 0, 0), 470],
[Date.UTC(2013, 6, 1, 0, 0, 0), 346],
[Date.UTC(2013, 7, 1, 0, 0, 0), 252],
[Date.UTC(2013, 8, 1, 0, 0, 0), 138]],
dataLabels: {
enabled: true
}
}]
});
});
You can see an exmaple here: http://jsfiddle.net/J6WvR/1/
My chart should have fixed height and I don't understand why the largest column height cannot be calculated to fit its data label. How can I fix this?
According to official API documentation: overflow property
To display data labels outside the plot area, set crop to false and overflow to "none".
dataLabels: {
enabled: true,
crop: false,
overflow: 'none'
}
you can try max for yAxis,
calculate maximum value from you data and add some cushion say 100 to it and set it as max for yAxis
yAxis:{
max: 600,
},
updating your fiddle with max for yAxis at http://jsfiddle.net/J6WvR/3/
hope this will be of use for you
One option is to move the position of the labels. e.g. this will move them inside the bars:
plotOptions: {
column: {
dataLabels: {
y: 20,
color:'white'
}
}
},
http://jsfiddle.net/TBfLS/
An alternative is to manually set the max y value to make room for the label:
yAxis: {
max: 600,
endOnTick: false
},
http://jsfiddle.net/2AhVT/
Hopefully one of these options will help.
A third (and probably better) option was posted by Ivan Chau.
after enabling dataSorting highchart it is not showing data label properly in stacked column chart
I would like to create a line plot for a vector of y values. In the default situation, x should starts from 1. I am wondering is there a way to let x values start from 0?
Below is my code and demo:
$(document).ready(function() {
var s= [12, 45, 89, 181, 111, 147, 116]
$.jqplot('chart1', [s], {
seriesDefaults: {
showMarker:false,
pointLabels: { show:false } ,
},
axes: {
xaxis: {
label :'Time units',
pad: 0,
},
yaxis: {
label: 'Number of individuals',
pad: 0
}
},
legend: {
show: true,
location: 'nw',
placement: 'inside',
fontSize: '11px'
}
})
})
Edit: it is also necessary to set the data of x.
Here is the demo.
In the first paragraph of this link the author mentions that for what you are trying to achieve, you need an array of x,y data points (the ordered pairs themselves must be arrays too). So in your specific case this should give the desired effect:
var s= [[0, 12], [1, 45], [2, 89], [3, 181], [4, 111], [5, 147], [6, 116]];
For larger arrays of ordered pairs you can use a for loop to generate the ordered pair-arrays.