Highcharts - Maps data structure - dictionary

I am trying to build an array of data returned from a third party API, and display it using the Highcharts map module.
I've done so with the charts module, using line and pie charts both with not much difficulty. Now that I've moved onto maps, I seem to be running into a bit of difficulty. It was quite clear from the examples provided how the data should be structured to be properly read by Highcharts.
When it comes to the maps module, the data structure is not clear at all. How would I structure my data to pass into my Highcharts map???
[ 'US' , 'United States' , 32 ] , [ 'CA' , 'Canada' , 100 ]
If I use the provided :
jQuery.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=world-population-density.json&callback=?', function (data) {
console.log(data);
// Initiate the chart
jQuery('#geo_map').highcharts('Map', {
title : {
text : 'Campaign Link Clicks Around The World'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 1,
max: 1000,
type: 'logarithmic'
},
series : [{
data : data,
mapData: Highcharts.maps['custom/world'],
joinBy: ['iso-a2', 'code'],
name: 'Population density',
states: {
hover: {
color: '#BADA55'
}
},
tooltip: {
valueSuffix: '/km²'
},
}],
credits: {
enabled: false
},
});
});
});
It works. But I can't seem to figure out how to pass in my data. I thought it was as simple as
[ 'Abbreviation' , 'Name' , Value ] , [ 'Abbreviation' , 'Name' , Value ]
but clearly not. The documentation isn't very clear on data structure.
Thanks.

Related

react-jsonschema-form collapses the size of my array form and cuts off buttons

I've started building a form in react-jsonschema-form and i'm having a lot of difficulty changing it visually.
The form is an array and it has a button to add and remove a set of input boxes.
I've build it as a component in a test project which has no css applied to it so far.
The form will render as a tiny box where there is no room for the buttons (they are cut of as shown below in images).
a single element
a second element
How its supposed to look on react-jsonschema-form playground
A key difference between my array and the sample array is that i'm having two text input elements per array element. I dont know if this could cause it.
I do need to have two input values as its a group of data that is related, and both is required.
This is my code:
//json schema
const schema = {
type: "object",
properties: {
listOfNumbers: {
title: "opret ledig nummerserie",
type: "array",
required: ["nr_fra", "nr_til"],
items: {
properties: {
nr_fra: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
nr_til: {
type: "string",
pattern: "^\\d*$",
minLength: 8,
maxLength: 8,
},
},
},
},
},
};
//uiSchema
const uiSchema = {
listOfNumbers: {
"ui:options": {
orderable: false,
},
items: {
//nr_fra: { "ui:options": { label: false } },
//nr_til: { "ui:options": { label: false } },
},
},
}
I'm applying no css to the below form.
// Form
<Form
schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onSubmit={(formOutput) => this.handleSubmit(formOutput)}
transformErrors={transformErrors}
/>
I've spent a day and a half on trying to strongarm this, but i could really use some help on how to proceed.
It seems it was css inputs that was needed to solve this.
The below will expand the elements to their proper size/form.
Posting this here for posterity, as this is not accurately documented.
<div className="col-md-offset-3 col-md-6">
<Form schema={schema}
uiSchema={uiSchema}>
</Form>
</div>

Proper filter usage within the Google Analytics embed API

