Tooltip bug with dynamic google charts - javascript

I am using google timeline charts for a project .
The timeline is being updated every some seconds(randomly) adding new lines in the graph .
When the lines are being added to the timeline tooltip pop up does not disappear from the screen when mouse moves over to other lines. The tooltip is sticky on the screen and this gives an unpleasant user experience
Any solution for this?
Thanks

So I found the solution ,
container = document.getElementById('' + youridentifier + '');
chart = new google.visualization.Timeline(container);
chart.draw(dataSet, options);
Every time you "redraw" the google chart you have to create a new visualization object .

If youre using Bootstrap tooltips you can hide them all with a JS call.
$(someJQuerySelector).tooltip('hide');

Related

D3 line chart doesn't do transition while appending data to chart

I am working on adding transition to the line chart, copied a example from herehttp://bl.ocks.org/d3noob/7030f35b72de721622b8, i want the line chart to do transition when the interval happens, like in the example when you click the button the chart will move to left but in my plunkerhttps://plnkr.co/edit/sCJYfXDSjXN1IiFokK1V?p=preview doesn't work, I put the d3 code in angular's custom directive because i have a requirement where graph will be repeated more than 5 times any help is much appreciated
In your update data function, selection of the chart was var svg = d3.select("lineChart").transition();. It should be var svg = d3.select(".lineChart").transition();

Chart js - Legend hidden when create chart after document.ready

I'm actually developing one app using the javascript plugin chartjs (on the framework Symfony 3) and I realised that when we create a chart before the page it's ready, the legend it's correctly shown, but when I create other chart doing click on a button (after document.ready) the legend it's hidden.
To illustrate my problem, when I do :
// the chart is draw with the legend
drawChart();
// The chart is draw without the legend
$(document).ready(function() {
drawChart();
});
Have you ever meet this problem ? Is there a solution to solve this ?
Big thanks to all who takes time to help me !

Google Charts API labels with lines

Is it possible to achieve the same effect with the 'new' Google Charts API like in the deprecated Image Charts service where the labels are outside the chart and a line points to the right pie slice?
Important: I know how to create the pie chart, I just don't know how I can achieve the: labels outside the chart + lines layout.
How it should look (uses deprecated Image Charts):
EDIT: just to make sure you guys don't write down to much code, I am just searching for the right properties to achieve this. Thanks.
You can get a similar result by using the legend.position property and set its value to labeled.
Though the line points will be attached to the centers of the slices, it's not possible to reattach them to slice borders.
var options = {
legend: { position: 'labeled' }
};
// ...
chart.draw(data, options);
The picture of the chart:

Animating column chart

I am using Highcharts to create a bar chart, and trying to figure out how to animate the changes that I am making to the chart. I have set animated to true, but its not showing any changes, just redrawing the bar to the new height.
How can I have it animate changes? Right now I am setting the data with series.setData(), not sure if there is a way to set a specific bar, maybe this is why it does not animate?
http://jsfiddle.net/nycynik/FACtf/
var series = this.series[0];
chartData1[Math.floor(Math.random()*10)] = Math.random()*125;
series.setData(chartData1, true);
Series.setData() doesn't animate because all the points are thrown away and replaced with new ones.
What you are looking for is Point.update(). When you run point update you are only updating the value, so the point is able to animate from the old value to the new one.
chart.series[0].data[0].update(Math.random());
See demo.

dygraph vertical line

Is there a way to make a vertical line in the js graph library dygraph?
I am loading data and would like to put vertical lines like graphite does to show events
is there some special context to add vertical lines
You've probably figured this out by now, or stopped caring, but the way to do this is with a custom underlay (see http://dygraphs.com/tests/highlighted-region.html and http://dygraphs.com/tests/underlay-callback.html for examples). You provide an underlayCallback function when creating the graph, and it gets called with the canvas element, area (which helps with coordinate math), and a reference to the Dygraph object.
Here is a simple solution.
Use the crosshair demo (http://dygraphs.com/tests/crosshair.html) on the Dygraph site.
Once you disable the horizontal bar on the crosshair sample, you are getting a vertical bar.
g4.updateOptions({ pointClickCallback: function(event, p) {
var div_vertical_style="top:0px;left:"+g4.toDomCoords(p.xval,-20)[0]+"px;width:1px;height:"+g4.plotter_.area.h+";background-color:black;position:absolute;";
$("#graphdiv4").append("<div style="+div_vertical_style+"></div>")
}});
//my idea , add div .....

Categories

Resources