I want to export chart data from a website.
Using console.log(Highcharts.charts[0].series[0].data) I can see the data I need.
I want the values stored under Highcharts.charts[0].series[0].data[n].category for n in [0, 1, ..., N_data_points-1] (These values are the time-stamps of the data points in the plot.)
When I try to use JSON.stringify(Highcharts.charts[0].series[0].data) to write the whole data attribute I get Uncaught TypeError: Converting circular structure to JSON.
How can I get that data[n].category values for all n data points?
Note that the x axis data can be obtained straightforwardly via Highcharts.charts[0].series[0].processedXData, but these are not the dates, just consecutive integers.
Also, I don't necessarily need to do this via console. If it's possible to get the data via, say, a Python script, that would do as well.
You can adapt the python/selenium script here.
Most of the stuff remains as is, except for obvious changes (change the url, etc).
You can get the category data of each data point with:
dates = []
for i in range(len(values)):
date = driver.execute_script('return Highcharts.charts[0].series[0].data[{}].category'.format(i))
dates.append(date[0])
EDIT: as pointed out in a comment, you can get the category data without a for loop using:
categories = driver.execute_script('return Highcharts.charts[0].userOptions.xAxis[0].categories')
Related
I'm working on an app/sheets combination scoring system for a tournament. The current data in the Firebase database is stored under a tag like so: tag:"[\"Test\",-1,12,3]"
The data is in the form of a list containing a single string and 3 numbers. Each index in the list will be stored in consecutive cells so referencing the data is easy. The difficulty I am having is formatting the data from the sheet to write it to the database in the same format.
Using JSON.stringify doesn't quite give me what I'm looking for:
var range = sheet.getRange(22,24,4,1);
var data = JSON.stringify(range.getValues());
result:
tag:"[[\"Test1\"],[70],[0],[18]]"
This is not quite the same as the rest of the data as I'm turning the entire range to a string by using stringify, but I don't know of a way to format the data to be stored as [string, int,int,int]. I am new to app scripts and java (hence my lack of knowledge of functions) and was hoping somebody knows of another way to write the range of cells to match the data stored in the database.
First thing, Google Apps Scripts uses JavaScript, not Java.
Second thing getValues() returns a Array of Arrays where each inner Array has the values of a row from the corresponding range. In order to get what you are looking for you have to flatten the result of getValues(). One way to do this is this:
var range = sheet.getRange(22,24,4,1);
var data = JSON.stringify(range.getValues().map([value] => value));
var values = [["Test1"],[70],[0],[18]];
var data = JSON.stringify(values.map(([value]) => value));
console.info(data)
I’m trying to use data from multiple GoogleSheets to produce a single HighChart graph.
I’d like to do this without moving all the data into one area of a single spreadsheet, particularly as I want to use the drilldown option which would make it difficult to collect all the data together.
I thought I could pass the columns as an array and then reference the array in the data property of my chart, but I’m struggling to do that with even one column from one sheet.
I have searched for answers online, but I have not found anything relating to highcharts getting data from multiple sources.
Previous Research:
Using GoogleSheets Data as an array before creating the chart: (Removed Link) - The problem is that I could only use one GoogleSheets reference here as the chart object sits inside the data object.
API documentation - (Removed Link) – tells me I can access the columns but that’s not the part I’m having problems with
Querying the Chart: (Removed Link) - I have actually considered making hidden charts, then interrogating the data and making new charts from those, but that seems like a very long way round and I’m still not sure I could grab all the data I need.
Using two GoogleSheets for separate charts on the same page: (Removed Link) I have done this.
Please could you help me to understand how I can access the properties and methods of this object outside of the object itself?
Thank you.
My Code:
//Function to produce a data array ***Not Working - Cannot extract array from object method***
function getData(){
Highcharts.data({
googleSpreadsheetKey: '12x66_QEkTKg_UzvpHEygdTmfnu7oH81pSQYn78Hxt80',
googleSpreadsheetWorksheet: 4,
startColumn: 16,
endColumn: 22,
startRow: 63,
endRow: 76,
parsed: function (columns) {
var dataTest2 = [];
var columnLength = columns[1].length;
for (i = 0; i < columnLength; i = i + 1) {
dataTest2.push(columns[1][i]);
}
alert(dataTest2); //This works here, but not if I move it outside of the method, even if I return it.
var testReturn = this.googleSpreadsheetKey; //trying to return any property using "this" - I've also tried this.googleSpreadsheetKey.value but still undefined
return testReturn; //returns "Undefined"
}
});
}
You could use Google Sheets webQuery. Basically, this is a method to export the Spreadsheet's data into a given format such as csv, json, etc. In your case, the link should look like this:
https://docs.google.com/spreadsheet/tq?key=12x66_QEkTKg_UzvpHEygdTmfnu7oH81pSQYn78Hxt80&gid=4&tq=select%20A,%20B&tqx=reqId:1;out:csv;%20responseHandler:webQuery
Please note that here "tg?key" is the key of your Google Sheet, and "&gid=" is NOT 4, this only tells Highcharts to selected Sheet 4, but for Google Sheets look at the source link and copy the numbers which go after "&gid=". Furthermore, "&tq=" is used to select the columns of the Google Sheet, which in the link above selects "Column A" and "Column B". To find out more on how to select columns and query the output refer to:
https://developers.google.com/chart/interactive/docs/querylanguage?csw=1#Setting_the_Query_in_the_Data_Source_URL
Lastly, "&tqx=" is used to output your data in the format you want. The above link uses "out:csv" which will output the data as comma-separated values. This could as well be Json if you like. Have a look at this documentation:
https://developers.google.com/chart/interactive/docs/dev/implementing_data_source#requestformat
In order to implement this output into your javascript code which you would then use to built your chart, you could use external Javascript libraries to handle these outputs. If you output your data as CSV, you can use "papaparse.js" to parse the CSV into Json which you can be then read by highcharts and allows you to built the chart. Refer to this documentation:
http://papaparse.com/docs#remote-files
An alternative to this would be, to output your Google Sheets directly as Json, then use jquery to make an Ajax Call and load the JSON-encoded data into your Javascript code. Precisely, you could perhaps use jQuery.getJSON() to get the data. Look at this link for more details on how to get Json:
http://api.jquery.com/jquery.getjson/
Finally, it is up to you on which format you choose to output the data, I prefer using Json as it saves you the extra step of having to convert the CSV into Json. Whatever suits you best and is easier for you to understand.
Once you have your data, you may have to parse your Json objects with Json.parse(), and then organize your data into an array with .push(). As #jlbriggs stated, organize your data first before you built the chart. Afterwards, you can make two, three or more Ajax calls to import data from different sources. I would not use many as this will impact in your loading and slow down data transfer.
NB: It is important to format the data accordingly for Highcharts to recognize the data, so use parseFloat() to convert strings into numbers, Date.UTC() to convert strings into date, etc.
Hope this helps you.
I need to read back the chart details like styles, type, and all the attributes which are used to display any chart by Highchart, i.e. similar to chart.getSVG(). I need something like chart.getJSON() to save the entire JSON template with user chosen colors, fonts, series location etc in the DB, except the "data".
When we do the automatic distribution of the above mentioned chart using HighChart server, we need to read the above template with all the user specific attributes, but insert new data values for X and Y which we have, i.e only values will be new here, not the style. What is the best way to do it?, i.e. read the user template on the chart, but generate pdf with the new values. Your help is appreciated.
You can get all non-default options set for chart from:
var userOptions = $("#container").highcharts().userOptions
So options used when creating chart are stored there. Now you can use that object (without userOptions.series array of course) to store in your DB.
To remove series array use this snippet:
delete userOptions.series
And now you can create object using:
var myJSON = JSON.stringify(userOptions);
And send myJSON to you DB and store it.
I am returning a query object from Coldfusion as a JSON string which I then parse into JSON in Javascript. It has a bit of a strange format when I finally log it though.
I am faced with two problems. First, I do not know how to access the lowest element (i.e Arthur Weasley) as I cannot use a number in my selector (response.DATA[0].0 doesn't work because the lowest field name is a number). Second, is there any way to assign the values in the columns section to the fields that are numbered 1, 2 and 3?
What I'm really asking is how do I select my lowest level of data? If that can't be done because of the numbers for field names, how do I change the names to something more fitting?
My data logged:
First entry of first entry of DATA = response.DATA[0][0]
So
name = reponse.DATA[0][0];
trainsThing = response.DATA[0][1];
I am currently taking my first steps in D3 data visualisation. So far, the D3 tutorials have helped me a lot. The pie chart tutorial http://bl.ocks.org/mbostock/3887235 though does not further explain the necessary data structure for pie charts.
My data is more complex than the label/value structure of the example. I have the annual total import data and import data of a specific good stored in JSON:
var data = [{"year":"2001","total_import":"100000","import_specific_good":"25000"},{"year":"2002",...}];
If I understand the tutorial correctly pie() iterates over the SAME entry of each DIFFERENT object.
What if I need specific DIFFERENT values of the SAME object?
I am not interested in a pie showing all annual total imports as portions, but the annual import of a specific good as a portion of the annual total import. My values would be 1. (total_import - import_specific_good) and 2. import_specific_good.
Is my proposed data structure correct for what I want to do? Or do I have to restructure everything so that the values for every year are stored in a separate variable?
var data_2001 = [{"label":"Total Import","value":"100000"},{"label":"Import of Specific Good","value":"25000"}];
var data_2002 = [{"label": ...}];
You don't have to use a specific data structure -- you can (and will need to anyway) modify the example so you can use anything you like! So you can use your first JSON just fine. As you have only 2 values to show, you could simply construct the structure to pass to .data() on the fly.
// for pie chart
...data([json[index].total_import - json[index].import_specific_good,
json[index].import_specific_good])...
...
// similarly for the labels
I would advise to store the numbers as numbers (e.g. without quotes) in your JSON though -- otherwise you'll have to convert them to numbers in Javascript.