Make graph in d3 with google analytics JSON array - javascript

I'm currently extracting the amount of sessions by date from the google analytics api. I turn this data from a basic Javascript array into a JSON. The JSON data looks like this
[["20140521","7"],["20140522","5"],["20140523","1"]]
The date then the amount of sessions.
I'm fairly new to using D3.js but can't seem to find an accurate guide on how to take each object and plot my dates as the x and my sessions as the y. I'm also aware that I may need to make my data look like this: ["20140521": 7] How could I go about doing this?
If somebody could point me in the right direction it would be much appreciated. Please let me know if you have any questions!
Thank you!

Related

Getting data from JSON (i think)

I hope someone here can help me with this as i am at a loose end. I have a little experience with programming (variables, etc) but not much at all with Javascript, JSON and many others.
Unfortunalty i cannot fully describe what im doing as it invloves sensitive info but i will try my best:
My plan is to collect data from a webhook and enter it into a google sheet which can then be seen by myself and my colleagues (and it needs to be as 'real-time' as possible, hence using webhooks instead of API - i think)
Ive been using google apps script and javascript
At the moment i just want to be able to collect the data from 1 variable, once i know how to do that i can hopefully figure out how to get the rest of the data that i need from the other variables - but there is another problem, the JSON data seems to come in 2 different formats which to be perfectly honest i confusing the **** out of me, so if anyone can could you please explain as best you can what i need to do.
I have looked at w3 schools and a number of other sites and forums (of which this one seemed to make the most sense hence me asking on here) but most of it has fryed my brain.
anyway here is what i need :
I would like to get the data from "title" - in this example "Order #301428\"
here is part of the webhook i have received - the data has made it to the spreadsheet but it is in one massive string which is no good to me, i need to be able to just grab the data i need.
also could someone please tell me how to enter the data i need in a google sheet
Thank you very much in advance for any help
here is the 1st format that i have recieved (not complete as sensitive data) :
{"parameter":{},"postData":{"contents":"{\"id\":12374453,\"title\":\"Order #301428\",\"created_at\":\"2020-04-28T23:43:13.000Z\",\"updated_at\":\"2020-04-30T10:52:27.000Z\",\"customer_id\":10960996,\"user_id\":14426,\"status\":4,\"scheduled_at\":\"2020-04-30T10:00:00.000Z\",\"merchant_id\":149,\"extras\":{\"previous_task_distance\":null,\"distance_to_team\":null},\"
here is the 2nd format :
{"contextPath":"","parameters":{},"contentLength":23356,"parameter":{},"queryString":"","postData":{"contents":"{\"id\":12425150,\"title\":\"Order #354554\",\"created_at\":\"2020-04-30T09:14:01.000Z\",\"updated_at\":\"2020-04-30T10:43:11.000Z\",\"customer_id\":11003352,\"user_id\":14894,\"status\":4,\"scheduled_at\":\"2020-04-30T11:00:00.000Z\",\"merchant_id\":149,\"extras\":{\"previous_task_distance\":null,\"distance_to_team\"
thank you again
Thank you all for your help - i've looked through numerous tutorials and other information but no matter what i do i cant get it to work and i honestly have no idea what im doing wrong - the thing that is really getting me is i can get the long string of data to show up in google sheets so i know ive got the connection there right - but when i follow any of the advice regarding JSON.parse, Javascript objects, JSON.stringify or anything else it just doesnt work - heres my code (my latest test)
var data = JSON.parse(e);
var orderno = data.postData.contents[1];
sheet.getRange(lastRow + 1,1,1,1).setValue([orderno]);
for some reason i cant enter all of my code
Take the json and parse it into an object:
https://www.w3schools.com/js/js_json_parse.asp
You should then be able to access the attributes like so:
obj.postData
PostData appears to be another json string embedded in the first json, so you will need to parse that as well.

Geocoding information from a web crawler with Javascript

I've built some web crawlers to gather information about Hijacking Hotspots in South Africa... I've retrieved location information, but its all listed in a vague format, e.g.: "The William Nicol Drive offramp from the N1 from the Sandton side" ... Each location is formatted in JSON format right now.
My Problem:
I want to iterate through a list of all these descriptions/locations and retrieve rough GPS coordinates for each one. Would using the Google API with Javascript be the best option for achieving this? And does anyone have some code examples to demonstrate how I should go about getting this done with Javascript. Please keep in mind that I'm only an intermediate Javascript coder.
I need the quickest most efficient method of getting this done because I'm on a tight deadline and I'll have to use this method for a few other purposes as well.
Sample JSON Data:
{"data":{"area":"Cape Town","location":"Corner of Alice St and Voortrekker Road", "gps":"?"}}
It would be great if you can provide a sample of your JSON response.
The Getting Started page for Maps API have samples that will guide you through the whole process of what you want to develop.
The easiest way to do it is if the JSON response you have have lat/long coordinates. This way, you iterate through the items and place Markers to the map.
If no coordinates are available, but there's a placeId on the response, you can try out the Places API. You'll just need to provide the placeId in PlacesService.getDetails() and the response will contain an object with the lat/long coordinates - which you'll add into the marker.

Implementing highcharts for Coin currency market

I have coin currency market application and I would like to integrate a graph in it, however I don't know from where data should be taken. Is there some API that I can integrate into my highcharts in order to get graphical representation of values of the coin in the past 7,14,30 days? I have scrapped all data from http://coinmarketcap.com/ but I can't scrap graph because it's canvas. Can you help me with that? Where to search for coin data in the past?
The coinmarketcap site uses json data for the charts. If you look at the network activity in the console, you can see requests for items like:
http://coinmarketcap.com/static/generated_pages/currencies/datapoints/bitcoin-main.json
This contains the json data for the bitcoin chart. However, there does not seem to be any way to specify different time periods.
A quick look around produced this site for bitcoin info (https://bitcoinaverage.com/api). There are lots of links which may help here: able to get prices from here: http://bitcoincharts.com/charts
You can also check yahoo fincancem which allows to get data via API.

Rickshaw.js graph with ajax/jsonp adding axis

I'm new to javascript jQuery and JSON and I'm starting a project where I'd like to do some graphs in a browser. Digging through tutorials and examples I'd like to create a graph with some data gathered with JSON and then work with the graph as shown in the examples (adding axes... ).
So I'm pretty sure the problem is that creating the graph with var ajaxGraph = new Rickshaw.Graph.Ajax doesn't return the same object as var graph = new Rickshaw.Graph. The Rickshaw.Class.create function used for var ajaxGraph = new Rickshaw.Graph.Ajax is too complicated for me to comprehend with my current skills. Can I somehow get the proper graph object from Rickshaw.Graph.Ajax? Or should I try to use JSON separately and then call var graph = new Rickshaw.Graph somehow?
Thanks for any hints.
I would definitely consider rather doing the JSON stuff separately, getting the data into the correct format and then binding Rickshaw to it.
Doing that might not be as hard as you think and will be useful later on for different work. Using Rickshaw's ajax abstraction doesn't really save you from complexity in my opinion.
Here's a screencast that I created that goes through exactly what you need: http://tagtree.tv/d3-with-rickshaw-and-angular. It might be a bit more complex because it plonks a Rickshaw graph into an Angularjs app, which has it's own challenges. But what it does show you, is how to massage the data you get from the server into the correct format to give to Rickshaw.
Getting the data from the server with jQuery is quite easy. You can use the shorthand ajax methods:
http://api.jquery.com/category/ajax/shorthand-methods/
Or even get to know the ajax call (I think it's better to start here):
http://api.jquery.com/jQuery.ajax/
Then massaging the data so that Rickshaw can bind to it, I would recommend using underscore:
http://underscorejs.org/

How to plot an array of numbers as an image using Javascript?

I would like to plot an array of numbers (int/float/binary/..) as an image using Javascript and I don't know exactly how to do it..
The system is composed of a CORE part done in C++ and a GUI part done in jQuery, and I have to show results calculated by the CORE in the GUI side. I can pass them in any format such as binary files, XML files,... but I don't know how the GUI might plot an array of numbers and show them as an image to the user.. Also It may be useful to have an scale of colours..
any suggestion on doing that? any available library for that purpose? every idea is welcome!
thanks in advance!
cheers
Have a look at d3.js. This library provides plenty of possible visualizations and is quite easy to customize.
Here is a list of plot libs in js:
http://javascript.open-libraries.com/utilities/chart/20-best-javascript-charting-and-plotting-libraries/
You need to format your data in json to get it work. if the data set is very big, better to plot is on server side and send a image file to client.

Categories