javascript - Extracting data from a JSON call to a Postgres table for use in Highcharts (without PHP) -


i using json retrieve data postgres table use in highcharts column chart. have 5 time-series in database, each 5 elements, , want use 2 key:value pairs each time-series in chart.

the output needs in format:

an array of objects named values. in case objects point configuration objects seen below.

range series values given low , high.

example:

data: [{           name: 'point 1',           color: '#00ff00',           y: 0       }, {           name: 'point 2',           color: '#ff00ff',           y: 5       }] 

note line series , derived types spline , area, require data sorted x because interpolates mouse coordinates tooltip. column , scatter series, each point has own mouse event, not require sorting.

that's taken highcharts series / data api: http://api.highcharts.com/highcharts#series.data

here's db schema:

enable_extension "plpgsql"  create_table "series", force: true |t|   t.string   "acronym"   t.string   "name"   t.string   "current"   t.string   "previous"   t.string   "pc1"   t.datetime "created_at"   t.datetime "updated_at" end end 

here's json call:

url = "http://local server 3000/series"; $.getjson(url, function (series) {     console.log(series);     }     options.series[0].data = series;     var chart = new highcharts.chart(options);  }); 

console.log shows array of objects being returned:

[object, object, object, object, object] 0: object acronym: "1" current: "3.4" id: 1 name: "a" pc1: "25" previous: "2.4" url: "http://localhost:3000/series/1.json" __proto__: object 1: object 2: object 3: object 4: object length: 5 __proto__: array[0] 

i "opened" first object in order show how data being returned. notice key:value pairs not followed comma (which highcharts asks for).

in current chart, column chart, want display series "name", e.g., "a", , value of corresponding key / value pair "pc1". (they're going economic time series, e.g., cpi, , year-over-year percent change.) plan on creating other charts with, example, current , previous values, particular time series.

i'm new programming , not know how "extract", if will, key:value pairs highcharts format.

i tried pushing data new array no luck:

var data = []; data.push(series[0].name + "," series[0].pc1);  

i tried loop no luck:

for (var = 0, l = series.length; < l; i++) { var key = series[i].name; var value = series[i].pc1; var data = [ [key + ":" + value], }; 

in attempts, build array, not nested 1 of objects , / or 1 comma between x , y values.

i tried splice(); however, remove entire objects.

so, how output looks like:

data: [{ name: 'a', pc1: '25', }, { name: 'b', pc1: '15', }] 

i see complex code in answers relating php , mysql; however, there's nothing json alone (that find).

a related question: approaching problem correctly. or should i, perhaps, create new database table each chart data want display saved , retrieved.

thank in advance.

i not recommend create new database table each chart. not necessary. can tailor sql queries table suit chart data needs.

one issue y-value string, not want in graphing application. should cast integer in sql query.

the data form array of hashes. initialize array , add 1 such element, this:

data = []; data.push({'name': 'a', 'pc1': 25}); 

to see data in pretty-printed form, can verify in console code:

print(json.stringify(data)); 

so, can build array of hashes in loop (or via mechanism such jquery's $.each).

that method hand-rolling own json, though, kind of tedious , can error-prone in cases. easier method have backend convert result of postgres query json directly.

ruby (which assume you're using in backend based on schema definition code) has json module (http://www.ruby-doc.org/stdlib-2.0.0/libdoc/json/rdoc/json.html) can this.

note work, postgres library need return data array of hashes, has column names (just array of arrays not work). doable through libraries such psycopg2 (python) , dbi (perl), , available in ruby library you're using also.


Comments

Popular posts from this blog

javascript - RequestAnimationFrame not working when exiting fullscreen switching space on Safari -

Python ctypes access violation with const pointer arguments -

jquery - Keeping Kendo Datepicker in min/max range -