JavaScript InfoVis Toolkit Error loading JSON from external file using AJAX - infovis

I have the code snippet shown below in my application . What I am trying to accomplish is this: anytime a checkbox is clicked, the bar chart should be updated.
In my error console I'm getting:
"Error: TypeError: values is undefined Source file:hit.js Line: 11017.
I tried assigning the JSON directly in the function (var json = ...) and it works as it should but I can't get it to work by loading the JSON from the file. What am I doing wrong?
$(':checkbox').click(function () {
init();
function init()
{
var request = new XMLHttpRequest( );
request.open("GET", "GetGenes.php", false);
request.send(null);
var json = request.response;
console.log(request.response);
var barChart = new $jit.BarChart({
//id of the visualization container
injectInto: 'infovis',
//whether to add animations
animate: true,
//horizontal or vertical barcharts
orientation: 'horizontal',
//bars separation
barsOffset: 0.5,
//visualization offset
Margin: {
top: 5,
left: 5,
right: 5,
bottom: 5
},
//labels offset position
labelOffset:5,
//bars style
type:'stacked',
//whether to show the aggregation of the values
showAggregates:true,
//whether to show the labels for the bars
showLabels:true,
//label styles
Label: {
type: 'HTML', //Native or HTML
size: 9,
family: 'Arial',
color: 'black'
},
//tooltip options
Tips: {
enable: true,
onShow: function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
}
});
barChart.loadJSON(json);
}
})
genes.php contains:
echo "{'label': ['label 1', 'label 2', 'label 3', 'label 4'],'values': [{'label': 'date A','values': [20, 40, 15, 5]}, {'label': 'date B','values': [30, 10, 45, 10]}, {'label': 'date E','values': [38, 20, 35, 17]}, {'label': 'date F','values': [58, 10, 35, 32]}, {'label''date D','values': [55, 60, 34, 38]}, {'label': 'date C','values': [26, 40, 25, 40]}]};";

There is an error in your returned JSON :
'label''date D'
There is a missing colon there. Don´t know if that solves anything.

Related

Google Sheet API => Sheet creation OK but can't set specific defaultFormat

