Chartjs chart broke when using Pagedjs - chart.js

I am using Chartjs & Paged.js to print pages.
everything is fine until I found if I write these code
let flow = paged.preview().then((flow) => {
console.log("Rendered", flow.total, "pages.");
});
charts disappear.
are these two package not get along...?

Related

webview_flutter can't hide/change some elements

Using the webview_flutter with evaluateJavascript(), I've been able to modify the style of most elements of my website, but can't understand why some elements don't get modified.
My WebView is included, and the website to display within the WebView is https://dme.com.sg/index.php?dispatch=auth.login_form
I've included a snapshot as well, showing how I can hide and modify the colours for most of the elements, yet it seems all those that are within the "form" cannot be changed.
Would appreciate any help on how I can modify those as well, especially to change their colours to a darker theme to match the colours of the app.
WebView(
initialUrl: 'https://dme.com.sg/index.php?dispatch=auth.login_form',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (controller) {
_controller = controller;
},
onPageStarted: (url) {
_controller.evaluateJavascript(
"document.getElementsByClassName('tygh-top-panel clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header clearfix')[0].style.display='none';"
"document.getElementsByClassName('tygh-header')[0].style.display='none';"
"document.getElementsByClassName('tygh-footer')[0].style.display='none';"
"document.getElementsByClassName('auth-information-grid')[0].style.display='none';"
"document.getElementsByClassName('ty-breadcrumbs clearfix')[0].style.display = 'none';"
"document.getElementsByClassName('container-fluid content-grid')[0].style.background = 'black';"
"document.getElementsByClassName('ty-mainbox-title')[0].style.color = 'pink';"
"document.getElementsByClassName('buttons-container clearfix')[0].style.display = 'none';"
);
},
),
Have kept tinkering around with it, and looking up JavaScript tutorial, and I managed to find a solution. So I'm not sure HOW or WHY, so still hoping someone could comment a response that explains so I can better understand.
Something else I've learnt, it's easier to just use the "console" tab of chrome to test the java scripts on the page before moving it into flutter webview.
Using the "document.getElementsByClassName("buttons-container clearfix")" command, I got a list of where the class was being used, and found the one I wanted to change was 1. It helps that when as you type the right index number, it gets highlighted on the website.
So then using "document.getElementsByClassName("buttons-container clearfix")1.style.background = 'black'" I managed to change the style of the element I wanted.
I've included a screengrab of the chrome console here if it can help anyone else.

SwiftUI: Why does ForEach need an ID?

Im using a ForEach loop in my SwiftUI View and I am getting strange warnings.
It works fine like this:
ForEach(0..<7) { i in
// do something
}
Then I changed 7 to a constant:
let numberOfElements = 7
ForEach(0..<numberOfElements) { i in
// do something
}
And got the following warning:
Non-constant range: argument must be an integer literal
I googled an found the following solution which works:
let numberOfElements = 7
ForEach(0..<numberOfElements, id:\.self) { i in
// do something
}
However, I have no idea why it works. Why do I have to give an ID to the ForEach loop, and what is the ID for?
ForEach(0..<numberOfElements) { i in
// do something
}
The reason why using the above ForEach init pops the using literal value warning is because SwiftUI doesn't expect to re-render anything when using the Range<Int> init method. This is a documented requirement / feature. The exceptions are the init methods with id:.
A hashable id matters in SwiftUI as well as in many other view-tree based frameworks like React is because these UI frameworks needs to use these ids to track updates for views inside the ForEach or any other "Container Views", to help the framework achieve usable performance. If you want to dig deeper, take a look at this WWDC video: Demystify SwiftUI.

Chart.js Version 1 differences and can they be achieved in version 2?

I apologise if this is the wrong place but the chart.js git suggested this as the only place to get support.
I recently used version 1 of chart.js for a project and I picked this library over others because of the simpler/easier user experience. As an example the line graph, if you hover over an x axis it will highlight the closest points to your hover. In version 2 you have to hover over the actual point. It's a similar situation on the other graph types both in chart.js and other libraries like highcharts.js.
My question is simple, can we replicate the usability of version 1 in version 2 or have we lost this aspect completely?
Glancing at the documentation it doesn't appear to be possible.
If the answer is no, may I suggest that one of two things happen, either it's developed for version 2 or b version 1 is kept around.
You can replicate the v1.x functionality by extending the line chart type and setting the tooltip mode to label, like so
Chart.defaults.myLine = Chart.helpers.clone(Chart.defaults.line);
Chart.controllers.myLine = Chart.controllers.line.extend({
updateElement: function (point) {
var result = Chart.controllers.line.prototype.updateElement.apply(this, arguments);
point.inRange = function (mouseX, mouseY) {
var vm = this._view;
// ignore the y coordinate
return vm ? (Math.abs(mouseX - vm.x) < (vm.hitRadius + vm.radius)) : false;
};
return result;
}
});
and then
...
type: 'myLine',
...
options: {
tooltips: {
mode: 'label'
}
}
};
Fiddle - http://jsfiddle.net/gyqmbL2q/

UIButton not appearing in Rubymotion

For some reason my UIButtons aren't appearing in my ruby motion apps. Only the button text appears.
Here's the code:
#containerView = UIView.alloc.initWithFrame([[0, 50], [self.view.frame.size.width, 100]])
#loginButton = UIButton.buttonWithType(UIButtonTypeRoundedRect)
#loginButton.frame = [[(self.view.frame.size.width / 2) + 5, 65], [(self.view.frame.size.width / 2) - 15, 40]]
#loginButton.setTitle('Login', forState: UIControlStateNormal)
#loginButton.addTarget(self,
action:'login',
forControlEvents:UIControlEventTouchUpInside)
#containerView.addSubview(#loginButton)
self.view.addSubview(#containerView)
I'm using RubyMotion v2.16, Promotion 1.0.4, sugarcube 1.3.5, motion layout 0.0.1 and bubblewrap 1.4.0
I've tried to render the buttons using the promotion way, the sugarcube way and the bubblewrap way but decided to break it down to the raw rubymotion way (above) for troubleshooting in a regular view controller. Any ideas on this one?
Well, if anyone else is reading outdated documentation also, it turns out that UIButtonTypeRoundedRect has been deprecated in iOS7.
https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/TransitionGuide/Controls.html#//apple_ref/doc/uid/TP40013174-CH9-SW1

Change line Color in the lineChart Example on the Gadget Server

I am running the lineChart gadget example which makes use of the visualization framework on the gadget server. It runs fine with data being displayed every second. I want to change the color of the line but I cannot find any method inside the gadget code which can set the line color. In the following piece of code you can set some properties.
window.onload = function () {
var lineChart = new wso2vis.s.chart.protovis.LineChart("chart","MNT-Lab : LabVIEW Simulation","");
lineChart.dataField(["Response", "Terminal"])
.dataValue(["Value"])
.dataLabel(["Name"])
.width(380)
.height(300)
.band(50)
.legend(true)
.marks(true)
.dirFromLeft(true)
.xSuffix("s");
But i am a bit confused on how and where the default color of the line is being set. I have looked inside the wso2vis.js file but cannot see any methods to change the color.
WSO2Vis.js is renamed to viskit.js and is now hosted at GitHub [1]. for your question you can change the rgba values in [2].
Regards,
Nuwan
[1] http://wso2.github.com/viskit/
[2] https://github.com/wso2/viskit/blob/master/js/subscriber/chart/protovis/LineChart.js