You can see what I'm saying by putting this code:
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Kansas City', 200],
]);
var options = {width: 556, height: 347, displayMode : 'markers', region: 'ES'};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, options);
}
into google's playground here:
https://code.google.com/apis/ajax/playground/?type=visualization#geo_chart
You can see that Kansas City is being rendered in Spain, which is incorrect.
This also happens for other combination of regions and cities.
Am I doing something wrong here? or this is a Geochart bug?
EDIT: I think asgallant is right. It seems Geochart is finding an avenue called Kansas City in Spain, now the question is: how can I tell geochart that I'm only looking for cities?
I want to give you more context about this problem. I'm setting the region to ES on purpose. I'm working on an app which contains data from all over the world. There's a functionality where I allow the user to zoom into a region. In this case Spain.
I know I could just remove Kansas City when zooming in and put it back when zooming out, but I'm trying to avoid that.
Thanks!
Thank you asgallant, you are absolutely right.
That's why I solved this problem by using this API:
https://developers.google.com/maps/documentation/geocoding
Basically I'm geocoding the city names before rendering them and I'm storing the coordinates in my database. Then I just draw the geochart using the coordinates.
By doing that I'm not only solving this problem, but I'm also speeding up the rendering of the chart.
Related
im trying to get google chart sankey as an image to download it, as getURI function doesnt works with sankey i tried with htm12canvas.js.
I got the sankey image but only the nodes and titles, links doenst appers.
html2canvas(sankeyElement, {
useCORS: true,
allowTaint: true
}).then(function(canvas){
var imgageData = canvas.toDataURL("image/jpg");
var newData = imgageData.replace(/^data:image\/jpg/, "data:application/octet-stream");
console.log(newData)
});
I tried with XMLSerializer but have the same problem.
I'm very new to Oracle Apex and currently I want to use and customize Gantt charts. What I want to achieve it to show line breaks in the row-labels. Currently every newline character gets cut out and I am not sure where this happens and how I can prevent this.
The marked text contains newline characters. Don't be confused by the <br>, I just tests if this does the trick.
I just want to show more some information in the for each row. If there is another more elegant way, it would be very nice to give a tip.
Update:
I did some research and found a very nice example on a similar topic, in this case to create a custom tooltip https://youtu.be/2rZAIR_0tNg?t=2532.
I wanted to do the same thing for the row_axis label renderer, but nothing gets visualized.
The render function I use:
function custom_row_axis_label_renderer(data_context){
var row_axis_label_elem = document.createElement("g");
$("row_axis_label_elem").addClass("custom_row_axis_label");
row_axis_label_elem.innerHTML = '<text font-size="14px">Hello World</text>';
console.log(row_axis_label_elem);
return row_axis_label_elem;
}
The rendered element kind of exists, but it's get the size 0x0 from somewhere.
Am I missing something here?
Regards,
Nik
Meanwhile I found the solution on how to build a custom renderer. The main part I didn't new is that you NEED to pass x and y coordinates to have the new label to be rendered correctly. I found a proper example the the oracle forum, but unfortunately I can't find the link anymore to give credit to the original example.
Here is my code. It creates two text elements below each other to achieve a mocked line break and it adds a yellow icon. Of course you can use the data_context object to access the actual label. Add this part in the "Function and Global Variable Declaration
" part of your page:
custom_row_axis_label_renderer = function (data_context){
var row_axis_label_elem = document.createElementNS("http://www.w3.org/2000/svg", "g");
var upper_text = document.createElementNS("http://www.w3.org/2000/svg", "text");
var lower_text = document.createElementNS("http://www.w3.org/2000/svg", "text");
var icon_node = document.createElementNS("http://www.w3.org/2000/svg", "circle");
upper_text.textContent = "Hello";
upper_text.setAttribute("dominant-baseline","text-before-edge");
upper_text.setAttribute("class","oj-gantt-row-label");
upper_text.setAttribute("font-size","14px");
upper_text.setAttribute("text-anchor","end");
upper_text.setAttribute("x","220");
upper_text.setAttribute("y","5");
lower_text.textContent = "World";
lower_text.setAttribute("dominant-baseline","text-before-edge");
lower_text.setAttribute("class","oj-gantt-row-label");
lower_text.setAttribute("font-size","14px");
lower_text.setAttribute("text-anchor","end");
lower_text.setAttribute("x","220");
lower_text.setAttribute("y","25");
icon_node.setAttribute("cx","240");
icon_node.setAttribute("cy","25");
icon_node.setAttribute("r","8");
icon_node.setAttribute("class","u-color-7");
row_axis_label_elem.appendChild(upper_text);
row_axis_label_elem.appendChild(lower_text);
row_axis_label_elem.appendChild(icon_node);
return row_axis_label_elem;
}
Also you need to set the renderer of the row-axis-label. I also made the rows and task a little bit bigger to have enough space for two lines of text in the label. Add this in the "JavaScript Initialization Code" in the attriutes of you chart:
function( options ){
options.rowAxis.label = {renderer : custom_row_axis_label_renderer};
options.rowDefaults = {height : 60};
options.taskDefaults = {height: 40};
return options;
}
I have created a pretty good ChartJS system but am having trouble with breaking the extra x-axis labels and title font details. They same to want to be the same for some reason.
First of all, the solution I got help with is here:
SO answer
The charts look okay like so:
As you can see the title and addition x-axis label are both the same font size. This occurs due to the configuration options of:
// context.xAxes.font
context.font = this.config.get("chart.axis.font");
context.fontSize = 100;
context.fillStyle = this.config.get("chart.axis.font.color");
context.textAlign = 'center';
context.fillText(line, x, y);
I have the configuration options setup this way:
title: {
display: true,
fontSize: 10,
text: this.options.title,
padding: titlePadding,
},
I have no idea why the fillText is working for both title and extra categories.
As far as I know, there's no fontSize property on the canvas rendering context. You should use its font property instead to specify weight, size, and family of the font.
Please take a look at the runnable code snippet provided in this answer.
Wondering if someone might help with another pair of eyes - as I am trying to work out why some of my Famo.us 'Views' are being displayed despite having an opacity StateModifier set to '0'.
Here is my code - My apologies for it not being standard - I have "Panels" instead of "Views" and a few other things..but happy to expand on the code if needed.
function _buildSidePanel() {
this._sidePanel = _createPanel.call(this);
this._sidePanel.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu);
this._sidePanel.position = this.cm(this.constructor.DEFAULT_OPTIONS.sideMenu.position);
this._container.add(this._sidePanel.position).add(this._sidePanel);
this._menuHolder = _createPanel.call(this); //My version of a View
this._menuHolder.setOptions(this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder);
// Create StateModifiers
this._menuHolder.position = this.cm({ align: [.5,.6], origin: [.5,.6], proportions: [.9,.8] });
this._menuHolder.fadeState = this.cm({ opacity: 0 });
this._menuHolder.sizeState = this.cm();
this._menuHolder.mC = new ModifierChain();
this._menuHolder.mC.addModifier(this._menuHolder.fadeState);
this._menuHolder.mC.addModifier(this._menuHolder.sizeState);
this._menuHolder.mC.addModifier(this._menuHolder.position);
/* Tried splitting it to just modifiers but getting the same thing
this._sidePanel._container.add(this._menuHolder.fadeState)
.add(this._menuHolder.sizeState)
.add(this._menuHolder.position)
.add(this._menuHolder);
*/
this._sidePanel._container.add(this._menuHolder.mC).add(this._menuHolder);
// this._menuHolder.fadeState.setOpacity(1,this.constructor.DEFAULT_OPTIONS.sideMenu.menuHolder.transition.in);
}
I have created a ModifierChain and added among other things an Opacity State of 0. When I add this and then add the modifier and 'View' to the container it displays the View even though the View has a StateModifier of '0' so should not be displayed.
The 'fadeState.setOpacity' command is meant to transition the fadeState to display the View but it is commented out, so the View should not be displayed.
I have this working in other areas so know the approach works. I am also (hopefully) not using the same variable names, so not using a StateModifier more than once. But still stuck as to why this is being displayed.
Any help or thoughts would be gratefully appreciated.
Thanks.
I am building a simple POC using famo.us. I would like to use the device view from the famo.us University lessons but when I write this code (slightly modified from what I found in the tutorials) nothing renders:
/*globals define*/
define(function(require, exports, module) {
// import dependencies
var Engine = require('famous/core/Engine');
var ImageSurface = require('famous/surfaces/ImageSurface');
var StateModifier = require('famous/modifiers/StateModifier');
var DeviceView = require('./DeviceView');
// create the main context
var mainContext = Engine.createContext();
// your app here
var logo = new ImageSurface({
size: [267, 102],
content: '/content/images/t-logo-black.png'
});
var logoModifier = new StateModifier({
origin: [0.5, 0.5]
});
var logoNode = mainContext.add(logoModifier);
logoNode.add(logo);
});
It appears that just adding the line var DeviceView = require('./DeviceView'); is what is causing the problem because just adding that one line to a working app seems to make everything not work that was working before. So I have 2 questions:
How do I make the require for DeviceView work
Is there a place I can go to find this sort error? Right now a blank screen is not very helpful. :)
Thank you!
Device view is not a currently an open source view. I have heard they are ridding a few bugs but it will be released soon.
Next time you see something not loading, be sure to check the directory, to ensure the file actually exists.
I have found debugging a bit tricky thus far using famous. Really for your problem, only the console would give you what you are looking for. In the case of a view, if it is not showing up how I expect, I often drop an id or class into the view, so it because searchable in the DOM.
Creating better debugging tools would add to the the long list of things famo.us is looking to build in the coming months. As an early adopter, it's a bit of a tough road.
Good Luck!
to make it work add this code:
//var DeviceView = require('DeviceView');
var View = require("famous/core/View");
in createDevice() function change :
device = new View(deviceOptions);
var deviceModifier = new StateModifier({
size: [300,400],
origin: [0.5, 0.5]
});
comment out any GlobalEvents.
That is a custom view made for the lessons which is not provided with the famous package for download. You could inspect the source code of the lessons page and try to discover the URL from that JS file... But I think it is not going to be so easy.
https://github.com/hinablue/famous.tw/tree/master/deviceView
That part is because of error.. take a look at the link above
That is a custom view made for the lessons which is not provided with the famous package for download. You could inspect the source code of the lessons page and try to discover the URL from that JS file... But I think it is not going to be so easy.