Same issue with scattercharts and linecharts. Have a working chart, vAxis - sensor readings, hAxis - datetime. Chart shows daily readings for the last eight weeks - works.
And what it looks like, unwanted gridlines for the first of the month:
I have hAxis gridlines set up to display every 7 days - that works, but in addition to the weekly gridlines, google charts insists on displaying gridlines for the first of the month. Tried every permutation of gridlines count and minor gridlines I can think of. The only success I have had is gridlines color none, but that turns off all hAxis gridlines.
How can I turn off the gridlines showing for the 1st of each month?
Relevant options:
var levelOptions = {
title: "Remaining",
width: 420, //column is 420 with padding 5px, but this gives a right
//margin the same as the left
height: 250,
// chart area needs to be less than 100% to make room for axis labels
chartArea: {width: '85%', height: '80%'},
titlePosition: 'in',
axisTitlesPosition: 'none',
titleTextStyle: {color: 'DimGray',
fontSize: 14,
bold: false},
curveType: 'function',
lineWidth: 2, //width of lines connecting points
pointsVisible: false,
vAxis: {minValue: 0, //no need for max value, calc automatically
gridlines: {color:'Gainsboro'},
baselineColor: 'DimGray',
baseline: 0},
//Gridlines: {count: 0}, does nothing
//minorGridlines: {count: 0}, gets rid of all gridlines except 1st of month
//but leaves the ticklabels there, so why does gridlines count = 0 not work
//gridlines: {color:'none',}, //this gets rid of all of them but
//adding back in minor grid colour does not put them back
hAxis: {ticks: ticklabels,
textStyle : {fontSize: 9},
gridlines: {count: 0,},
//minorgridlines: {color:'Gainsboro',},
//gridlines: 0,
format: 'dd MMM', //so dates appear as, e.g. 1 Apr
baselineColor: 'DimGray',
baseline: data.getColumnRange(2).min},
legend: 'none',
};
ticklabels is an array of dates generated by parsing the arrayData and picking every 7th date.
Related
I have created a google line chart with the following option, but the first and last X-axis labels are NOT shown, how to fix it?
hAxis: {
gridlines: {
count: 9,
units: {
days: {format: ['MMM dd']},
hours: {format: ['ha']},
}
},
},
vAxis: {
ticks: [0, 54, 70, 180, 250, 350]
}
try adding more space for the labels to be displayed,
using the chartArea, left & right options...
chartArea: {
left: 40, // <-- 40 is arbitrary, increase until they appear
right: 40
}
I have a Highstock graph with Plotlines here: http://jsfiddle.net/qd0rmazg/3/
I'd like to be able to have a legend of Plotlines where, similar to the legend of Series, upon a click Plotlines of a certain category can be made visible or hidden.
In my JSfiddle example, there are 2 categories of Plotlines. Is it possible to toggle the visibility of Plotlines per one category? I couldn't seem to find anything supporting this.
This is how I've created the Plotlines:
xAxis: {
plotLines: [{
value: Date.UTC(2016, 12, 29), // year, month, day
width: 1,
color: 'blue',
dashStyle: 'ShortDash',
label: {
text: 'Category 1',
},
}, {
value: Date.UTC(2016, 11, 12), // year, month, day
width: 1,
color: 'green',
dashStyle: 'Solid',
label: {
text: 'Category 2',
}]
}
As far as I know, there is no native HC legend for the plot lines. But, you can create your custom legend element on the page and use HC capabilities to show/hide plot lines as in their examples:
http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/members/axis-addplotline/
chart.xAxis[0].removePlotLine('plot-line-1');
chart.xAxis[0].addPlotLine({
....
id: 'plot-line-1'
});
As noted in my comment, there is a feature request here:
https://highcharts.uservoice.com/forums/55896-highcharts-javascript-api/suggestions/3009547-plotlines-on-legend
Please add your votes and comments.
Vladimir M provided a good solution to show/hide the plot lines with your own custom legend.
The other common approach is to use a line series as your plotLine, which gives you the benefit of the full series functionality.
Example series:
{
name: 'PlotLine',
type: 'line',
color: 'rgba(204,0,0,1)',
data: [25,25,25,25,25,25,25,25,25,25]
}
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/
If you need a vertical plot line, the data set up is slightly more complex but still quite feasible.
{{EDIT to demo vertical plot line:
First, you;d have to set a min/max for you y axis (could be done programmatically on chart load):
yAxis: {
min: 0,
max: 75,
maxPadding: 0
}
Then, you specify your data in [x,y] pairs, with the x values being your plotLine value, and the y values being your Y axis min and max:
data: [[4,0], [4,75]]
Updated fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/1/
With that method, you could add a series per plot line, or, if you want all of them to be the same legend and settings, you can add multiple by inserting null points between your desired lines:
data: [[4,0], [4,75], [5,null], [7,0],[7,75]]
Fiddle:
http://jsfiddle.net/jlbriggs/nh65m306/2/
I am working with a sample here:
var startDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
var endDate = new Date(Date.UTC(2016, 6, 28, 0, 0, 0, 0));
endDate.setHours(startDate.getHours() + 9);
var dataSet = [{"data":[[1469664000000,0]],"color":"#FF0700"},
{"data":[[1469667600000,0]],"color":"#FF0700"},
{"data":[[1469671200000,0]],"color":"#FF0700"},
{"data":[[1469674800000,0]],"color":"#FF0700"},
{"data":[[1469678400000,0]],"color":"#FF0700"},
{"data":[[1469682000000,0]],"color":"#FF0700"},
{"data":[[1469685600000,0]],"color":"#FF0700"},
{"data":[[1469689200000,0]],"color":"#FF7400"},
{"data":[[1469692800000,0]],"color":"#006900"}];
var options = {
series: {
stack: true,
bars: {
show: true
}
},
bars: {
lineWidth: 0,
align: "center",
barWidth: 1,
horizontal: true,
fill: 1,
},
yaxis: {
axisLabel: "MachineName",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
ticks: []
},
xaxis: {
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 3,
//ticks: [[0, "1:00"], [1, "2:00"], [2, "3:00"], [3, "4:00"], [4, "5:00"], [5, "6:00"], [6, "7:00"], [7, "8:00"], [8, "9:00"]],
//labelWidth: 10,
//tickLength: 10,
//tickFormatter: formatXAxis,
//tickSize: 360000,
//minTickSize: 1,
//min: 0,
//max: 10
//mode: "time",
//timeformat: "%H:%M",
//minTickSize: [1, "hour"],
////color: "black",
//min: startDate.getTime(),
//max: endDate.getTime()
}
};
$.plot($("#machineStatus"), dataset, options);
I end up with a graph where the xaxis labels are not anything like they should be. See below
The design is an hourly status of a machine (red = not running, green = running, etc.) So the intent was to have the last 9 hours of runtime showing and put x axis labels for the top of the hour (1:00, 2:00, etc.).
Since this is a horizontal stack of multiple data sets, this appears to really confuse the xaxis tick calculation. I tried setting the min/max to equal the start and end times of the dataset, but I would get no graph.
I stopped using the "time" mode, hoping I could use the ticks array and force a set of ticks and labels, but that doesn't work. I tried the tickFormatter to force calculating the ticks, but that didn't work either.
You can see all the things I've tried on the xaxis and have commented out. I actually don't want the ticks to have any relationship to the actual data. I am testing this graph at the hour and minute level, so theoretically my data sets are either 9 or 540 bits of granular information. I still want the xaxis ticks to stay at a fixed set of 9 values spread evenly. Any ideas how I can do that?
FYI, I apologize for no jsfiddle. I've never been able to get one to work.
Update. Selected answer works! Here's a screenshot of a 540 datapoint to the minute level. The dataset is too big to post. Thanks again Raidri
I got it to work with time mode and a vertical bar chart:
Relevant options:
series: {
stack: true,
bars: {
lineWidth: 0,
align: "left",
barWidth: 3600000,
//horizontal: true,
fill: 1,
show: true,
}
},
...
xaxis: {
min: startDate.valueOf(),
max: endDate.valueOf(),
mode: "time",
timeformat: "%H:%M",
...
Also the values for your datapoints are changed to 1 so the bars here have a height of one.
If you change it to minute values, you have to change the barWidth option accordingly.
See this fiddle for the full example.
I am creating a multiple line chart with Google Chart API where I want to use 2 Y axis such as -> , but with one axis set to max 24000 for my 6 countries, and the second set to 90000 for the 'Total World' column.
The problem is that my set of options never returns the 'Total World' in the second y axis and the other 6 countries in the first y axis, no matter how I arrange the option 'targetAxisIndex':
var tot = 95000;
var min = 0, var max = 24000;
....
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:[
{targetAxisIndex:1},
{targetAxisIndex:0}
],
legend: { position: 'top', alignment: 'start' }
};
here is the complete code: http://plnkr.co/edit/u5xXExdkTTYU8fHxWzHB?p=preview
I found the answer on Google Groups:
Hi Chris,
The series option is supposed to be a mapping of series index to series options. When you specify it as an array, you're basically doing that assignment implicitly. So in your example, series 0 will go on axis 1, and series 1 will go on axis. All other series will go to the default axis (0). Your issue could be fixed pretty easily, by simply reorganizing your series such that the total is the first. Alternatively, you could explicitly specify that series 6 (your total series, 'country6') should go on axis 1. The default is for things to go on axis 0, so you don't need to explicitly specify that. Here's an updated version of your plunkr with the second version of the solution (since that was easier for me to do): http://plnkr.co/edit/GhsNcBCtDW0i4OTu0VJR?p=preview
var options = {
title: 'Top Consuming Nations - Thousand barrels daily',
hAxis: {title: 'Year'},
width: 1050, height : 400,
vAxes: [
{title: 'Top Countries', titleTextStyle: {color: '#FF0000'}, maxValue: max}, // Left axis maxValue: 60000
{title: 'Total World', titleTextStyle: {color: '#FF0000'}, maxValue: tot} // Right
],
series:{
6: {targetAxisIndex: 1}
},
legend: { position: 'top', alignment: 'start' }
};
var chart = new google.visualization.LineChart(document.getElementById(chartDiv));
chart.draw(data, options);
I have a problem with Highcharts where the Ceiling of one of my two y-axes is not being respected.
Y-axis "1" represents percentage values, so has a Floor of 0 and a Ceiling of 100.
Y-axis "2" represents monetary values, so has a Floor of 0 and a Ceiling of null.
For some reason, the labels for y-axis "1" go up to 150.
If I change the corresponding series data so that the value 0 is changed to 20, the problem seems to go away and the labels stop at 100 as they should.
var dataX = [0, 67, 43, 100, 100, 80];
var dataY = [950, 900, 807, 650, 600, 450];
$(function () {
$('#container').highcharts({
series: [{
name: 'Series 1',
data: dataX,
yAxis: 0},
{
name: 'Series 2',
data: dataY,
yAxis: 1}],
yAxis: [{
floor: 0,
ceiling: 100,
title: {
text: '1'
},
},
{
floor: 0,
ceiling: null,
title: {
text: '2'
},
opposite: true}]});});
http://jsfiddle.net/2bzew/2/
Can anyone explain why this is happening?
I had a similar problem, but I found that using the following solves the issue:
maxPadding: 0,
minPadding: 0,
The default for these values are both 0.05 so that will be added to your data and cause highstock to make the y axis bigger than intended. Zeroing them out seems to fix the problem for me.
I also recommend to set the following so that maximum value still has a label:
showLastLabel: true,
http://jsfiddle.net/M4bVz/
From Highcharts API:
When using multiple axis, the ticks of two or more opposite axes will automatically be aligned by adding ticks to the axis or axes with the least ticks. This can be prevented by setting alignTicks to false. If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. Defaults to true.
I have updated your fiddle with these corrections.
chart: {
alignTicks: false
},
...
yAxis: [{
...
gridLineWidth: 0,
...
http://jsfiddle.net/2bzew/3/
You can always create your own tickPositioner, or set directly tickPositions: http://jsfiddle.net/2bzew/4/
See docs and more examples:
tickPositioner
tickPositions