Creating a responsive barchart in amchart v4 - reactjs

So I read on the docs that responsiveness for amchart 4 is still currently under development, and so perhaps that explains my difficulties here.
I'm trying to create a barchart that will shrink properly without distorting how the data is displayed. I've tried shrinking the parent container with an #media rule, but that distorted the data.
What's happening: When I shrink the view (i.e. open up inspector or run the web app on a smaller machine) half the category labels on the X-axis are disappearing for some strange reason. It seems to be every other label exactly is gone.
I've tried setting:
categoryAxis.minWidth = 0;
As an approximation of v3's minHorizontalGap property but of course they aren't the same.
I've tried setting the column width in hoped that that would influence the labels.
series.columns.template.width = am4core.percent(50);
And finally I've tried setting both the whole chart to responsive, and the categoryAxis:
categoryAxis.responsive.enabled = true;
But doing this gives me the following error which I can't find support for online:
bootstrap:114 Uncaught (in promise) Error: Loading chunk vendors~responsivedefaults failed.
I'm not sure what the problem is or how to resolve it, I can't believe they'd release a version of amcharts that didn't have responsivity in this age, and so I think it has to be something I'm doing wrong.

So I found the v4 equivalent to minHorizontalGap and that has solved the problem for me.
categoryAxis.renderer.minGridDistance = 60;
It's as simple as that. I still don't know why responsive.enabled doesn't work, but this is a satisfactory solution.

Related

Is there a way to customize the number of pages being printed on JavaScript / React?

I am currently working on a React application that uses Chart.js. Recently, I have found a new bug when using Chrome: whenever I'm trying to print a page that contains the charts, over 600 additional blank pages are generated.
This happens whether I print using cmd + print or window.print().
It is important that people can print these reports on our application. This issue is currently happening on Chrome, but not on Safari.
Is there any way to set the number of pages being printed, either with CSS or JavaScript?
maybe some property on #media print ?
Your help will be greatly appreciated!
I investigated this issue further.
The v108 Google Chrome update brought issues on Print Preview for many users.
There is a workaround that involves applying this CSS:
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay “absolute”
}
chartjs-size-monitor,
.chartjs-size-monitor-shrink,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay “absolute”
}
Source: Hundreds of blank pages and/or disproportion when printing a web page, after chrome version ~103 release (solved)
This fixed my issue! Hope it can help anyone who needs it.

Can't find variable : Dimensions

I've been getting this error in the project since I pulled expo to version 44.
The error image is attached.
What I tried could not solve the problem?
Check you have dimensions or not. Also check where the component dimension is coming from.
ReactNative/Expo errors stack error cause snippets are most time misleading. Make use that your code does not use Dimensions API - actual device width and height without importing it. via #BYIRINGIRO Emmanuel

iOS 12 and SceneKit: Node showing up in White

The application we had have been using SceneKit for a while and never had any issues with it until recently. Compared to earlier, now the render doesnt show the node in there actual color. Please see the images attached for more detail. If anyone has a solution to it then I would highly appreciate it.
iOS 12
https://image.ibb.co/i9sVGp/PNG_image.png
iOS 11
https://image.ibb.co/bBRCU9/IMG_0145.png
I had a similar problem in an app that downloads OBJ and MTL files with their texture images and renders them. All image texture materials were just blank white.
In my case, the problem was solved by manually disabling the emission property on the model's materials:
for (id object in self.modelNode.geometry.materials) {
((SCNMaterial*)object).emission.contents = [UIColor blackColor];
}
I have no clue why the emission component was set at all and why this changed with iOS 12/13.
I fixed this by changing the 'Emission' property from white to black under the material settings in xcode. Save the file as a scene-kit file to avoid having to deal with it
Select the model
Go to the panel on the right
I was able to solve my issues for the moment by choosing OpenGL ES as render mode:
I was able to solve this issue by setting the following properties:
self.scnView.pointOfView.camera.wantsHDR = true
self.scnView.pointOfView.camera.minimumExposure = -1
self.scnView.pointOfView.camera.maximumExposure = -1
Apart from these properties, you can also set
emission and lightingmodel geometry properties of your node.

JfreeChart and ValueMarker not displayed (headless environment)

I have a problem while generating a chart. Every part on the chart is well generated except a ValueMarker which is not. I am working on a web application in a headless RedHat environment. I got another problem for the chart generation (which is now solved), the description of my environment is here :
JFreeChart strange rendering (headless RedHat)
It is working perfectly on Windows.
The piece of code adding the ValueMarker is :
Marker distanceTiers = new ValueMarker(Double.parseDouble(resultDistance.replace(Constants.UNITE_DISTANCE, "")));
distanceTiers.setPaint(Color.BLACK);
plot.addDomainMarker(distanceTiers);
Here is what I obtain, I am supposed to get a vertical line at X = 40 and I cannot figure out why everything except this line is going well :
If someone has an explanation for this, please do not hesitate.
It's not clear where you get the domain value used to construct the ValueMarker, but you might compare your approach to that shown in this Q&A

Dojo ItemFileWriteStore issue with IE7

I have a grid that is embedded within a ContentPane which is in a tabContainer. When loading the itemfilewritestore IE7 pops an error.
Code:
var theData = {identifies : id , items[]};
var theStore = new dojo.data.ItemFileWriteStore({data: theData});
console.debug(theStore); // this throws some weird error
error:
{close:function(_81)if(!this.isDirty)........There are unsaved changes present in the store Please save or revert the changes before invoking close.
This error only shows itself in IE7. FF has no problem and renders the data properly. And yes I know there is no data in this code but in the real code the data is added later.
This issue was not as described. The error was not the store in any way. After digging around more, I found out that the real problem was a parsing on a javascript that was being imported. Going step by step through it the problem was because a JSON object was using the term "class" as an attribute. This seems to be against the IE "standards".

Resources