Im trying to pass a variable('maxValue') into my Highcharts guage . I cant get the variable to pass in successfully, the graph renders but without the value.
Ive tried Number and parseInt Functions but neither make a difference.
I setup a JS fiddle here: http://jsfiddle.net/d5d4cgbe/16/
The code section in question:
var maxValue = 120; //set the maxValue var
$('#visitPerformanceWeek').highcharts(Highcharts.merge(gaugeOptions, {
yAxis: {
min: 0,
max: maxValue,
title: {
text: 'Hours Worked'
}
},
I will eventually be passing a value collected from an AJAX request, this part I have working but have excluded from the fiddle to keep it simple. Help appreciated
For setting the maxValue dynamically, something like setExtremes should do it. Try
chart.yAxis[0].setExtremes(0,maxValue);
Another alternative is the update method:
chart.yAxis[0].update({ max: maxValue });
For the maxValue to be displayed by the solidgauge, you need to specify a tickerInterval which divides into the maxValue. Presently, the chart is generating a default tick interval e.g. 10, which adds up to 100. For example, a maxValue of 120, you may set the tickInterval to 12
yAxis: {
min: 0,
max: 120,
tickInterval: 12,
...
}
JSFiddle
Check here : http://jsfiddle.net/d5d4cgbe/23/
you can set value using following command :
chart.yAxis.max = maxValue;
check browser console for yAxis value.
Related
I started working with highcharts. Now a problem I am facing is that the bulletcharts can’t be used for a dataset that is in descending order.
For example say we want to plot the ranking of a few companies. In this case the ranking is better the lower it gets. So a Rank 10 is better than a Rank 15 and so on.
In this case I want my graph to get reversed. The target would be lets say 10. The min value would start from say 100 to 0. So you can see how this isnt possible.
P.S: I know the
reverse: true/false
property. But that simply flips the graph and I don’t want that/need that.
Thanks world.
You can add a second y-axis with the same extremes as the first one, but reversed. Next, hide the first y-axis, calculate mocked y and target values and finally, set a custom formatter function for tooltip to show original values.
const MAX = 300;
const TARGET = 50;
const Y = 25;
Highcharts.chart('container1', {
chart: {
inverted: true,
type: 'bullet',
},
yAxis: [{
visible: false,
min: 0,
max: MAX
}, {
min: 0,
max: MAX,
reversed: true,
...
}],
tooltip: {
formatter: function(tooltip) {
const point = this.point;
return `<span style='color: ${this.color}'>●</span> ${this.series.name}: <b>${point.originalY}</b>. Target: <b>${point.originalTarget}</b><br/>`
}
},
series: [{
data: [{
y: MAX - Y,
target: MAX - TARGET,
originalY: Y,
originalTarget: TARGET
}]
}]
});
Live demo: https://jsfiddle.net/BlackLabel/ve8hosd3/
API Reference: https://api.highcharts.com/highcharts/tooltip.formatter
I'm using Chart.js 2.6. I have a chart to which I've added custom pagination to step through the dataset, as it is quite large. My pagination and everything works great, I simply grab the next chunk of data in my set and update the chart.config.data with the new data object, and then call .update() on the chart. However, in order to make the chart make sense, I needed to keep the left (Y-axis) scale the same when the user is paginating through. Normally Chart.js would rebuild it based on the data in the chart, but I want it to always reflect the same values.
I've set the max value on the yAxes object of the chart to the maximum value in my data set. I've also set the beginAtZero option to true, and the maxTicksLimit to 10. However, even though my Yaxis does stay the same, it doesn't always look that great (see below screenshot). In this example, my max is set to 21,000 in the chart. Does anyone have any suggestions as to how I can either provide a better max (rounding up to next 5,000, 500, 100, etc based on the value) or some way to get it to create the Y axis without crunching the top number the way it does now?
Here is the function I currently use to determining the max data value to set as the max value in the Yaxes object in the chart. the plugin.settings.chartData variable represents an array of the data values used in the chart. I am trying to get it to increment correctly to the next 1000, 500, etc based on what the maxValue is, but as you can see my math is not correct. In the screenshot example, the maxValue is coming back as 20,750 and my function is rounding it up to 21,000. In this example it SHOULD round it up to the next increment which would be 25,000.
var determineMaxDataValue = function() {
var maxValue = Math.max.apply(Math, plugin.settings.chartData);
var step = maxValue > 1000 ? 1000 : 500;
plugin.settings.maxDataValue = (Math.ceil(maxValue / step) * step);
};
I too had the same problem. You needn't write any special function for determining the max value in the Yaxes. Use 'suggestedMax' setting. Instead for setting 'max' as maximum value in your graph, set suggestMax as the maximum value in your graph. This never works if you have set 'stepsize'.
options: {
scales: {
yAxes: [{
ticks: {
suggestedMax: maxvalue+20
}
}]
}
}
20 is added, so that the tooltip on max value will be clearly visible.
For more info, refer http://www.chartjs.org/docs/latest/axes/cartesian/linear.html#axis-range-settings
Figured it out. Instead of supplying the max value on the Y Axis as I have been, I instead implemented the afterBuildTicks callback and updated the ticks to have the correct increments.
yAxes: [{
afterBuildTicks: function(scale) {
scale.ticks = updateChartTicks(scale);
return;
},
beforeUpdate: function(oScale) {
return;
},
ticks: {
beginAtZero:true,
// max:plugin.settings.maxDataValue,
maxTicksLimit: 10
}
}]
my updateChartTicks function loops over the existing ticks and determines the correct increment amount between the ticks. Then I use that value to add my final "tick" which will always be greater than the largest data in the dataset.
var updateChartTicks = function(scale) {
var incrementAmount = 0;
var previousAmount = 0;
var newTicks = [];
newTicks = scale.ticks;
for (x=0;x<newTicks.length;x++) {
incrementAmount = (previousAmount - newTicks[x]);
previousAmount = newTicks[x];
}
if (newTicks.length > 2) {
if (newTicks[0] - newTicks[1] != incrementAmount) {
newTicks[0] = newTicks[1] + incrementAmount;
}
}
return newTicks;
};
I have a chart with a yAxis, that has a minimum of -5, and max of 5.
The yAxis has these labels: -5, -2.5, 0, 2.5, 5.
My config is so close - I have the right amount of grid/plot lines, but I want to hide a couple of the text labels in the yAxis (not the actual lines relating to the label).
In other words, I want to remove or hide the -2.5 and 2.5 labels.
I've tried various methods in the yAxis, eg step, but it's not achieving what I want.
yAxis: {
labels: {
step: 5
}
}
JSFiddle
Any ideas how to achieve this?
I nearly didn't post this question because I found a (non-SO) answer - perhaps this will help others.
I don't know if this is the most elegant approach for highcharts, but you can use the label formatter to achieve this.
In my case, instead of this:
labels: {
formatter: function () {
return this.value+'%';
}
}
We can add a conditional to check the label's value, and only return something if it's what we want. All together:
yAxis: {
//...
labels: {
formatter: function () {
if (this.value !== -2.5 && this.value !== 2.5) {
return this.value+'%';
}
},
step: 1
},
//...
},
Example
Warning: hard coding some values and depending on them in this way is risky if you have dynamic data. For this instance we don't have dynamic data, they will be fixed, so it's safe for us. Another approach could be to iterate over each value/label and only return every X child as you require.
I want to use highcharts creating a blank chart with no datas but x and y axis.
How to do it?
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
yAxis: {
labels: {
formatter: function() {
return this.value +' km';
}
}
},
series: [{
data: []
}]
});
it returns
But I want to display y-axis with label.
You can put in your min/max values for the xAxis and yAxis and use null for all data.
Forked from #ZaheerAhmed's response above as I figure it deserves a spot as an alternative solution without needing to hide the data after the fact.
i.e.
yAxis: {
min: 1,
max:
} ,
xAxis: {
min: 1,
max: 50
},
series: {
data:[null,null]
}
You can put data and hide the series after setting property
ignoreHiddenSeries : false
Here is Working Demo If you hide the series Y-Axis will still be visible.
FWIW, it seems that highcharts has this functionality built in yAxis.showEmpty
Unfortunately, the fiddle listed in the documentation doesn't work, and there is a related open highcharts issue on the matter:
no hide y axis
Setting min and max for xAxis and yAxis is not a good solution! Because if the data is loaded later (When it's resolved), then you won't have auto calculated min and max. In Highcharts API, it's said:
If null, the max value is automatically calculated
So you should set min and max back to null when the data is loaded. But in my case setting it to null or even deleting the option, didn't result in automatic calculating (Seems strange).
What I did instead was setting charts.showAxes to true! That's it. Take a look at the demo provided by Highcharts
Important: You of course need to set series to something like this:
series: [
{
data: [null, null, null]
},
{
data: [null, null, null]
}
]
Note: Make sure xAxis.showEmpty and yAxis.showEmpty are set true (which is true by default).
I'm using a column chart with the Google Chart JS Api. I'm displaying some values (total orders by day) that can only be represented as integers.
Everything is working great, except that when one of the charts I'm displaying has values that are too low, like 1 or 2, it starts to show decimals on the y-axis. The decimals look silly b/c it's impossible to have "half" an order (which is what I'm counting), and I'd like to hide this if possible.
use the option
vAxis: {format: '0'}
as in
chart.draw(data, {
width: 800,
height: 480,
orientation: 'horizontal',
vAxis: {format: '0'}
}
);
I don't have enough rep to reply to Ian Hunter's post directly, but what that does is format the label, but doesn't set the grid lines to the same value as the label, which can have undesirable results. So let's say you have these grid lines:
10
7.5
5
2.5
0
When you format the label to only show integers it shows this:
10
8
5
3
0
But then your data on the graph doesn't tie-in with the y-scale labels. E.g If you have a value of 3 it actually shows above the '3' labels because the '3' label is actually 2.5
Unfortunately, the only solution I could think of was to monitor the min/max ranges of the data shown in the graph, and then apply some logic to set the min/max according to how many y-scale labels I have, such that they would divide with no remainders.
So in the case above, I'd set it to
vAxis: {
viewWindow:{
max:12,
min:0
}
}
This would give grid lines of
12
8
6
4
0
No decimals, and no problems with the data not correlating with the labels on the graph.
Adding {format : 0} converts the float ticks to integers but the actual values on the bars appear incorrectly.
The main issue is Google Charts API assumes you want 5 gridlines mostly which may not work out to give you integer tick values.
Adding this gave me nice round tick values -
gridlines: { count: -1}
source - https://groups.google.com/forum/#!topic/google-visualization-api/4qCeUgE-OmU
if you want only the integer values to be shown, you should take to account that google charts wants to show you at least 5 gridlines. Presuming all of them should be integer give the graph following:
vAxis: { title: 'Orders Count',
minValue: 4,
viewWindow:{min:0}, /*this also makes 0 = min value*/
format: '0',
},
The easiest way is to edit the left vertical axis, with Min as 0, and Max as a multiple of 5 (5, 10, 15 etc) as appropriate to your expected maximum.
This issue will be resolved if you use vAxis: {gridlines: { count: 4}}
In my case I have values ranging from 0 to 600.
if $value is smaller than 12: use the max value for vAxis.gridlines.count
if $value is greater than 12: use the default nr of gridlines (4)
In this way you only display 'whole numbers'.
You'll need to dynamically generate the javascript off course.
Code Example:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Fase', 'Closed', 'Open'],
<?php
$max = 0; // needed to determine the number of gridlines?
$data = array();
foreach($projectExecutions as $key => $pe){
$totals = countOpenIssuesInProjectExecution($pe);
$open = $totals['open'];
$closed = $totals['closed'];
$data[] = "['". $FASE[$pe['fase_id']] . "', " . $closed . ", ". $open . "]\r\n";
// What are the Max values vor Open & Closed Defects
if($open > $max ){ $max = $open; }
if($closed > $max ){ $max = $closed; }
}
$nrOfGridLines = ($max >= 12 ? 4 : $max+1); // Calculate the number of gridlines
echo implode(",",$data);
?>
]);
var options = {
legend: { position: 'bottom' }
,title: "Evolution Defects: Open -VS- Closed"
,colors:['#00a160','red']
,isStacked: true
,vAxis: {textPosition: 'in', minValue:0,viewWindow: { min: 0 }, gridlines: {count: <?php echo $nrOfGridLines; ?>} }
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_defects'));
chart.draw(data, options);
}
I'm using the following code:
google.charts.setOnLoadCallback(function(){
var data = new google.visualization.DataTable();
data.addColumn('string', 'Y');
data.addColumn('number', 'X');
var max = 0; //Or something like Int.MinValue
for (var i = 0;i< arr.length;i++) {
max = (arr[i]>max)? arr[i]:max; //calculate max value
data.addRow("<<some calculation>>");
}
var options = {
height: 300,
vAxis: {
gridlines: { count: max+1}, //+1 is importent for the origingridline
viewWindow:{
min: 0,
max: max
},
}
};
var chart = new google.visualization.ColumnChart(document.getElementById("<< div_id >>"));
chart.draw(data, options);
}
Just calculate your maximum value and then set gridlines.count to this value
I'm using the Guava Multiset as my data. Cagy79's trick is the only one that I was able to get working. I also tried generating my own lines using an IntStream, but still had fractional numbers for some of the graphs. As mentioned above, just setting the format will create a graph where the hover over value and the gridline differ.
Multiset items = TreeMultiset.create();
Items added using .add and .addAll
Make sure the items are sorted:
occurrences = Multisets.copyHighestCountFirst(items);
String option = "hAxis : { title : 'Count', gridlines : { count:" +
((max >=12) ? 4 : max+1)
+ } }")
I prefer the gridlines: { count: -1 } option, but you can always explicitly specify the values you want with ticks. Cool thing about this is they don't even have to be evenly spaced - you could do [1, 10, 100, 200, 500, 1000] if you wanted:
options: { vAxis: { ticks: [1,2,3,4,5,6,7,8,9,10] } }
Depending upon your data you may want to hardcode this or use thresholds.
For anyone that are also searching for the answer, you can see the answer to this question here, which use options format.
Can't get Google Charts Axis to format in decimal