We Keep Coding

Change border/background in Google Charts AnnotationChart?

I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?
Without chart option
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
};
chart.draw(data, options);
With:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: {
fill:'black',
stroke: 'white',
strokeSize: 1
},
chartArea: {
backgroundColor: {
fill: 'blue',
stroke: 'red',
strokeSize: 1
}
}
}
};
chart.draw(data, options);
Either way, graph looks like this:

The background color can be set using it like this. Read the documentation here
Edit your code like this
var options = {
displayAnnotations: true,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: 'blue',
chartArea: {
backgroundColor: '#FFF000',
},
},
fill: 50,
};
I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.
Working JSFIDDLE

I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.
I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.
Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!
Annotation Chart Fiddle
My Related SO Question
/* One time recoloring of background after SVG creation - for static charts */
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */
var observer = new MutationObserver(function(mutations) {
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
});

OpenLayers 3 show different highlight style based on layer type

I have a map with two layers. One layers display points (circles) and another layer display an icon on the map.
I would like two have to highlight styles so that when then user clicks on a feature it shows the correct highlight style based on the layer type.
Right now I have created two highlight styles. I also have a 'select' event which selects the feature clicked. When I click on a new feature the "old" feature does not remove the highlight style.
So far I have this:
var highlightOne = function () {
var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 5;
return [new ol.style.Style({
image: new ol.style.Circle({
radius: scaleRadius,
fill: new ol.style.Fill({
color: '#fff'
}),
stroke: new ol.style.Stroke({
color: '#658acf',
width: 2
})
}),
zIndex: 1
})]
}
var highlightTwo = function () {
var scaleRadius = map.getView().getZoom() >= 7 ? 15 : 15;
return [new ol.style.Style({
image: new ol.style.RegularShape({
radius: scaleRadius,
points: 4,
rotation: 0.8,
rotateWithView: true,
fill: new ol.style.Fill({
color: '#fff'
}),
stroke: new ol.style.Stroke({
color: '#658acf',
width: 2
})
}),
zIndex: 1
})]
}
var selectInteraction = new ol.interaction.Select({
condition: ol.events.condition.singleClick,
style: highlightStyle
});
selectInteraction.on('select', function (e) {
var selected = e.selected,
deselected = e.deselected;
if (selected.length) // Selected feature
{
selected.forEach(function (feature) {
// Get the layer name to apply custom highlight style
if (feature.getLayer().get('name') == "layerone")
{
feature.setStyle(highlightTwo)
} else {
feature.setStyle(highlightOne)
}
})
} else {
deselected.forEach(function (feature) {
// Remove highlight from the other features
feature.setStyle(null)
})
}
});

In general, you want to avoid setting the styles on the features when setting a temporary display style (as you do with the select interaction). Setting style functions on layers or interactions are not only more memory efficient, it's also takes any responsability of unsetting the style from you.
I would suggest that you look at a solution like
var selectInteraction = new ol.interaction.Select({
condition: ol.events.condition.singleClick,
style: function(feature, resolution){
if (feature.getLayer().get('name') == "layerone") {
return highlightTwo()
} else {
return highlightOne()
}
}
});
As a side note, I would suggest using the resolution parameter to the style function rather than polling the map for the current zoom level. When setting a style on the feature with a radius based on the current zoom level, the style will not update when zooming in or out.

How to dynamically move Vector Features in OpenLayers 3

Based from an example given here: http://openlayers.org/en/vector-api/examples/dynamic-data.html?q=dynamic
Instead of using circle:
var imageStyle = new ol.style.Circle({
radius: 5,
fill: new ol.style.Fill({color: 'yellow'}),
stroke: new ol.style.Stroke({color: 'red', width: 1})
});
I want to use Vector Feature (Marker) as the object which is moving instead of using that yellow circle.
An example of using a feature vector is found here:
how to add markers with OpenLayers 3
Sorry, just a beginner in OpenLayers 3. Hope someone can help me. Thanks!

