Related
I am trying to write a parquest schema for my json message that needs to be written back to a GCS bucket using apache_beam
My json is like below:
data = {
"name": "user_1",
"result": [
{
"subject": "maths",
"marks": 99
},
{
"subject": "science",
"marks": 76
}
],
"section": "A"
}
result array in the above example can have many value minimum is 1.
This is the schema you need:
import pyarrow as pa
schema = pa.schema(
[
pa.field("name", pa.string()),
pa.field(
"result",
pa.list_(
pa.struct(
[
pa.field("subject", pa.string()),
pa.field("marks", pa.int32()),
]
)
),
),
pa.field("section", pa.string()),
]
)
If you have a file containing one record per line:
{"name": "user_1", "result": [{"subject": "maths", "marks": 99}, {"subject": "science", "marks": 76}], "section": "A"}
{"name": "user_2", "result": [{"subject": "maths", "marks": 10}, {"subject": "science", "marks": 75}], "section": "A"}
You can load it using:
from pyarrow import json as pa_json
table = pa_json.read_json('filename.json', parse_options=pa_json.ParseOptions(explicit_schema=schema))
I have an existing List i.e.
[
{
"name": "miller",
"age": 22,
"nationality": "Romania",
"doj": "2018-09-17",
},
{
"name": "sochi",
"age": 35,
"nationality": "Poland",
"doj": "2018-10-11",
},
{
"name": "diana",
"age": 35,
"nationality": "Belarus",
"doj": "2018-12-14",
}
]
and would like to create a new List using the above list (with fewer fields) i.e.
[
{
"name": "miller",
"nationality": "Romania",
},
{
"name": "sochi",
"nationality": "Poland",
},
{
"name": "diana",
"nationality": "Belarus",
}
]
You can map the list and either remove the key that you want to be removed or copy all the keys that you want to keep.
var newList = list.map((e) => e..remove('doj'));
//or
var newList = list.map((e) => {'name': e['name'], 'age': e['age'], ...);
I want to use Select2 in Tabulator but triggering the selected value does not work.
Here is my code of the formatter for the table column:
{
title: "Select2", field: "lucky_no", align: "center", width: 300, editor: true,
formatter: function (cell, formatterParams, onRendered) {
onRendered(function () {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function (e) {
console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
I have added a working example.
Triggering the selected value works in drop-down above the table.
Although in the table the change event is triggered it does not show the selected value in the dropdown.
Thanks,
Aad
If you are trying to make the field editable, you should be creating a custom editor not a formatter
Formatters are for displaying data to users, editors are for allowing the user to edit the data.
Built In Select Editor
Before I go to far into this example, did you know that Tabulator already comes with a Select Editor built-in to make your life even easier, in the demo in the documentation, have a look at the gender column to see it in action.
Custom Editor
When using custom editors, they come with select and cancel call backs to allow you to pass the data back into the table.
So for your example it should look something like this (this code is untested)
//create custom editor
var select2Editor = function(cell, onRendered, success, cancel, editorParams){
//create input element to hold select
var editor = document.createElement("input");
onRendered(function(){
var select_2 = $(editor);
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
});
select_2.on('change', function (e) {
success(select_2.val());
});
select_2.on('blur', function (e) {
cancel();
});
});
//add editor to cell
return editor;
}
//in your column definition for the column
{title: "Select2", field: "lucky_no", align: "center", width: 300, editor: select2Editor},
My first question .. this was not included!
var tabledata = [{
id: 1,
name: "Oli Bob",
progress: 12,
location: "United Kingdom",
gender: "male",
rating: 1,
col: "red",
dob: "14/04/1984",
car: 1,
lucky_no: 3
},
{
id: 2,
name: "Mary May",
progress: 1,
location: "Germany",
gender: "female",
rating: 2,
col: "blue",
dob: "14/05/1982",
car: true,
lucky_no: 2
},
{
id: 3,
name: "Christine Lobowski",
progress: 42,
location: "France",
gender: "female",
rating: 0,
col: "green",
dob: "22/05/1982",
car: "true",
lucky_no: 5
},
{
id: 4,
name: "Brendon Philips",
progress: 100,
location: "USA",
gender: "male",
rating: 1,
col: "orange",
dob: "01/08/1980",
lucky_no: 7
},
{
id: 5,
name: "Margret Marmajuke",
progress: 16,
location: "Canada",
gender: "female",
rating: 5,
col: "yellow",
dob: "31/01/1999",
lucky_no: 4
},
];
var list = [{
"id": 1,
"text": "Organisatorische tekortkomingen"
}, {
"id": 2,
"text": "Mechanische gevaren"
}, {
"id": 3,
"text": "Hijs-/hefgevaren"
}, {
"id": 4,
"text": "Ergonomische tekortkomingen"
}, {
"id": 5,
"text": "Mobiliteit en gevaarlijke situaties"
}, {
"id": 6,
"text": "Elektrische gevaren"
}, {
"id": 7,
"text": "Blootstelling aan gevaarlijke stoffen"
}, {
"id": 8,
"text": "Gevaarlijke situaties - Algemeen"
}, {
"id": 9,
"text": "Blootstelling aan straling"
}, {
"id": 10,
"text": "Druk"
}, {
"id": 11,
"text": "Blootstelling aan trillingen"
}, {
"id": 12,
"text": "Blootstelling aan geluid"
}, {
"id": 13,
"text": "Fysieke gevaren (overig)"
}, {
"id": 14,
"text": "Gevaar voor/door derden (hijsen/heffen)"
}, {
"id": 15,
"text": "Hijsen/heffen en ergonomische tekortkomingen"
}, {
"id": 16,
"text": "Mobiliteit en werkplek/bestuurdersplaats"
}, {
"id": 17,
"text": "Mobiliteit en ergonomische tekortkomingen"
}, {
"id": 18,
"text": "Mobiliteit en energiebron en -overbrenging"
}, {
"id": 19,
"text": "Mobiliteit en stabiliteit"
}, {
"id": 20,
"text": "Gevaarlijke situaties door onverwachte opstart/beweging"
}, {
"id": 21,
"text": "Gevaren beheerst!",
"scope": "Algemeen"
}, {
"id": 22,
"text": "NIET beoordeeld!"
}];
$('#selectList').select2({
data: list,
minimumResultsForSearch: Infinity,
width: 'resolve',
minimumInputLength: 0,
allowClear: true,
placeholder: "Select",
});
$('#selectList').val(7).trigger('change');
//Build Tabulator
var table = new Tabulator("#example-table", {
height: "500px",
columns: [{
title: "Name",
field: "name",
width: 150
},
{
title: "Location",
field: "location",
width: 130
},
{
title: "Progress",
field: "progress",
sorter: "number",
align: "left",
formatter: "progress",
width: 140
},
{
title: "Gender",
field: "gender",
editor: "select",
editorParams: {
"male": "Male",
"female": "Female"
}
},
{
title: "Rating",
field: "rating",
formatter: "star",
align: "center",
width: 100
},
{
title: "Date Of Birth",
field: "dob",
align: "center",
sorter: "date"
},
{
title: "Driver",
field: "car",
align: "center",
formatter: "tickCross"
},
{
title: "Select2",
field: "lucky_no",
align: "center",
width: 300,
//editor: true,
formatter: function(cell, formatterParams, onRendered) {
onRendered(function() {
var select_2 = $(cell.getElement());
select_2.select2({
theme: "classic",
placeholder: 'Select',
data: list,
minimumResultsForSearch: Infinity,
width: 300,
minimumInputLength: 0,
allowClear: true,
}).on('change', function(e) {
//console.log('change');
});
select_2.val(list[cell.getValue()].id);
var x = select_2.val();
select_2.val(x).trigger('change');
})
}
},
],
});
//load sample data into the table
table.setData(tabledata);
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/tabulator-tables#4.1.3/dist/css/tabulator.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/tabulator-tables#4.1.3/dist/js/tabulator.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<html>
<body>
<div>
<select class="form-control" name="selectList" id="selectList">
</select>
</div>
<br />
<div id="example-table" class="table-striped table-bordered"></div>
</body>
</html>
I am trying to get image from Highchart export module, and it is giving image with
chart input data error, syntax error : Unexpected EOF.
Please see code in this js fiddle.
http://jsfiddle.net/GopinathGD/3xy8aeb7/
$(function () {
$("#b").click(testPOST);
var exportUrl = 'http://export.highcharts.com/';
function testPOST() {
var dataStr= {
"colors": [
"#C00000"
],
"chart": {
"type": "bar"
},
"title": {
"text": "Current Analysis Competitive Index",
"style": {
"fontWeight": "bold",
"color": "rgba(164, 0, 31, 0.96)"
}
},
"subtitle": {
"text": "Source: © 2017 Current Analysis, Inc."
},
"xAxis": {
"tickWidth": 1,
"minPadding": 0,
"maxPadding": 0,
"categories": [
"Overall",
"Vision/Strategy",
"Momentum & Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service & Support"
],
"title": {
"text": null
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"yAxis": {
"min": 0,
"max": 10,
"tickInterval": 1,
"tickmarkPlacement": "off",
"categories": [
"",
"Vulnerable",
"",
"Competitive",
"",
"Strong",
"",
"Very Strong",
"",
"Leader",
""
],
"title": {
"text": "",
"align": "high"
},
"labels": {
"style": {
"color": "#000000",
"fontWeight": "bold",
"fontSize": "12px"
}
}
},
"plotOptions": {
"bar": {
"dataLabels": {
"enabled": false
},
"pointpadding": 0,
"groupPadding": 0
},
"series": {
"animation": false,
"pointWidth": 9,
"pointPadding": 0,
"groupPadding": 0.1
}
},
"legend": {
"margin": 30
},
"series": [
{
"name": "BlackBerry - Consumer Platforms and Devices",
"data": [
3,
3,
3,
3,
2,
6,
6
]
}
]
};
var optionsStr = JSON.stringify(dataStr),
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400');
if (window.XDomainRequest) {
var xdr = new XDomainRequest();
xdr.open("post", exportUrl+ '?' + dataString);
xdr.onload = function () {
console.log(xdr.responseText);
$('#container').html('<img src="' + exporturl + xdr.responseText + '"/>');
};
xdr.send();
} else {
$.ajax({
type: 'POST',
data: dataString,
url: exportUrl,
success: function (data) {
console.log('get the file from relative url: ', data);
$('#container').html('<img src="' + exportUrl + data + '"/>');
},
error: function (err) {
debugger;
console.log('error', err.statusText)
}
});
}
}
});
<script src="http://code.highcharts.com/highcharts.js"></script>
Run Code
The reason is two ampersands used in the xAxis.categories.
"categories": [
"Momentum & Stability",
...
"Service & Support"
],
Change ampersands to %26
"categories": [
"Overall",
"Vision/Strategy",
"Momentum %26 Stability",
"Innovation",
"Product Portfolio",
"Go-to-Market",
"Service %26 Support"
],
create a callback which encodes ampersands (callback is called on the server):
function callback () {
const categories = this.xAxis[0].categories.map(decodeURIComponent)
this.xAxis[0].setCategories(categories)
}
Append the callback to dataString:
dataString = encodeURI('async=true&options='+optionsStr+'&type=jpeg&width=400&callback=' + callback.toString());
example: http://jsfiddle.net/erayy8jn/
I have data that looks like this in JSON format. I have two data series with same time line. When I try to plot them in highstock, all my time-stamps are shown as starting in 1970s. Can anyone point me what would be wrong with my JSON format?
Reason I am not using - pointStart and pointInterval: is because sometime pointIntervals can be irregular and hence need to send in the dates.
{
"chart_data": {
"dates": [
1406876400000,
1406876700000,
1406877000000,
1406877300000,
1406877600000,
1406877900000,
1406878200000,
1406878500000,
1406878800000
],
"values": [
{
"data": [
54,
50,
62,
65,
65,
55,
51,
53,
57
]
},
{
"data": [
84,
70,
80,
78,
77,
84,
73,
83,
77
]
}
]
}
}
My Javascript method to display this data is below.
<script type="text/javascript">
$(document).ready(function() {
var chartOptions = {
chart: {
renderTo: 'chart_panel',
type: 'line',
zoomType: 'x'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
title: {text: 'Temperature & Humidity' },
subtitle: {text: 'My-Text' },
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
day: '%b %e',
hour: '%b %e',
year: '%b'
}
},
yAxis: {
min: 0,
title: {
text: 'Temperature (°F)/Humidity (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
series: [{}],
rangeSelector : {
inputEnabled: true,
selected: '0'
},
};
var chartDataUrl = '{% url "chart_data_json" object.id %}';
function loadChart() {
$.getJSON(chartDataUrl,
function(data) {
var seriesOptions = [];
var obj1 = {};
var obj2 = {};
avgByDayOptions.xAxis.categories = data['chart_data']['dates'];
obj1.name = "Temperature";
obj1.data = data['chart_data']['values'][0]['data'];
obj2.data = data['chart_data']['values'][1]['data'];
obj2.name = "Humidity";
seriesOptions[0] = obj1;
seriesOptions[1] = obj2;
chartOptions.series = seriesOptions;
var chart = new Highcharts.StockChart( chartOptions,
function(chart){
// apply the date pickers
setTimeout(function(){
$('input.highcharts-range-selector', $('#'+chart.options.chart.renderTo))
.datepicker()
},0)
}
);
Highcharts.setOptions({ global: { useUTC: false } });
});
}
loadChart();
});
It was may bad once I passed the data in following format everything started work as expected. Just posting reply to my own question in case someone runs into similar issue?
{
"chart_data": {
"values": [
{
"data": [
[
1406851200000,
54
],
[
1406851500000,
50
],
[
1406851800000,
62
],
[
1406852100000,
65
],
[
1406852400000,
65
],
[
1406852700000,
55
],
[
1406853000000,
51
],
[
1406853300000,
53
],
[
1406853600000,
57
]
]
},
{
"data": [
[
1406851200000,
84
],
[
1406851500000,
70
],
[
1406851800000,
80
],
[
1406852100000,
78
],
[
1406852400000,
77
],
[
1406852700000,
84
],
[
1406853000000,
73
],
[
1406853300000,
83
],
[
1406853600000,
77
]
]
}
]
}
}