We Keep Coding

Highcharts plotlines above area using DOM

I want plotlines to be rendered the last(right now area is overlaying them). If i use Zindex width increases and it doesn't look as neath, i also try line-width.
I did this approach for markers to be above plotlines but it doesnt work for plotlines above area. Am i doing something wrong?
componentDidRender() {
if(this.shadowRoot) {
var markers0 = this.shadowRoot.querySelector('.highcharts-markers.highcharts-series-0');
var plotLines0 = this.shadowRoot.querySelector('.highcharts-plot-lines-4');
var area0 = this.shadowRoot.querySelector('.highcharts-area-series');
/// plotlines below markers - works
if(plotLines0 && plotLines0.parentNode && markers0)
plotLines0.parentNode.insertBefore(markers0, plotLines0.nextSibling);
// markers below area - works
// markers0.parentNode.insertBefore(area0, markers0.nextSibling);
//area below plotlines- doesnt work
//if(area0 && area0.parentNode && plotLines0)
//area0.parentNode.insertBefore(plotLines0, area0.nextSibling);
if i run that code for area below plotlines nothing changes.

You can remove the second to last grid line by:
chart: {
events: {
load: function() {
var prevTick;
Highcharts.objectEach(this.yAxis[0].ticks, function(tick) {
if (tick.isLast) {
prevTick.gridLine.destroy();
}
prevTick = tick;
});
}
}
},
Live demo: http://jsfiddle.net/BlackLabel/obam5yxg/

Animate transition between values on amcharts svg bar graph

I have a bar chart I built using the 'amcharts' plugin.
The graph updates its values when the a dropdown menu item is selected,
I am trying to get the graph to animate the transition between the values when it changes, currently it either resets the whole animation and animates from '0', or if animateAgain() is commented out (line 142 in js) it jumps to the new value. This code is called after the values have been updated:
// Animate between values instead of resetting animation?
chart.animateAgain(); // Resets animation
chart.validateData(); // redraws the chart with new data
I've searched the docs and google but can't find anything to help with this, anyone have any ideas or pointers in the right direction? Is it possible? Here's the codepen :
http://codepen.io/bananafarma/pen/yewbJQ
Cheers!!

You can use amCharts' own Animate plugin.
It adds a new method to chart objects animateData().
function updateGraph() {
var newData = chart.dataProvider.slice();
if( document.getElementById('data-set').value == 1 ) {
newData[0].gain= 3.8;
newData[1].gain= 8.5;
newData[2].gain= 3;
newData[3].gain= 1.9;
}
else if ( document.getElementById('data-set').value == 2 ) {
console.log("yo");
newData[0].gain= 2.6;
newData[1].gain= 8.6;
newData[2].gain= 13.8;
newData[3].gain= 4;
}
else if ( document.getElementById('data-set').value == 3 ) {
newData[0].gain= 4.8;
newData[1].gain= 10.6;
newData[2].gain= 15.9;
newData[3].gain= 16;
}
// use Animate plugin
chart.animateData( newData, { duration: 1000 } );
}
Here's your updated working demo.

Highcharts series not updating when hidden with current live time

i am getting problem here is, when the highchart series is hidden the points not updating with its current live time but when it is not hidden(shown) it is updating data with its current live time currectly.
how can i updates the points with its current time when the series is hidden.
http://i.stack.imgur.com/H64Ky.png
please open the link and see the purple color line was hidden before and then i shown after some interval of time as you can see the purple color line points is not till at the end.
when i inspect element from the browser the hidden series was not updating.
Any idea???
$(document).on('click', '.SpeedCheckbox', function () {
var chart = $('#SpeedGraph').highcharts();
var series = chart.get(id);
if (series.visible) {
series.hide();
} else {
series.show();
}
});
function addpoints(){
for (var key in lineview.Signals) {
var signal = lineview.Signals[key];
var series = chart.get(signal.MachineId);
y = parseInt(signal.LatestValue);
var speedTrendData = series.data;
var lastTime = speedTrendData[speedTrendData.length - 1].x;
var x = new Date(lastTime + PageVariables.GraphRefreshRate()).getTime();
series.addPoint([x, y], true, true);
}
setInterval("addpoints()", 1000);

How to color Google Column Chart's every bar differently and keep them as it is

Though I have successfully colored the bars of google chart individually but not able to keep them when we hover mouse over it. It is getting reset back to blue(which is default).
Here is the jsfiddle of what I have done jsfiddle.
I tried to control the hover behaviour with multiple ways like below.
This I am keeping outside (document.ready) but inside script tag.
1)
$('#chart_div').hover(
function() {
$('#chart_client').hide(); // chart_client is another google chart div.
}, function() { // just for testing I was doing hide/show of that.
$('#chart_client').show();
}
);
2)
$("#chart_div").on({
mouseenter: function () {
$('#chart_client').hide();
},
mouseleave:function () {
$('#chart_client').show();
}
},'rect');
3)
google.visualization.events.addListener('#chart_div', 'ready', function () {
$('#chart_div rect').mouseover(function (e) {
alert('hello');
});
});
I must be doing something wrong, could you please tell me what and where.

I solved it using below code. Earlier I was trying to create charts using dynamically adding rows into chart(please visit my jsfiddle) but with this below approach I am first preparing data(converting dynamic to static) and adding that static data in to chart's 'arrayToDataTable' method.
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawUserKeywordChart);
function drawUserKeywordChart() {
var val = 'Tax:47;Finance:95;Awards:126;Bank:137;Debt:145;';
var length = val.length;
var array = [];
//preparing data
while(length>0){
var sepAt = val.indexOf(";");
var value = parseInt(val.substring(val.indexOf(":")+1, sepAt));
array.push(val.substring(0, val.indexOf(":")));
array.push(value);
val = val.substring(val.indexOf(";")+1, length);
length = val.length;
}
var data = google.visualization.arrayToDataTable([
['Keyword', 'Occurences', { role: 'style' }],
[array[0], array[1], '#8AA3B3'],
[array[2], array[3], '#A9B089'],
[array[4], array[5], '#848C49'],
[array[6], array[7], '#44464A'],
[array[8], array[9], '#704610'],
]);
var options = {
title: 'Keyword Matches',
width: 660,
height: 450,
titleTextStyle:{bold:true,fontSize:20},
legend:{position:'none'}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_keyword1'));
chart.draw(data, options);
}
Please advice if you find anything wrong here or you have better approach than this.

Automatically scroll down a table using google chart

Instead of having the whole window that scrolled (found on the web):
function pageScroll() {
window.scrollBy(0,50); // horizontal and vertical scroll increments
scrolldelay = setTimeout('pageScroll()',100); // scrolls every 100 milliseconds
}
than in the HTML code
<body onLoad="pageScroll()">
,
I would rather want only my table to jump/scroll down until the last row.
Do I need to create a new method for the google table?
Thx

If your table has a fixed height set in options and is large enough to enable scrolling, then you need to do something similar to scroll the scrollable portion of the table:
var myTable = new google.visualization.Table(document.querySelector('#table_div'));
function scrollTable () {
var el = document.querySelector('#table_div > div > div:first-child');
if (el) {
el.scrollTop = el.scrollTop + 50;
if (el.scrollTop + el.offsetHeight < el.scrollHeight) {
setTimeout(scrollTable, 100);
}
}
}
google.visualization.events.addListener(myTable, 'ready', scrollTable);
myTable.draw(data, options);