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.
Related
How to make django-leaflet render with canvas?
I checked on leaflet documentation that it should use preferCanvas but there are no manual in django leaflet that shows how to do it, while var map are hidden somewhere...
Any clue
Even if you don't have access to the preferCanvas option or the renderer option of the L.Map, you can still use the renderer option of individual vector layers.
Using this in django-less, vanilla javascript would look like:
var map = new L.Map('leaflet', { /* map options */ });
var myCanvasRenderer = L.canvas();
var circle = L.circleMarker([0, 0], {
radius: 30,
renderer: myCanvasRenderer
}).addTo(map);
var line = L.polyline([[60, 10],[20, 200]], {
renderer: myCanvasRenderer
}).addTo(map);
Make sure that you're creating the L.Canvas renderer once and reusing it in all your vector layers.
You can confirm this works by using the developer tools of your web browser and noting that there is a <canvas> element inside the Leaflet map container, but there is no <svg> element to be found:
You can see this example live over here.
I have implemented code as per the google SDK documentation line by line in my app, but still when I click on google sign in button app shifts to new view controller with webview with blank screen. Have tried multiple solution found here : GIDSignIn white screen on iOS 91. But no lucks with resolving the problem , have attached the screen shot for getting closer look about the screen.
Following are the pods that I'm using,
Running XCode 9.1, iOS 10.0 and later. Kindly request someone to help.
Update: View Hierarchy
Update: viewDidLoad's code:
GIDSignIn.sharedInstance().uiDelegate = self
if self.isChangePassword {
self.addSignInView()
}
else {
self.addSignUpView()
}
fileprivate func addSignInView() {
guard let signInEmailView: SignInEmailView = Bundle.main.loadNibNamed(NibNames.SignInEmailView.rawValue, owner: self, options: nil)?[0] as? SignInEmailView
else {
return
}
signInEmailView.delegate = self
gaManager.trackScreen(screenName: ScreenNames.SignIn.rawValue)
self.animateView(signInEmailView)
}
fileprivate func addSignInView() {
guard let signInEmailView: SignInEmailView = Bundle.main.loadNibNamed(NibNames.SignInEmailView.rawValue, owner: self, options: nil)?[0] as? SignInEmailView
else {
return
}
signInEmailView.delegate = self
gaManager.trackScreen(screenName: ScreenNames.SignIn.rawValue)
self.animateView(signInEmailView)
}
I have the same problem. I use the UIAlertView to confirm user really want to do authorization. It will show the blank screen. If I remove the UIAlertView and show the authorization view directly. It works fine.
The problem also show in the Dropbox authorization screen.
If you not use UIAlertView , please try to pass the top most controller
https://github.com/dropbox/dropbox-sdk-obj-c/issues/182
Hope this can do some help.
Finally after so many days found the problem. I was showing splash view from my appDelegate using refrence of UIWindow which was adding and removing an imgview as subview to the window. So it was somehow messing with the UINavigation's stack and my view controller was not getting any reference to the UINavigationController. After removing that code it's working just fine. Also came to the solution that, if I want to show splash screen, as I can't use UIWindow's reference, I have to add new VC and write my all navigation code there. #TedYu Thank you very much for the help. :)
I want to store the configuration of multiple GoogleCharts in a database and use them to create a dashboard of charts.
I currently store the options I supply for each chart in the database and have my dashboard working, displaying multiple charts.
I want to use the ChartEditor class to allow a user to amend a chart and then save the changes back to my database, so that the next time the dashboard is created, the changes are persisted.
Hence, when a user clicks on the OK button on the ChartEditor dialog, is there a way of accessing the changes to these options?
After crawling around, inspecting the ChartEditor object....
$.parseJSON(chartEditor.getChartSpecification())['options']
...returns what I'm looking for.
Just to add to Flippsie's answer, you can recreate the saved chart from the json returned from chartEditor.getChartSpecification()
var json = chartEditor.getChartSpecification(); // Or saved JSON value
var spec = JSON.parse(json);
// Get the chart details from the saved spec
var data = new google.visualization.DataTable(spec.dataTable);
var options = spec.options;
var chartType = spec.chartType || "BarChart";
// Instantiate and draw our chart, passing in some options.
window.chart = new google.visualization[chartType](document.getElementById('chart_div'));
chart.draw(data, options);
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.
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.