I need to make a cross platform mobile web app that must display a line chart with pinch zooming. It needs to display sequences of prices where you can pinch zoom so that the axis scales.
I have googled around a bit but failed to get a clear picture of my options. So before I start testing vaious libs like highcharts, I would like to hear if anyone could recommend a charting html5 lib that supports pinch zooming of a line chart. It must work on both ios and android and be based on html5 and javascript.
I'm from jqChart Company - http://www.jqchart.com/. I think our jqChart should work perfectly for you.
Related
I want to create a piece of software in the browser that listens to microphone and detects it's pitch region. Then I want to show it on realtime streamed line graph. On yAxis there will be mapped MIDI keys presenting the notes (under the hood - yAxis will be just Hz), and on x axis I want to show the line based on Hz.
I already have built something that listens to the microphone and detects frequencies in Hz in realtime. The website is written in React. Now I need to use some library chart that will update the line with the pitch value. If there is no such value (nobody singing/speaking), the chart will be filled with nulls or missed values.
Is there any chart library that is focused to has high performance with strong customization options? I tried apache/echarts, but it seems that it has trobule with streaming in realtime.
You could alternatively try LightningChartJS. We have multiple charts which can be used for audio visualization in real-time. These charts feature strong customization options as well as the ability to place multiple charts into a dashboard-like layout.
Have a look at our Interactive Examples and more specifically, the audio visualization example too.
I am a LightningChart Dev, so if you need any support, feel free to message me.
Hello I have a question
I made a gantt chart using custom viz in splunk like this here.
https://splunkbase.splunk.com/app/1741/
It's app is very nice so many data visualization I think.
But How can I using zoom in/out function in this apps.
Need modified apps add to zoom in/out function?
How can I do this?
Thanks.
You would need to contact the developer to modify the app to allow zooming in and out. Or ad the source is available, add that function yourself. It doesn't look like that feature is supported currently
In general, you would probably like to decrease the time selected in order to zoom in to a particular timeframe
I'm programming with dimple to paint some charts with meteo data in real time. I have got to paint charts with google chrome, but now, i'm testing the charts with firefox, and i can't see the charts. It seems that the svg is placed in a place outside of my div. I have tried with percents and with pixels, but it's impossible. Have I to add some directives to work with firefox?
You are using an old version of dimple. Please use http://dimplejs.org/dist/dimple.v1.1.3.min.js instead.
I've been tasked with fixing an issue in my company's web application that involves SVG graphs generated using the D3 library. The issue is at hand is that the graphs display fine initially; however, when viewed using an iPad or other iOS device and the user zooms in on the graphs, they quickly become aliased/"fuzzy" - I'd like to prevent this loss of quality, if possible.
You can see examples of the issue here: normal graph, zoomed graph
I've never worked with SVG or D3 before, and I'm not sure if they provide any options for handling this sort of thing; if they do, I haven't been able to find them in any of the documentation I've read.
I a feeling this may be the product of the iOS zooming method and they may not be anything I can do about it besides attempting to catch the zoom event and trigger the re-rending of the graph at the desired magnification level, although I'm not sure if that's possible.
If anyone has some suggestions on how I could go about fixing this, I'd greatly appreciate the advice.
The default zoom behavior on iOS uses a fixed-resolution texture while zooming; this is known as hardware-accelerated zooming. Thus, if you take a small part of the page and zoom in using two fingers, the graphics may appear temporarily pixelated while zooming. This is true of any page, so many iOS users are likely accustomed to it.
The nice thing about SVG, being a vector graphics format, is that as soon as you release your fingers the browser will re-render the SVG at the new resolution.
If you want to maintain crisp resolution while zooming, you need to disable native hardware-accelerated zooming, and instead re-render the graph in response to touch events. You can use d3.behavior.zoom to add panning and zooming interaction to a visualization. However, note that depending on the complexity of the visualization, this may be slower than hardware-accelerated zooming.
Here's an example that combines d3.behavior.zoom with d3.geo.path to demonstrate the technique: http://bl.ocks.org/2374239.
My customer has some specific requirements for a graph to show in our web app. We use HighCharts elsewhere in the app for more traditional graphing, but it doesn't seem to work for this situation. Their requirements:
Allow the user to select a background image, set the scale and origin of the coordinate system. We'll graph our points against the user-defined coordinates.
Points can be color coded
Mouse-over boxes show more detail about the points
Support for zooming and panning, scaling the background appropriately
Less importantly:
Support for drawing vectors off the points
Some of this seems basic, but looking around at different graph packages, I was unable to find any with an example of this kind of usage.
I've entertained the thought of just hacking it together in canvas myself, but I've never worked with canvas before so I don't think it would be cost effective. The basics of plotting points with a scaled coordinate system against an image background wouldn't be too hard, but the mouse-over details, zooming and panning sound much more daunting to me.
More info: Right now we use jQuery, HighCharts, and ExtJS for our app. We tried flot in the past but switched to HighCharts after flot didn't meet our needs.
this looks promising:
http://danvk.org/dygraphs/
And this seems to have what You need, but it's not free:
http://www.ejschart.com/