I've made you a basic example.
The idea is: You move an Overlay through a path using an interval to change its position like:
//fire the animation
map.once('postcompose', function(event) {
interval = setInterval(animation, 500);
});
var i = 0, interval;
var animation = function(){
if(i == path.length){
i = 0;
}
marker.setPosition(path[i]);
i++;
};

Dojo StackedColumn tooltips

When I create a StackedColumns graph in dojo, the default tooltips show the cumulative value. I would like to show the individual value (or possibly both).
In my experience, when I have a series with first value: 2, and another with first value: 5, the tooltip shows 7 when hovering over the second series. I would like it to still show 5 (or possibly "value: 5, cumulative value: 7").
I found the following Q&A very useful. Phillipes jsFiddle example worked for the StackedArea, but I was unable to get it to work on StackedColumns.
Dojo StackedAreas chart doesn't accept objects as values
Appreciate any help.
Here is my code:
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default", "dojox/charting/plot2d/StackedColumns", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight", "dojox/charting/action2d/Magnify", "dojox/charting/widget/SelectableLegend", "dojo/ready"],
function(Chart, Default, StackedColumns, Tooltip, Highlight, Magnify, SelectableLegend, ready){
ready(function(){
var chart1 = new dojox.charting.Chart("chart1");
chart1.addPlot("default",{type: "StackedColumns", gap: 2});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true, includeZero: true});
chart1.addSeries("A", [2,3,5,7,2,4,6], {plot: "default", fill: "blue", stroke: {color: "blue"}});
chart1.addSeries("C", [5,4,2,7,5,3,1], {plot: "default", fill: "green", stroke: {color: "green"}});
var tooltip = new Tooltip( chart1, "default", {
text : function(point) {
console.debug(point);
return "This is " + point.y;
}
});
chart1.render();
var clusteredColumnsLegend = new SelectableLegend({chart: chart1}, "chart1Legend");
});
});
I have created a new jsFiddle # http://jsfiddle.net/Tony_D/CqNhB/5/

This could maybe be considered as a bug, that said it is very easy to workaround just change your tooltip function by:
var tooltip = new Tooltip( chart1, "default", {
text : function(point) {
console.debug(point);
return "This is " + point.run.data[point.index];
}
});

Update gRaphael line chart column values

I have a gRaphael line chart which I update on click using the below function, the problem I have is that when I try to set the column values, it does not take effect. Like so...
var iniGraph = Raphael("graph"),
chart = iniGraph.linechart(
0,5,
$('#graph').width(),$('#graph').height(),
xVals,yVals,
{ nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
).hoverColumn(function(){
// AFTER UPDATE THESE VALUES STILL REMAIN UNCHANGED
console.log(this.values[0]+" | "+this.values[1]);
},function(){
// do nothing
});
function animateChart(graph,curChart,newX,newY)
{
// generate the new chart
var newChart = graph.linechart(
0,5,
$('#graph').width(),$('#graph').height(),
newX,
newY,
{ nostroke: false, symbol: ["circle",""], width: 1.5, smooth: true, shade: true, colors: ['#008cc2', '#7500c6'] }
);
// THIS DOES NOT WORK, THE ORIGINAL VALUES REMAIN AFTER UPDATE
curChart.eachColumn(function(){
this.values[0] = 12341234;
this.values[1] = 12341234;
});
// animate the symbols
$.each(curChart.symbols[0],function(i,symbol){
symbol.animate({ cx: newChart.symbols[0][i].attr("cx"),cy: newChart.symbols[0][i].attr("cy") }, 200);
});
// animate the lines
$.each(curChart.lines,function(i,line){
line.animate({ path: newChart.lines[i].attr("path") }, 200);
});
// remove the new chart
newChart.remove();
}
I create an initial graph and create the line chart, I then use the animateChart function to animate/update the line chart to it's new values, the problem I am running into is that on hover, the values remain unchanged after the animateChart function has run, so I am stuck with the initial values of the chart, which is not ideal, as I have to get the column values to update to the new values I specify.
So basically, how can I update the column values when I animate/update the line chart?
I'm kinda at the end of my rope... thanks.