I am trying to figure out a way to specify the specific location on the canvas to center on when the chart initializes. Does anyone know if there is a way to do that?
I thought perhaps it might be possible to trigger a plotpan to that position, but I can't seem to get it working. Has anyone ever tried to do this before? Thanks!
In case anyone stumbles across this, I found a very smart solution here: How to save (preserve) the zoom state of flot graphs on Update with AJAX
Basically, the Flot plot has a function var options = plot.getOptions();
Then before you plot, just do that and it will basically clone the chart's positioning and whatnot to the new one.
$.plot(
// selector
$chart,
// line data
data,
// plot configs
options);
Boom, it even preserves if you have any lines that are toggled on or off.
Related
I'm trying use set data as the labels in my Radar Chart and I seem to be struggling with this. I have tried reading the documentation and searching online, but not able to find a solution.
Here is an example of what I am trying to achieve:
https://photoland.io/i/2LXlet
It would be a huge help if someone could point me in the right direction to get this done.
Thank you
I created a code pen for this, hopefully this solves your issue. You can do a whole bunch of different things like create an object and use individual properties as different labels, create an array and select individual values. Whatever you want really.
https://codepen.io/gabedesigns/pen/rqgPPR
Good luck
this example: Synchronisation of multiple charts
use the chartx and charty position of the mouse to detect which data point is hovered. But if u want to sync charts with different sizes... of course it stops working.
the charts are timeseries with the same data length. Is there a way to synchronise relative?
Greetings mok
It's not working as you expecting, because it's not taking current xAxis focused value, but actually the pointer position.
However, I found the example on our Highcharts forum, which shows how to draw the crosshair on all charts, basing on current xAxis position instead of pointer one, so it should help you to solve your problem.
Please refer to this topic: https://forum.highcharts.com/highcharts-usage/synchronize-line-chart-with-xrange-chart-t39781/?hilit=synchronization&sid=72b63bab7545ef4ba2c4a102ef52cfa5
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.
There are many questions out there relating to issues with chart.js re-sizing charts if the same canvas is reused (on some devices). Most of the answers refer to the fact that you need to "destroy" the chart before reusing.
pie = new Chart(pieContext).Pie(data);
and then next time, before doing the above call
pie.destroy();
And in hindsight, this appears to work. However, I had already moved onto using ChartNew.js (https://github.com/FVANCOP/ChartNew.js/) as it seems to have some enhanced functionality above (and was based on) chart.js.
NewChart.js experiences the same 're-sizing' issue, but does NOT seem to provide a destroy() method on the chart object.
How do I fix the re-sizing issue? Is there a destroy() equivalent on ChartNew.js?
Or.. Is there an alternative free library that will allow me to display Pie charts, with the data values written inside the segments and a legend down the right-hand side?
I've read a couple of posts to the developer or ChartNew.js and it seems like functions like destroy() or clean() are missing from the original Chart.js
Now, I'm not familiar with the library but maybe this thread lights up one of your lightbulbs.
Sorry if not very useful :)
im new to the raphael library so im still learning my way around it, i was able to setup my graph the way i want it, but now im trying to do the following 2 things but im having dificulty finding docs / examples for what i want.
here is what i have so far
http://jsfiddle.net/PA67H/
animate the inital data points when the graph loads with something similar to this
animate a change in data points, so when the button is pressed the data source is changed to var2 but in an animated way like here
You are looking for http://raphaeljs.com/reference.html#Raphael.animation
may be you can find out what you wanted.