I am using plotly js offline line graphs in HTML, when the json has more data its taking more than one min to load.
We have left nav bar , when switching from one tab to another its taking more time to load the content due to plotly line graphs.
Data for line graph: X-axis having 15 transactions, each transaction has around 5000 points to plot.
Approaches I have tried:
Giving an event listener for HTML on load of the page , minified the files (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages).
Giving “type: scatterGL” for line graphs and plotly.react(id,data,layout) instead of plotly.newPlot(id,data,layout).
By using above approaches also its taking same time.
May I please kindly know if anyone know how the loading time can be reduced for large data.
Thanks,
Bhuvana.
That is a lot of points. 75,000 points means that Plotly is adding DOM elements. That is way too many for any library. Consider using Canvas instead, Plotly has support for it and this example shows how it can handle 1 million points in a scatter plot, no problem.
Related
I'm trying to combine a calendar with a chart on one webpage. They need to be on the same timeline (for example to mark the current day with a line). They do not show the same data (So the calendar events are independant from the chart values).
Illustration of how it should look (The final solution would have different views, per week, per month, per year)
My first instinct was to use a HTML table (or <div>s formatted like a table) in combination with a chart library, the only difficulty there is getting both variants onto the same timeline (They need to line up perfectly).
That's why the idea of using SVG came up (which seems to be the prominent idea in the team), but drawing every table cell with <rect>, taking into account position, border width and then also manually positioning texts (and also clipping them if they get too long) seems like a major drawback.
Is there any sane and straightforward way to implement this? I either have to use a third party chart library and try to perfectly line it up, or I draw everything into one SVG, but then everything down to the position of each text element needs to be calculated. I'm afraid if we go the SVG way every little change to the design could suddenly need hours of work (Besides supporting different chart types, combining line and bar charts, possible animations and so on).
I have created a layout algorithm for graph visualization so that y position of each node corresponds to time and the graph starts from the top (t=0) and grows dawnwards. I also draw edges with bazier forms I made. Also the color of the edges vary throughout the edge. I need the layout/look to remain the same. Currently, I am using pycairo for drawing the graph that generates a CSV file (potentially, I can create other formats such as PDF,PNG too). My goal is to make the visualization interactive, for example to be able to click on specific nodes and get the data related to that node back. I couldn't figure out how to do this in python. Now, I want to do this in JavaScript and D3.js.
My question is how can I make the CSV output interactive? For example, when clicking on a node, it should return its y position (which represents time), and some other attributes. I also want to be able to jump to a certain y position in a graph given user's input.
It would also be helpful to give me some clues on how to think about this problem.
This is a screenshot of what the final result looks like. The horizontal lines are really not important
Currently I am facing issue while rendering chart for large data in EXT JS. Chart gets cut or overlapped.
For example, I have 500 names on x-axis to plot then chart displays only 15 to 20 of them and others get cut. According to my view there should be scroll bar to view whole chart rather cutting the legends. I have tried to found solution for having scroll bars for such large charts but I am not able to find it.
Any other way for viewing whole chart is also accepted.
One workaround I can think about is 'panzoom' interaction.
Please visit link given below to see an official example with 'panzoom'.
http://dev.sencha.com/extjs/5.1.0/examples/kitchensink/?charts=true#line-markers
With 'panzoom', you can zoom in to the chart and then scroll/pan. Zooming in to the chart would make the hidden coordinates visible.
It may look like this because you might have smaller space to render the chart as your data is too big. So you can try with 'pan zoom'. But I don't think so you will get a useful chart. It will still get junked.
I have a HighCharts chart and am displaying a trend that has a value every minute. So in a given day I will have 1440 data points, because 24 hours = 1440 minutes.
This is fine when I am displaying one or two days of data. But if I am displaying 4 weeks I will have 40,000 data points. I can read this data from the server very quickly, but HighCharts takes several minutes to build the graph.
My proposed solution is to interpolate data on the server side so we will have 1000 points over a 4 week period, or one value every 43 minutes. Then, when the user zooms, use AJAX to read data from the server again.
Am I making a mess of this or is this what normally happens? Is there a way to make HighCharts do something like this for me (and quickly)? I have tried the HighCharts DownSample Plugin but the initial slowness (2-3 minutes to build the graph) remains.
In fact, you want to use Highstock, with dataGrouping. Demo here.
In case you can't use Highstock, then it may be hard. However, check this ticket - it's experimental plugin for Highcharts to use canvas for rendering huge amount of points. Of course IE6/7/8 is out of the discussion.
And regarding loading data on demand, check lazy loading article. Yes, it refers to Highstock, but should be possible to use the same solution in Highcharts. Demo here.
I've been using the chart API to draw a cross sectional profile of a landmass, using a slightly modified version of the chart example shown here.
however, I now need to draw a line of sight between the two end points, as well as a Fresnel(1) zone between the two. can this be done through the interactive chart API? or is there a better way to get this done?
also, I would like to 'select' the first and last entries to display their elevation, however my code doesn't appear to do anything:
Chart.setSelection([{row:0,column:null},{row:Results.length - 1, column:null}]);
After finding some other problems with the visualization API, I just gave up and did the whole thing using Raphael instead, works way better :D
EDIT: didn't know you couldn't answer your own posts within two days :| kinda of annoying since I've spent like a week straight trying to fandangle the bleeding chart -.-