Here is the fiddle.
What I am trying to accomplish:
I want to poll the server for data, then populate the entire bar graph. After which I want to update the bar graph in realtime (or say every 1 minute).
This site uses a graph (at the bottom) very much like what I'm trying to do.
As you can see, the initial data gets plotted, and then the graph updates, but I am stuck on how to update the ticks at the bottom, so the original data slides out to the left.
I am using the method suggested here: Realtime chart using flot jquery
I've tried using this, but doesn't do the trick:
yaxis: {
ticks: [1,2,3]
}
You need to change the plot_bot.getOptions().xaxes[0].min
Here is a example
Related
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).
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 high chart on my web page which is plotting the interval data of no. of tweets vs time and it is working perfectly fine, but what i want is the tool tip to show the top tweet of that time, for that i need to make an Ajax call every time the charts pops up an tool tip.
But i am not getting how to make an Ajax call in high charts tool tip (a simple get request), and how to cache it so that it doesn't make the same request again and again on the same x-axis point.
Also there is no proper reference available for this question on internet..
If you want to change the tool tip that shows up when hovering over the chart you can set this when setting up the chart by using
tooltip:
{
formatter: function()
{
return (/some html that returns what you want/);
}
},
Also you can interact with the chart after it's loaded by doing the following:
var chart = $('#name-of-your-chart-div').highcharts();
Hope i've understood your question correctly.
Also a great place to look is the Highcharts API: http://api.highcharts.com/highcharts
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 plot data collected live from bee hives. We plan to collect data every 5 minutes, so in a year there will be on the order of 100,000 data points. I want to set up a chart to plot the data, and have new data enter the chart everytime the database changes (using Meteor).
I have a simple mockup at datacomb.meteor.com These charts were made using dc.js, a d3 wrapper.
Is there a way to use the topojson.simplify (http://bost.ocks.org/mike/simplify/) functionality to pre-process the lines and reduce the number of points rendered? Has a more general simplification method been integrated into d3?
Have you looked at Simplify.js? It does exactly this.