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
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).
We are developing a web application using Spring+Tiles. We have a requirement that we have to create a bar graph in a jsp page. We searched a lot on web regarding this issue. Means how we can create a bar graph using Open source Charts API. We found many suggested APIs like JFreeChart, charts4j and etc.
But we are not sure which one to use. Actually our requirement is we have to create a bar graph which can be drillable.
Please help us. If you could give any examples that will be highly appreciated.
Thank you very much in advance. Thanks a lot.
I would recommend you to use the rest services and send the json to highcharts OR D3.js OR DDChart, its the best thing to do in your case below link can do what you want :
http://www.highcharts.com/demo/column-drilldown
Highchart (licence) : http://jsfiddle.net/yPVX9/2/
D3 (free) : http://jsfiddle.net/mcuepavh/1/
DDChart (free) : http://kiersimmons.com/DDChart/index.html
You can try FusionCharts for a drill down chart.
Have a look to this and you can use this in your application : Fusion Charts Linked Charts. Regarding licensing issues,you may get in touch Sales Team.
Apart from that, you can use Raphael.js . Start from the basics say try creating a small rectangle, fill some color, opacity, binding some events,etc. With a day effort you can make a simple bar chart. Once you make a bar chart, attach an event to clear your container and redraw another bar chart with the drill down data. Thats the concept you need for your drill-down.
Having said that, I would still recommend you to use Fusion Charts because they takes care of some smart things - like space management of the bars, the intervals, the colour codes of the bars(if not hard-coded), axis part... Its a finished product which abstracts you from the technical obstructions and give your application a beautiful add-on.
I have a line chart using nvd3 as follows :
The issue happens when the legend is used to interact with chart. Since it uses the order of rendering to position each series, it can change the way information is displayed completely. For example, if i click on Blocked (disabling the other) then Requests (enabling it back). The result is as follows:
Which is not very nice.
Looking at the documentation and code I could not find many options on how to handle this issue.
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
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().