I'm using Flot.js to make a simple line chart on my page; the problem I'm currently faced is that, without any clear cause, the data points which I've chosen to render as circles will occasionally render as squares. Most of the time, it appears normally. However, occasionally after a refresh of the page the chart will simply decide to appear differently. It's unclear what the cause of this is.
One thing which I've noticed however is that, when this bug occurs, another chart I have (this one a pie chart) stops properly rendering the radial hole in the center. One always occurs at the same time as the other; resizing the chart area (using the resize plugin) doesn't help and refreshing causes it to display properly only some of the time.
Here's a list of plugins I'm loading:
Flot core
Navigate
Pie charts
Resize
Selection
Threshold
Time
Note that not all of these are used for all of the charts; navigate, selection, threshold, and time are all used only for the line chart, and resize is used for everything.
Related
I'm currently trying to add a horizontal scroll bar below x-axis to control data displayed along x-axis.
The chart that I'm using is the following link.
https://arction.com/lightningchart-js-interactive-examples/examples/lcjs-example-0904-3dSpectrogramBox.html?theme=lightNew&page-theme=light
[3d Box Series Spectogram]
Unfortunately, there is not much information I can find on the API documentation about adding a scroll bar.
The closest api is 'setScrollStrategy' API.
Thus, I've added the following code snippet.
this.chart.getDefaultAxisX().setScrollStrategy(AxisScrollStrategy.progressive)
But it didn't make any noticeable change..
If Anyone has similar experience to share with me to implement such functionality, I'd be grateful.
At least I can say that there is no built-in functionality for this kind of scroll bar in 3D.
Programmatically you can alter the Axis interval like this
chart3D.getDefaultAxisX().setInterval(20, 40, false, true)
However, this is probably what you are after, since this just affects the positioning and scaling of the data, the samples outside this interval are not clipped out.
Connecting some sort of slider component to this interval would be straightforward, whereas adding this slider inside the 3D view under the X axis sounds tricky.
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.
To solve the below problem, I've tried setting Offset and margin
I've got a pie chart:
which renders labels perfectly.
Sometimes when we change the datasource - the labels gets collapsed. And shows only ...
My intuition says this happens because of un-necessary white space on the right side.
How do I avoid this behaviour?
This is a known issue. But, currently, this behavior cannot be changed. This is in DevExpress' to-do list: dxPieChart - Provide the MinAllowedSizePercentage property.
When implemented, it should make it possible to improve the resulting chart layout by configuring the minimum allowed Pie size.
as a part of an app that I'm developing, I am looking for an open source pie chart which can be manipulated on mobiles effectively.
I've found great pie charts such as Flot, jqPlot, HighCharts, etc. however, they only show configured values. While I don't need slice animations of click events, I do need a pie chart with the capability of changing its values from the chart itself, in a way similar to this.
The point is that I want to force a user to have his values sum up at 100 by favoring a slice and increasing its size at the price of lowering another slice.
Thanks in advance.
Chart.js is what you're looking for. If you have a look on the bottom right of the home page you'll see interactivity. You can trigger events when an element is clicked that will resize the chart as long as you are willing to do some javascript yourself.
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.