I'm using chart.js and trying to get the pie chart to update the chart data when a user clicks something.
In this case: <span class="click" id="one" title="one">One</span>
It is updating properly and a new chart is showing up but the new chart seems to be twice as big. What am I doing wrong and is there a better way to do this?
See:
http://jsfiddle.net/aU8VL/2/
Your chart did not become big or has some bug in it, its because you added different values on the onClick and also onload has different value. To check your work if its the same, you need to provide same value on both events.
check this fiddle.
Related
I have a simple linechart with 2 lines. On hover, I would like to display both y-values in the tooltip that appears. I know I can accomplish this by writing a Javascript function that creates a custom tooltip for every x-value on the graph, but this seems so redundant to do, especially when the graph gets large. Since Google Chart is able to auto-generate the standard tooltip which contain both the x and y-value I feel like there should be an option to do this with built-in tools, is there?
Probably setting focusTarget to 'category' will do the trick.
See here for an example that uses it.
I'm using Flot with jQuery to display a graph. I want to update some information on the graph and then re-plot it. I can see that I can use plot.getOptions().yaxes[0].max for example to update the y-axis max value and have got that to work but I'm using a plugin to add side notes to the graph.
I've used getOptions again to update the side notes data and can read the side notes' data, but can't see how I can get the side notes displayed data to update without completely re-plotting the graph.
Any suggestions?
Since you have to redraw anyway, generating a new plot with the new options is the simplest solution. You do not gain much by trying to optimize it (unless you want to redraw every second).
I am trying to show a many line charts in one chart.
What's happening is that, instead of showing them all at the same time, you need to disable one to show another one.
Here is my jsfiddle;
What do I need to change in my code so it shows all of the graphs together?
Thanks folks
Try not to give the same Key names for your charts. NVD3 by default merges the duplicate Key names together.
After I changed the Key Name from you chart it seems to pick All the line charts correctly.
Here is a Working Fiddle of your code
Hope it helps.
I'm outputting a line graph to my page using the Highcharts API and applying the following methods to it:
zoomType: 'x',
event.preventDefault(),
alert(event.xAxis.min) & alert(event.xAxis.max)
This gives the user the ability to highlight a portion of the chart, and have it output the start time and the end time they highlighted without zooming in.
This works great but now I need to literally highlight that section of the graph the user selected. I've been having a look at the xAxis.plotBands method detailed here:
http://api.highcharts.com/highcharts#xAxis.plotBands
xAxis.plotBands allows me to hard code a highlight into the chart but I'm trying to figure out if it's possible to apply plot bands on the fly. It's important that the chart doesn't reset because the user can dynamically add series to the chart as well, so if it resets, the user loses all the series they added. Anyone know if it's possible?
Yes, this can be done with xAxis[i].addPlotBand().
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.