1)How can you I get categories name of basic column chart in highcharts .E.g. in this fiddle:
"jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/column-basic/"
I want all the categories name which are=>(jan,feb,march,april,may,june,july,aug,sept,oct,nov,dec) .
2) how can i get values of a specific categories like i want values of (Tokyo,newyork,london,berlin) for the month of december.
The xAxis categories for the first xAxis for the first chart can be returned with
Highcharts.charts[0].xAxis[0].categories
Here's a real quick and dirty function that given a location and month will alert the y data value:
getSpecificData = function(location, month){
var chart = Highcharts.charts[0];
for (var i = 0; i < chart.series.length; i++) {
if (chart.series[i].name == location){
for (var j = 0; j < chart.series[i].points.length; j++){
if (chart.series[i].points[j].category == month){
alert(chart.series[i].points[j].y);
}
}
}
}
}
See this fiddle.
Related
I'm wondering if it's possible to define a custom ordering or format for the xAxis in stock highcharts. My dataset has a date time which would be used for the xAxis however my client has specified that it should show in the middle T-0 on the xAxis. Rest of them from the left side should be like -3m -2m -1m and from the right side +1m +2m +3m(In case of year timeframe).
Example for 1 year timeframe
I have tried using formatter function on xAxis labels. However I can not figure out how to get the middle tick first and then start chaging labels to the left and to the right from that middle position tick.
If the formatting, amount and interval of the labels is static, you can use variables from outside of the chart.
For example:
const labels = [];
let labelIndex = 0;
for (let i = -6; i < 7; i++) {
labels.push(i);
}
Highcharts.stockChart('container', {
xAxis: {
...,
labels: {
formatter: function() {
labelIndex++;
if (this.isFirst) {
labelIndex = 0;
}
const label = labels[labelIndex];
if (label < 0) {
return label + 'm';
} else if (label === 0) {
return 'T-' + label;
}
return '+' + label + 'm';
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/L7uy29kw/
API Reference: https://api.highcharts.com/highstock/xAxis
I'd like to be able to change the value of cell, from a number to text - but I'm not sure how to do it?
I have two tabs, Source and Heath Hill.
Heath Hill uses Query to pull in specific cells from the source tab. Here's my formula:
=QUERY(Source!$1:$1000,"select A,AB, D,F where C = 'Heath Hill'",1)
Columns C and D in Heath Hill are numbers, I'd like to be able to replace them with text.
Column C
Replace any number 1 with Business Interest
Replace any number 2 with Representing an interest group
Replace any number 3 with Profession
Column D
Replace any number 1 with Agree
Replace any number 2 with Disagree
Replace any number 3 with Don't know
Here's a link to my example Google Sheet I've simplified it.
Solution
To achive what you are aiming here you will need to use an if function.
The formulas you would need to use are as follow:
For column C : =IF(C2=1,"Business Interest",IF(C2=2,"Representing an interest group","Profession"))
For column D : =IF(C2=1,"Agree",IF(C2=2,"Disagree","Don't know"))
Here is an example of this implementation. I have created a new column for making it easier to visualise and the I just dragged and dropped to include all the values.
I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)
Its better to use App Script instead
function UpdateReplace() {
var spreadsheet = SpreadsheetApp.openById('Sheet ID');
var doc = spreadsheet.getSheetByName('Sheet_Name');
var range = doc.getRange("C2:C");
var data = range.getValues();
for (var row = 0; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
data[row][col] = (data[row][col]).toString().replace('1', 'Business Interest');
data[row][col] = (data[row][col]).toString().replace('2', 'Representing an interest group');
data[row][col] = (data[row][col]).toString().replace('3', 'Profession');
}
}
range.setValues(data);
Var range1 = doc.getRange("D2:D");
​Var data1 = range1.getValues();
for (var row = 0; row < data.length; row++) {
for (var col = 0; col < data[row].length; col++) {
data1[row][col] = (data1[row][col]).toString().replace('1', 'Agree');
data1[row][col] = (data1[row][col]).toString().replace('2', 'Disagree');
data1[row][col] = (data1[row][col]).toString().replace('2', 'Don't know');
}
}
range1.setValues(data1);
};
When I'm drawing BOX Plot chart with Highchart like this : JSFiddle
chart: {
type: 'boxplot',
}
where category 2 "Merchant 2" is shown on x-axis even though we don't have data for it.
How can we avoid rendering categories on x-axis when they don't have data in box plot ?
Thank you
There's no built in mechanism in Highcharts that'll filter out and hide "unused" categories.
Workaround:
breaks functionality allows to hide regions on axes. Here's an algorithm that finds the categories that don't have any points above them and applies breaks:
render: function() {
if (redrawEnabled) {
redrawEnabled = false;
var emptyCategories = [],
series = this.series,
xAxis = this.xAxis[0],
categories = xAxis.categories.slice(),
categoryFlags = new Array(categories.length).fill(false), // indicates if any point has a value for category with the given index
breaks = [],
correspondingPoint;
// find out which categories are 'used'
for (var i = 0; i < categories.length; i++) {
for (var ii = 0; ii < series.length; ii++) {
if (!series[ii].visible) {
continue;
}
correspondingPoint = series[ii].data.find((point) => point.x === i);
if (correspondingPoint) {
categoryFlags[i] = true;
break;
}
}
}
// create and apply breaks
categoryFlags.forEach(function(flag, index) {
if (!flag) {
breaks.push({
from: index - 0.5,
to: index + 0.5
});
}
});
//console.log(breaks)
xAxis.update({
breaks: breaks
});
}
redrawEnabled = true;
}
Live demo: http://jsfiddle.net/BlackLabel/fubwdm4x/
The key to understand how this solution works is that the categories are basically just information how to format axis' labels and position ticks. The tickInterval is always 1 and ticks are moved -0.5 to the left. So if you have categories like this: ['Category 1', 'Category 2', 'Category 3'] the positions of ticks are: -0.5, 0.5, 1.5 and 2.5.
API reference: https://api.highcharts.com/highcharts/yAxis.breaks
Situation : Chart with some analogic-series and some digital-series (0-1).
The problem is with the digital series. I would like to make sure that the series do not overlap like the image 1.
My idea is to set an "y-offset" on the digital-series, to have a result like the image 2.
This is a part of the y Axis configuration of the digital series. All the digital-series is related to a single y Axis (with id digital).
id : "digital",
min: 0,
max : 1,
ceiling:1,
floor : 0,
tickInterval: 1
Image 1.
Image 2.
In the documentation i can't find anything that can help me. And this is not my case.
UPDATE
Example on JSFIDDLE. Look (yes it's impossible currently) at the digital series with green color.
If you add a function in the load event, you can change the value of y in a way that makes it look offset. Like this:
chart: {
events: {
load: function() {
var series = this.series;
for (var i = 0; i < series.length; i++) {
if (series[i].yAxis.userOptions.id == "digital") {
for (var j = 0; j < series[i].data.length; j++) {
if (series[i].data[j].y == 1) {
series[i].data[j].y = 1 + 0.1 * i;
} else {
series[i].data[j].y = 0
}
}
this.update(series, true, false);
}
}
}
}
}
This sets the new y value equal to 0.1 * the series index.
Working example: https://jsfiddle.net/u2pzrhgk/27/
I'm looking to clone a row 3x, but only keeping data from one column.
So essentially I have the following [Name / Time / Booking], and each row is populated with all 3 properties, I'm trying to create 3 blank rows underneath each current row which is populated with only the persons name.
Can't work how to do it in scripting and can't find a plugin to do this. My data set is over 10,000 big so doing it manually isn't an option.
What I have:
What I want:
UPDATED code:
function duplicateRows() {
var sh, v, arr, c, b;
sh = SpreadsheetApp.getActive()
.getSheetByName('Blad1')
v = sh.getRange(1, 1, sh.getLastRow(), 40)
.getValues();
arr = [v[0]];
v.splice(1)
.forEach(function (r, i) {
arr.push(r)
c = 0
while (c < 3) {
dup = makeEmptyArrayXEl(40)
dup[0] = r[0];
arr.push(dup)
c += 1;
}
})
sh.getRange(1, 1, arr.length, arr[0].length)
.setValues(arr);
}
function makeEmptyArrayXEl(num) {
var arr = [];
for (var i = 0; i < num; i++) {
arr.push("")
}
return arr;
}
Would this work for you? It requires a free column to the left of Booking in the original data set. The formula below is a new sheet.
=ArrayFormula(sort({A2:A4,B2:B4,C2:C4;A2:A4,D2:D4,D2:D4;A2:A4,D2:D4,D2:D4;A2:A4,D2:D4,D2:D4},1,FALSE))