I'm using the google analytics embed API to show data in console. All works well till i add a filter to the query.
I want to not include pages what have Movie.aspx in it.
Is it not supported by the API or is my syntax incorrect?
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:pageviewsPerSession',
dimensions: 'ga:pagePath',
sort: '-ga:pageviewsPerSession',
//doesn't work when i add this line
// 'filters':'ga:pageviewsPerSession!#Movie.aspx',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'max-results': 10
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
});
Edit:
Also i can't seem to get the chart to format correctly.
Each column returns 00,01,02,03 etc.
I'm trying to format it to display 02:00 AM
var dataChart3 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:hour',
'start-date': '1daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-7-container',
type: 'COLUMN',
options: {
width: '100%',
hAxis: {
title: 'Time of Day',
format: 'hh:mm a'
},
vAxis: {
title: 'Number of sessions'
}
}
}
});
Update 24/05/2017
Thanks I've manged to sort it out using the below query
var PageListConfig = {
query: {
//metrics: 'ga:sessions,ga:avgPageLoadTime',
metrics: 'ga:sessions',
dimensions: 'ga:pagePath',
filters: 'ga:pagePath!#Movie;ga:pagePath!#SessionTimesDisplay;ga:pagePath!#SessionTimesDaySelect;ga:pagePath!#VenueTicketing',
sort: '-ga:sessions',
'max-results': 30
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
};
ga:pageviewsPerSession
The average number of pages viewed during a session, including repeated views of a single page.
The above metadata is a metric not a dimension which means you need to use one of the metric filter operators also its a number you cant compare a number to a string
You may want to consider one of the page path dimensions.
ga:pagePath=#Movie.aspx
check out the filter syntax documentation on the Google Analytics developer site. I also recommend testing them out in the query explorer

Pyramid chart in rCharts with Highcharts

I'm trying to create pyramid chart similar to this http://www.highcharts.com/demo/pyramid in rCharts, however it gives me an error even though the output looks fine
h1 <- Highcharts$new()
h1$chart(type = "pyramid")
h1$series(name='Unique users', data=list(
list('Website visits', 15654),
list('Downloads', 4064),
list('Requested price list', 1987),
list('Invoice sent', 976),
list('Finalized', 84)
))
Here is an output
(function ($) {
$(function () {
var chart = new Highcharts.Chart({
"dom": "chartee4502dd16c",
"width": 800,
"height": 400,
"credits": {
"href": null,
"text": null
},
"exporting": {
"enabled": false
},
"title": {
"text": null
},
"yAxis": {
"title": {
"text": null
}
},
"chart": {
"type": "pyramid",
"renderTo": "chartee4502dd16c"
},
"series": [{
"name": "Unique users",
"data": [
[
"Website visits",
15654],
[
"Downloads",
4064],
[
"Requested price list",
1987],
[
"Invoice sent",
976],
[
"Finalized",
84]
]
}],
"id": "chartee4502dd16c"
});
});
})(jQuery);
Am I doing a mistake somewhere or is pyramid chart just not supported by rCharts? Thanks.
#Ondkloss is right on the money here. All that you need to do is to add the funnel script to your page. There is a quick and easy way to do that in rCharts without hacking at config.yml. You can use the addAssets method to inject a javascript asset in the head.
library(rCharts)
h1 <- Highcharts$new()
h1$addAssets(jshead = "http://code.highcharts.com/modules/funnel.js")
Now run the same code you ran previously and you should get a nice pyramid chart.
h1$chart(type = "pyramid")
h1$series(name='Unique users', data=list(
list('Website visits', 15654),
list('Downloads', 4064),
list('Requested price list', 1987),
list('Invoice sent', 976),
list('Finalized', 84)
))
h1
Here is the final version of the chart. You can click here fpr a version that is editable online.
From the Highcharts API (and as included in your demonstration) a Pyramid chart is "a reversed funnel chart without a neck", and a Funnel chart "requires that the modules/funnel.js file is loaded".
Judging from the config.yml for the Highcharts library in rCharts that specific module is not included:
highcharts:
jshead:
- js/jquery-1.9.1.min.js
- js/highcharts.js
- js/highcharts-more.js
- js/exporting.js
cdn:
jshead:
- "http://code.jquery.com/jquery-1.9.1.min.js"
- "http://code.highcharts.com/highcharts.js"
- "http://code.highcharts.com/highcharts-more.js"
- "http://code.highcharts.com/modules/exporting.js"
There's not much between you and a modified rCharts to make it happen though, if you so desire.

How can I use a custom gif loader for Lists in Sencha Touch?

When you use the Ext.dataview.List in Sencha, it automatically inserts a nice loading spinner while the data is loading. That's all fine and dandy, but I'd like to know how to use a custom loader .gif.
I've looked around and think I need to change the loadmask but not positive cause I'm new to this. See this link.
Below is the code for one of my Lists. I'm hoping to be able to add the code suggested to one place so that all lists are affected and have the new spinner.
{
xtype: 'list',
height: '',
id: 'categoryList',
itemId: '',
width: '100%',
scrollable: false,
emptyText: '<div class="pdtsListHtml" style="margin-top:30%">Product List Empty</div>',
itemTpl: [
'<div ><div class="pdtsListHtml" style="display:inline;">{navigationElementItemName} ({navigationElementItemRecordCounts})</div><div style="display:inline;float:right;margin-right:5px;"><img src="resources/image/arrow.png" width="11" height="11"></div></div>'
],
store: 'productListStore',
allowDeselect: true,
onItemDisclosure: false
}
Here's a fiddle that shows you an example list with a loading mask that uses a gif.
Basically you should define your own Ext.LoadMask subclass and use it on the list:
Ext.define("Test.MyLoadMask", {
extend: "Ext.LoadMask",
alias: "widget.myloadmask",
getTemplate: function() {
var prefix = Ext.baseCSSPrefix;
return [
{
reference: 'innerElement',
cls: prefix + 'mask-inner',
children: [
{
reference: 'indicatorElement',
cls: prefix + 'loading-spinner-outer',
children: [
{ tag: 'img', src: "http://example.com/my-spinner.gif" }
]
},
{
reference: 'messageElement'
}
]
}
];
}
});
Then you should define an applyMasked on your lists that modifies the xtype and sets it to myloadmask instead of loadmask.

Sencha Touch 2: How do I display RSS feed as list?

I'd like to create a simple app that shows me a list of the latest stories from my favourite news sites using Sencha Touch 2 and the RSS feeds, of course.
How do I get data from an rss-feed and then display it as a list, showing title, author, date and content?
I can get a list of the latest news stories going, but I can only manage to display each item title/headline, not the author, date, snippet etc. Here's my code:
1 model, 1 store, 1 view, 1 app.js:
//The store
Ext.define("NewsApp.store.EbStore", {
extend: "Ext.data.Store",
requires: ["Ext.data.proxy.JsonP", "Ext.dataview.List" ],
config: {
model: "NewsApp.model.NewsListModel",
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=5&q=http://feeds.feedburner.com/newsapp_pol',
reader: {
type: 'json',
rootProperty: 'responseData.feed.entries'
}
}
}
});
//The Model
Ext.define("NewsApp.model.NewsListModel", {
extend: "Ext.data.Model",
config: {
fields: [
{name: 'title', type: 'auto'},
{name: 'author', type: 'auto'},
]
}
});
//The view
Ext.define("NewsApp.view.NewsList", {
extend: "Ext.Container",
requires: "Ext.Toolbar",
alias: "widget.newslistview",
config: {
layout: {
type: 'fit'
},
items: [{
xtype: "toolbar",
title: "Danske Nyheder",
docked: "top",
items: [
{
xtype: 'spacer'
},
{
xtype: "button",
text: "Indstillinger",
ui: "action",
id: "settingsButton",
iconMask: true,
iconCls: 'settings'
},
{
xtype: "button",
text: "Refresh",
ui: "action",
id: "refreshButton",
iconMask: true,
iconCls: 'refresh'
}
]
},
{
xtype: "list",
store: "EbStore",
itemId:"EbList",
onItemDisclosure: true,
itemTpl: '{title}'
}
],
}
});
// And the app.js just for kicks
Ext.application({
name: "NewsApp",
models: ["NewsListModel"],
stores: ["EbStore"],
views: ["NewsList"],
launch: function () {
console.log("App starts");
var newsListView = {
xtype: "newslistview"
};
Ext.Viewport.add([newsListView]);
}
});
With this code, I can display the titles of the rss items nicely. But if I change the {title} to, say, {author}, the list items are created in my view, but without any content whatsoever. The RSS that I'm trying to read uses normal standards, I think: http://feeds.feedburner.com/newsapp_pol
So how do I display more than just the title and acces the rest of the rss?
I guess it boils to my not understanding what data is being captured in the proxy-code or how or in what format exactly.
Can anybody help? :-)
I have checked out these two examples of Sencha Touch RSS readers, and both are excellent, except that the code is way too advanced for me to understand:
http://www.sencha.com/apps/rssreader/
https://github.com/AndreaCammarata/FeedBurner-RSS-Reader
Troels,
If you want to look at the data response of your google feed, I suggest you take a peek at the json data with a json beautifier to make it easier to read. First paste your google feed url into the browser's address bar. Copy the resulting json response - and paste it into the beautifier. That will give you a structured view of the data fields in the response data.
When i tried it, the first entry looked like this:
"title": "Over 50 såret under kampe i Kosovo",
"link": "http://politiken.dk/udland/ECE1672568/over-50-saaret-under-kampe-i-kosovo/",
"author": "",
"publishedDate": "Thu, 28 Jun 2012 12:09:18 -0700",
"contentSnippet": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"content": "35 politifolk og 20 serbere blev såret, da en gruppe serbere stødte sammen i det etnisk delte Kosovo.",
"categories": []
I noticed that the "author" field is empty on all entries, which may explain why you get an empty list.
That should help you understand the data structure in the feed and create matching references in your code.
Cheers,
Rasmus

Resources