I succeeded to create a sheet, but horizontal and vertical alignments are set to defaults, not the ones I tried to set.
Here is the code
spreadsheet_body = {
'properties': {
'title': str("sme_"+jour_heure.read()),
'defaultFormat': {
'horizontalAlignment': 'LEFT',
'verticalAlignment': 'MIDDLE'
}
}
}
print(spreadsheet_body)
# Création du fichier Google Sheet
request = service_sheet.spreadsheets().create(body=spreadsheet_body)
response = request.execute()
print (response)
My sheet is correctly created by vertical and horizontal alignments are not set.
print (spreadsheet_body)
prints:
{'properties': {'title': 'sme_18_04_2020\n', 'defaultFormat': {'horizontalAlignment': 'LEFT', 'verticalAlignment': 'MIDDLE'}}}
but
print (response)
prints:
{'spreadsheetId': '1F2o5F8B-efoAOkg-d3z_2tGcPhvlp8gtcvGOGkGvAGI', 'properties': {'title': 'sme_18_04_2020\n', 'locale': 'en_US', 'autoRecalc': 'ON_CHANGE', 'timeZone': 'Etc/GMT', 'defaultFormat': {'backgroundColor': {'red': 1, 'green': 1, 'blue': 1}, 'padding': {'top': 2, 'right': 3, 'bottom': 2, 'left': 3}, 'verticalAlignment': 'BOTTOM', 'wrapStrategy': 'OVERFLOW_CELL', 'textFormat': {'foregroundColor': {}, 'fontFamily': 'arial,sans,sans-serif', 'fontSize': 10, 'bold': False, 'italic': False, 'strikethrough': Fal ./..
Title is OK but verticalAlignment is not ...
What did I do wrong ?
i believe you want to create new sheet with required alignment, with your code everything is a string like "horizontalAlignment": "LEFT" anything between "" is string and line ends with ; instead of ,
try this for creating new sheet and alignment
function alignment(){
//change sheet name as per your requirement
var ss = SpreadsheetApp.getActiveSpreadsheet().insertSheet("yousheet");
var range = ss.getRange("A1:Z");
range.setHorizontalAlignment('left').setVerticalAlignment('middle');
}

How to add some text for a layer deckgl?

I am new with deckgl. I want to add some text to my layer (any type of layer) but I'm not able to
Here is my example:
const layer = new PointCloudLayer({
id: 'point-c-layer',
data: [{
position: [39.826168, 21.422510],
normal: [-1, 0, 0],
color: [204, 102, 0],
}],
radiusPixels: 20,
});
What I should add in data array to add my text to this layer?
Add the text to a separate TextLayer like this:
const text = new TextLayer({
id: 'text-layer',
data: [
{text: '#San Francisco', coordinates: [-122.425586, 37.775049]}
]
})
return (<DeckGL {...viewport} layers={[pointcloud, text]} />)

I am animate the pie chart using Handler event class of google visualization API

if (element.Category.ChartType == "PieChart") {
console.log(sliceOptions);
var animate = 0.05;
console.log("for your test" + rows[4][1]);
console.log("for your test" + rows[3][1]);
console.log("for your test" + rows[2][1]);
console.log("for your test" + rows[1][1]);
wrapper = new google.visualization.ChartWrapper({
chartType: element.Category.ChartType,
dataTable: rows,
containerId: element.Category.Key,
options: {
is3D:true, height: 270, slices: sliceOptions,
pieStartAngle: 100,
animation: { startup: true, duration: 15000, easing: 'Out' },
backgroundColor: '#F8F8FF',
pieSliceText: 'label',
tooltip: { color: '#FF0000' },
slices: {
1: { offset:animate },
2: { offset: animate },
3: { offset: animate },
4: { offset: animate },
},
}
});
google.visualization.events.addListener(wrapper, 'select', selectHandler);
function selectHandler() {
//alert('A table row was selected');
var data = wrapper.getSelection();
alert(data);
}
}
But it throws the above exception.
Uncaught TypeError: wrapper.getSelection is not a function.
I am animate the pie chart using Handler event class of google visualization API.
please provide me solution.
getSelection() is a Chart method, not a ChartWrapper method
try this instead...
wrapper.getChart().getSelection()

Create custom picker control

See screenshot of custom picker:
I know there isn't a way to style the picker control in Titanium. This picker only needs to work on iOS (iPad only). I was thinking I could hack the TableView control to use instead of the picker to achieve the style desired. Is that reasonable? How would I snap the TableViewRows so one is always in the center like seen in typical picker controls?
that's a tough one i would say you just only need views and labels and the swipe event (you can recognize if some one swipe up and down ) and just changes the labels. you can do this with a callback function i hope this code will help you (we have created a custom picker with this code)
using alloy
XML
<View id="numOfIntrusionsPickerContainer" class="compositeWrapperPicker noMargins" >
<View id="numOfIntrusionsButtonContainer" class="horizontalWrapper"></View>
CSS
".compositeWrapperPicker" : {
height: Ti.UI.SIZE,
layout: "composite",
width:Ti.UI.SIZE
},
".horizontalWrapper" : {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
layout: "horizontal"
},
JS
// INSTANTIATION
var args = arguments[0] || {};
var widthValue = 120;
var pickerEnabled = true;
if(args.width != null){
widthValue = args.width;
}
if(args.isEnabled != null){
pickerEnabled = args.isEnabled;
}
// STYLING
// ADDITIONS
// pressed arg can be: true,false,null. false & null are equal
// true = 'yes' is Pressed at creation, false/null = 'no' is pressed
var btn_main = Ti.UI.createButton({
top: 5,
bottom: 0,
left:0,
right:5,
height: 45,
enabled: pickerEnabled,
width: widthValue,
borderRadius: 5,
backgroundImage: "/images/bttn_gray_flex.png",
backgroundSelectedImage : "/images/bttn_gray_press_flex.png",
backgroundFocusedImage : "/images/bttn_gray_press_flex.png"
});
var picker_divider = Ti.UI.createImageView({
right: 43,
bottom:2,
touchEnable:false,
focusable:false,
image: "/images/Divider_picker.png"
});
var picker_arrows = Ti.UI.createImageView({
right: 16,
top: 17,
touchEnabled: false,
focusable: false,
image: "/images/bttn_selector_arrow.png"
});
$.pickerContainer.add(btn_main);
$.pickerContainer.add(picker_divider);
$.pickerContainer.add(picker_arrows);
// CODE
// LISTENERS
if(args.callBack != null){
btn_main.addEventListener("click",function(_event){
args.callBack(_event);
});
}

ExtJS How to add a click event to Pie Chart pieces

I have created a Pie chart using the Pie chart example in sencha ExtJS website , I wanted to add a click event to the each Pie slice so that i get handle to the contextual data on that slice. I was able to add a click listener to the Pie but not sure how to get the data on the slice.
Below is the ExtJS code.
Ext.onReady(function(){
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
data: [{
'name': 'January',
'data1': 10
}, {
'name': 'February',
'data1': 7
}, {
'name': 'March',
'data1': 5
}, {
'name': 'April',
'data1': 2
}, {
'name': 'May',
'data1': 27
}]
});
Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 800,
height: 600,
animate: true,
store: store,
theme: 'Base:gradients',
legend: { // Pie Chart Legend Position
position: 'right'
},
series: [{
type: 'pie',
field: 'data1',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item){
//calculate and display percentage on hover
var total = 0;
store.each(function(rec){
total += rec.get('data1');
});
this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('data1') / total * 100) + '%');
}
},
highlight: {
segment: {
margin: 5
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
},
listeners: {//This Doesnt Work :(
itemclick: function(o){
alert('clicked at : ' + o);
}
}
}],
listeners: { //This Event handler works but I am not sure how to figure how which slice i have clicked ..................................
click: {
element: store, //bind to the underlying el property on the panel
fn: function(o, a){
alert('clicked' + o + a + this);
}
}
}
});
});
Kindly help.
Regards,
Lalit
Here is how you get data of the clicked slice. The series class supports listeners via the Observable syntax and they are:
itemmouseup When the user interacts with a marker.
itemmousedown When the user interacts with a marker.
itemmousemove When the user iteracts with a marker.
afterrender Will be triggered when the animation ends or when the series has been rendered completely.
I will make use of the itemmousedown event to capture the clicked slice. Here is my listener method:
series: [{
.
.
.
listeners:{
itemmousedown : function(obj) {
alert(obj.storeItem.data['name'] + ' &' + obj.storeItem.data['data1']);
}
}
.
}]
Note that I have placed my listener inside the series and not the chart! Now, the obj variable holds lot of information. For each series, the property to get data will differ. So, you will have to carefully inspect the object using firebug or some other developer tool.
Now, in case of Piecharts, you can get the slice information by using the obj:
obj.storeItem.data['your-series-variable-name']
Here is the obj from firebug..
I'm using a more selective approach, because I needed to add some custom logic in order to implement drag-and-drop for our charts. So after the chart definition I just add the following:
// Add drag-and-drop listeners to the sprites
var surface = chart.surface;
var items = surface.items.items;
for (var i = 0, ln = items.length; i < ln; i++) {
var sprite = items[i];
if (sprite.type != "circle") { continue; } // only add listeners to circles
// Additional funky checks for the draggable sprites
sprite.on("mousedown", onSpriteMouseDown, sprite); // mouse down ONLY for sprites
}
surface.on("mousemove", onSurfaceMouseMove, surface); // mouse move for the entire surface
surface.on("mouseup", onSurfaceMouseUp, surface);
Cheers!
Frank