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.
Related
When using Google Charts engine and producing a column chart, the Chart Settings -> Series Settings -> Number Format formatter in the chart editor is applied in the Chart Preview area in the wp admin panel but is not applied in the final rendered chart in my wp website page when using the following Manual Configuration:
{
"vAxes": {
"0": {
"title": "Notional Advised (bn)",
"ticks": [10, 30, 50],
"titleTextStyle": {"italic": "false"},
"gridlines": {"color": "light-gray"},
"maxValue": 50,
"format": "$#"
},
"1": {
"title": "Clients Advised",
"ticks": [10, 30, 50],
"titleTextStyle": {"italic": "false"},
"gridlines": {"color": "light-gray"},
"maxValue": 50
}
},
"series": {
"0": {
"targetAxisIndex": "0",
"color": "#b7d988"
},
"1": {
"targetAxisIndex": "1",
"color": "#aedeea"}
},
"italic": "false",
"fontName": "Arial",
"fontSize": 16,
"hAxis": {
"tickColor": "white"}
}
I've looked for a manual configuration option to get the series' number formatting back, but haven't come across anything in Google Charts' docs: https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts
Any ideas or workarounds?
NOTE: I've opened this as a potential issue on Visualizer's github repo (https://github.com/Codeinwp/visualizer/issues/542) in case it is a legitimate bug, but hoping for some interim guidance :)
Thanks!
I am trying to categorize by the failed test result in various categories using the categories.json file. I am using following JSON file:
[
{
"name": "Ignored tests",
"matchedStatuses": ["skipped"]
},
{
"name": "Infrastructure problems",
"matchedStatuses": ["broken", "failed"],
"messageRegex": ".*An unknown server-side error occurred.*"
},
{
"name": "Outdated tests",
"matchedStatuses": ["broken"],
"traceRegex": ".*FileNotFoundException.*"
},
{
"name": "Test defects",
"matchedStatuses":[
"broken",
"Element is not currently visible and may not be manipulated"
],
"traceRegex":[
".*Cannot read property.*",
".*is not in DOM or there is no element.*",
".*is not a function.*"
]
},
{
"name": "Element Not visible",
"traceRegex":[
".*still not visible after.*",
".*Element is not currently visible and may not be manipulated.*",
".*was not found by text|CSS|XPath.*"
]
},
{
"name":"Promise Rejected",
"traceRegex": [".*Promise was rejected with the following reason.*"]
}
]
and in the allure report and getting only Product Defects.
This is how it looks
I am using
allure: 2.8.1
codeceptjs: 1.4.6
appium: 1.8.2
You have wrong categories.json file format (traceRegex expected to be a string). If you want to have multiply matchers per category, simply use the same name:
[{
"name": "Element Not visible",
"traceRegex": ".*still not visible after.*"
}, {
"name": "Element Not visible",
"traceRegex": ".*Element is not currently visible and may not be manipulated.*"
}]
In addition to Dmitry Baev's answer you can always use "|" - Regex Alternation Operator (| or |)
In your case it would look as follows:
{
"name": "Element Not visible",
"traceRegex": "(.*still not visible after.*)|(.*Element is not currently visible and may not be manipulated.*)|(.*was not found by text|CSS|XPath.*)"
}
which can be further simplified to:
{
"name": "Element Not visible",
"traceRegex": ".*(still not visible after)|(Element is not currently visible and may not be manipulated)|(was not found by text|CSS|XPath).*"
}
I am using leaflet draw to create polygons.
My requirement is when a user draws a polygon ,it should not intersect/overlap with existing polygons.
I have used point in polygon leaflet to detect if point falls within the polygon and it is working,
but the problem is i am not able to detect if a line crosses another polygons.In this case points lie outside the existing polygons but overlapping exists.
Below attached image can give a better picture!
You can also probably use Turf.js. Turf is a new js GIS engine developed by the guys at Mapbox.
Here are few examples that may do the job:
Turf Intersects
Turf Overlaps
In leaflet.draw, you can pass options to individual draw handlers. One of them allowIntersection is a boolean type that "Determines if line segments can cross."
Your options would look something like this (excerpted from the leaflet.draw example config):
var options = {
position: 'topright',
draw: {
polygon: {
allowIntersection: false, // Restricts shapes to simple polygons
drawError: {
color: '#e1e100', // Color the shape will turn when intersects
message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
},
shapeOptions: {
color: '#bada55'
}
},
},
edit: {
featureGroup: editableLayers, //REQUIRED!!
remove: false
}
};
var drawControl = new L.Control.Draw(options);
map.addControl(drawControl);
You can probably also use Terraformer Core, which is an open-source project done by the folks at ESRI. You would probably do something like this:
var polygon = new Terraformer.Primitive({
"type": "Polygon",
"coordinates": [ [ [ -101.46972656250001, 34.125447565116126 ],
[ -100.85449218750001, 33.760882000869195 ],
[ -101.09619140625, 33.19273094190692 ],
[ -102.12890625000001, 33.137551192346145],
[ -102.19482421875, 33.63291573870479 ],
[ -101.46972656250001, 34.125447565116126 ] ] ] });
var intersects = polygon.intersects({
"type": "Polygon",
"coordinates": [ [ [ -103.32539, 30.58608 ], [ -102.32083, 29.87894 ], [ -103.32539, 30.58608 ] ] ] });
// intersects is a bool.
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.
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