Javascript in WebView rendering issues - javascript

I'm not new to coding but I am new to using WebView to display HTML.
My Java swing project requires charts and graphs, and I think the prettiest out there is Chart.js.
To display the javascript-created charts, I save progmatically created html and read it in to a browser (WebView page) in a JPanel (through Javafx).
Here is my issue:
Chart.js (and my created HTML files) run fine in a real web browser, but in WebView they have really odd glitches that destroy my graphs (covering datapoints, etc). As far as I've seen, these glitches only occur in radial graphs such as Pie, Donut, and Radar.
I've even visited the chart.js webpage (through my app) and the examples on their homepage also have the same glitches. I have the updated, stable version of their open source code...
What i've tried:
messing with background/css in html
messing with parameters in chart creation, such as stroke controls or animations
drawing different graphs with different number of datapoints with different values
What I haven't tried:
I'm not too familiar with Javascript so i haven't gone in to debug its main chart.js javascript file yet.
An example of what a sample graph looks like in any real web browser:
good pic
And an example of what the same graph looks like in my java app: bad pic
Please help!

Related

Unknown content in the html div

I know this question is not a good one but I have stumbled upon on website called Tradingview.com which has awesome charts. I was interested so got into the html code of the website and I discovered that div which should have contained desired chart was empty. I get that the chart is generated by JavaScript but I am interested how it is possible to draw something like that without any html elements and If it is possible could you tell me what "library" do they use?
Here is the link to Apple Stock Chart
https://www.tradingview.com/chart/BRuYnW6t/
Basically Javascript literally Draw chart inside that div on local end.
like JS will make rectangular shapes. circles, lines and everything.
for details please visit this site.
https://www.w3schools.com/tags/ref_canvas.asp
drawing div will be empty but shapes and everything in it will be there because of JS.
Looks like tradingview has an API for their library available upon request. I would also encourage you check out chart.js, a popular solution for implementing charts in javascript.
Normally drawing in HTML is done with canvas (WebGL for 3D drawings) or SVG. Additionally, you may use plugins like Flash ActionScript and Java Applets. For charts, a superb library would be Google Charts.
If you inspect carefully enough (F12), you will realize TradingView actually uses canvas for the drawing.

web page is hanging while loading from DB and large data not showing on charts in asp.net mvc5

I am working on asp.net mvc 5
I am displaying charts using dot net highcharts
while on displaying data on charts, after display the page hangs for a while and then it becomes responsive
I don't know what is going wrong
I am using VS 2015 and SQL SERVER 2014
Also the data on the chart is not showing when the data become large
for this I have used turboThreshold: 1100 here the data less than 1100 pint is shown but still page hangs for a while after that it become responsive but when the data is above 1100 point it will not show any data,
when i make the value of turboThreshold: greater than 2000 it displays all data but it hangs the page and then it displays an error to wait or kill the page
I am using Google Chrome to view the application
Any help would be appreciated.
There is an official module for Highcharts to increase the performance while working with large datasets.
It is called boost.js.
Majority of charting solutions are using SVG technology and in all SVG based charting solutions, performance decreases after adding a couple thousand of SVG elements to DOM.
Highcharts developers solves this problem with this boost.js module.
It is using HTML5 Canvas technology insted of SVG. Charts are rendering with HTML5 Canvas and you can still access to DOM like SVG based solutions without any difference. All you have to do is to include this module in your project and your charts will load faster.

Problems with Interactive WebGL Globes with THREE.js and D3

I want to make an interactive globe 3D and I found this site that seems to be perfect to what I want, but I'm have some problems with the code.
1- I downloaded the source code but he don't open in my browser, it stop in the loading...
2- Are There best way to map the click on countries? The current code is using segments but if I want to click on some little country I will have to increase the amount of segments and this make some performance problems to some computers or cellphones.

algorithm for lines connecting rectangles

I am looking for an algorithm or sample solution for drawing connection lines between rectangles. In my case rectangles are elements Gantt chart and connections show depenedencies. I am using the Raphael JS library to draw rectangles and lines. So a solution in JavaScript would be the best, but an algorithm in meta language or other JS similar will be nice also.
I have found an example that looks nice but maybe someone knows something else.
In my case there are a few relevant requirements:
only horizontal and vertical lines are allowed
lines should not cross each other
lines should not cross rectangles
I hope to achieve something similar to this:
It's look like you are looking for javascript gantt charts. Check out this one's:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
Editable chart
Full control with JavaScript API
Multi-browser/multi-platform support
Loading from XML
Serialization to XML
Movable/resizable activities
Built-in edit menu, plus custom dhtmlxMenu support
Extended properties pop-up
Optional tree view
Customizable task subscription
Percent-complete shadings
Dependency arrows
Fast and smooth rendering
Built-in constraint checking
Print-friendly mode
http://www.bryntum.com/products/gantt/
Built entirely on web standards - HTML/CSS/JavaScript
Use with any server (PHP, Java, ASP.NET)
Supports dependencies, lead/lag and critical path
Export to PDF/PNG, MS Project import
Project, task and resource calendars
Unit tested with Siesta
http://gxt-scheduler.com/
Built entirely on web standards - HTML/CSS/GWT
Integrates with any type of backend
Fully themeable, requiring only basic HTML/CSS knowledge
Drag & drop and resize items easily
Supports all major browsers
http://gantter.com/
google drive integration
FREE cloud-based project scheduling
http://gantt.twproject.com/
in-place editing
drag&drop
zooming
do/undo
multiple dependencies
full editing
dates shortcuts
css skin
multiple browser
resources editing
multiple assignment
milestones
export data in JSON format
resize & scroll

Report viewer control - generate different sized graphs

I am building a web application using sql server reporting services. As part of my application, I present the report onwards to the end user using the report viewer control.
The reports that I have created are mostly very squeezed. That means that I have several graphs on the same single report.
What I want to do, is give the user the ability to focus on a single report. I've created the appropriate client side code, though now I am faced with a rather tedious problem. The image that the report reviewer renders is relatively small (as I needed to fit several graphs on the same single report). when I try enlarging the graph's image on the client side, it gets stretched. The image is rendered small!
How can I instruct SSRS to create a bigger image of the graph? Can I specify anything in the underlying querystring?
http://localhost:3450/Reporter.aspx/Reserved.ReportViewerWebControl.axd?ReportSession=rkymfk45wv0wosrpru5en4rr&Culture=1037&CultureOverrides=True&UICulture=1033&UICultureOverrides=True&ReportStack=2&ControlID=bc66e58c31d64e8a8231389d9a5b5fdd&OpType=ReportImage&IterationId=163e91e9a63e45adbc03658d347470ab&StreamID=C_59iT1_1
Thank you
I hate to say but there are few third party tools that can offer the dynamic ZOOM capability, I think. http://www.perpetuumsoft.com/Silverlight-Viewer-for-Reporting-Services.aspx?lang=en fyi
I don't know anyway to dynamically size a report element. I don't think you can use expressions for height and width.
Why not have one report that is all of the small graphs, then make single reports for the larger graphs. You can then set the navigation of the small charts to "Jump to report" and go to the larger charts. It is ugly, because you will have to maintain two copies of the charts, but it should work.

Categories