We Keep Coding

google chart with multiple dates

I have multiple collections of data I want to display in a single google chart. Each series is a collection of CPM's with a date:
for instance:
series A[
'2016-09-01' => 2.08023,
'2016-09-04' => 2.01123
];
series B[
'2016-09-01' => 1.99324,
'2016-09-02' => 2.00112
];
Note that the dates in the two series are not the same. I want to draw these two graphs in a single google graph. How should I format the data rows (if this is possible at all).
I have made a JSFiddle with what I thought would be a way to go, but adding a null in the data table doesn't work, I get two dots for the first series where I'm expecting a line. How can I make google chart draw the line instead of the dots?

in the fiddle, the data is setup correctly
however, since there is a null value is Series A due to the different dates
need to use configuration option interpolateNulls: true
from the documentation...
interpolateNulls
Whether to guess the value of missing points. If true, it will guess the value of any missing data based on neighboring points. If false, it will leave a break in the line at the unknown point.
see following working snippet...
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'X');
data.addColumn('number', 'series a');
data.addColumn('number', 'series b')
data.addRows([
[new Date( 1472688000000 ), 2.08023, 1.99324],
[new Date( 1472774400000 ), null, 2.00112],
[new Date( 1472947200000 ), 2.01123, null]
]);
var options = {
interpolateNulls: true
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.LineChart(container);
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How can I show specific years in Google Timeline Chart?

Using react-google-charts, I would like to specify which years should be displayed on the horizontal axis of a Google Timeline Chart. The screenshot shows an example that uses automatically generated values, based on the given time range of the rows.
The example uses the following data:
[
[ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ 'Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ 'Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]
]
I already tried the following options with no joy:
hAxis: {
title: 'Year',
minValue: new Date(1785, 3, 15),
maxValue: new Date(1825, 3, 15),
ticks: [
{ v: new Date(1792, 3, 15), f: '1792' },
{ v: new Date(1818, 3, 15), f: '1818' },
{ v: new Date(1824, 3, 15), f: '1824' }
]
}
I would expect to have the x-Axis labelled with "Years" and showing 1792, 1818 and 1824 instead of 1790 and 1800.
The minValue and maxValue options seem to get ignored, too.
According to the readme it should be working.
Is the problem related to the value being date-objects instead of integers?
Edit: Added a jsfiddle: http://jsfiddle.net/s4zg7mxt/
It is not using react-google-charts, but the problem remains the same: ticks (and title) options still have no effect. Interestingly, the minValue and maxValue options are taken into account though.
Is it possible at all to adapt the jsfiddle, in order to show the specified years on the horizontal axis?

i've found if the configuration option, or other feature, isn't listed on the guide for that particular chart,
the chart doesn't support it.
except for options added in more recent releases,
in which the guide for that chart hasn't been updated.
as such, the only hAxis options available on a Timeline chart are minValue and maxValue
made available with the October 2, 2015 release
Timeline:
-- Durations are now localized.
-- Now supports minValue and maxValue for the horizontal axis.

The library automatically calculates the scaling of x-axis based on the start date, end date and browser's display area.
Please paste full code, will check and update you whether it is possible to do the custom scaling of the x-axis.

Colors doesn't change using Highcharts.setOptions

I have a page displaying multiple charts. I set the theme to be used for all charts according to the code below:
Highcharts.theme = {
colors: ["#E37B25", "F5BF36", "#7C1C1D", "#458744", "#3E7FA3", "#0C9BD7", "#265667"],
...
}
Highcharts.setOptions(Highcharts.theme);
I then have a bunch of specific options for each chart and create the charts in a set interval.
var chart;
chart = new Highcharts.Chart(chartOptions);
The problem is that every time a chart is created it has the first color in the array, instead of rotating through them. I thought setOptions() would manage this for each chart but apparently it doesn't. How can this be done so every time i create a new chart using new Highcharts.Chart(chartOptions) it selects the next color in the array?

As #wegeld commented, colors in the array are given as list option which are used by series elements of the chart rather than charts in successive manner.
But if that is the requirement, you can create a colorIterator and do following. I have create a codepen example for you here: https://codepen.io/mikhilraj/pen/KrjzxN/
var colorIterator = 0;
function getColor() {
var color = Highcharts.getOptions().colors[colorIterator%Highcharts.getOptions().colors.length];
colorIterator++;
return color;
};
And add following in as options while creating the chart.
series: [{
name: 'John',
data: [0, 1, 4, 4, 5, 2, 3, 7],
fillColor: getColor()
}]

Create date histogram chart with google histogram

How to create Google Histogram Chart [1] that works with dates?
I've placed sample code (with working number and non-working date examples): http://jsfiddle.net/Qquse/417/ and code below [2]
[1] https://developers.google.com/chart/interactive/docs/gallery/histogram
[2]
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function str_to_utcdate(d) {
return new Date(d.substr(0, 4), d.substr(5, 2) - 1, d.substr(9, 2));
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['item', 'date'],
['a', str_to_utcdate('2001-07-01')],
['b', str_to_utcdate('2001-07-01')],
['c', str_to_utcdate('2001-07-01')], ]);
var chart = new google.visualization.Histogram(document.getElementById('chart_div1'));
chart.draw(data);
var data = google.visualization.arrayToDataTable([
['item', 'date'],
['a', 10],
['b', 20],
['c', 30], ]);
var chart = new google.visualization.Histogram(document.getElementById('chart_div2'));
chart.draw(data);
}

5 years now and Histograms still don't support dates. Since I ain't got time and I need my stuff done, I made a workaround (so ugly it hurts) but works.
First, I defined a format just to put a keyword at the start of each label. In my case, since I have only one chart in my page, I just used the keyword 'date'.
const keyword = 'date';
const options = {
// ...
hAxis: {
format: `'${keyword}'#`
},
}
If you have multiple charts in your page and you want them to behave differently, you might want to define different keyword to each one.
Now, using query selector, I selected all the label elements that are of my interest
let labels = Array.from(document.querySelectorAll('#chart svg g:nth-of-type(3) g:nth-of-type(3) g text'));
In my case, my chart was set in a DIV with id 'chart'. If you're using any other id, just replace #chart with your id;
Then I will filter only the labels which start with my keyword 'date'
labels = labels.filter(g => g.innerHTML.startsWith(keyword));
With that, I replace the innerHTML of each element to the date format I wish.
labels.forEach(g => {
const date = new Date(+g.substring(keyword.length));
// you can apply any format method you wish
// .toLocaleDateString()
g.innerHTML = date.toLocaleDateString();
// moment.js
g.innerHTML = moment(date).format('DD/MM/YYYY HH:MM');
});
Also, I'm using interactive charts, so the labels refresh on each user interaction. Therefore, I put everything inside an interval, and the final result is as follows:
const keyword = 'date';
const options = {
// ...
hAxis: {
format: `'${keyword}'#`
},
}
// ... chart setup
setInterval(() => {
let labels = Array.from(document.querySelectorAll('#chart svg g:nth-of-type(3) g:nth-of-type(3) g text'));
labels = labels.filter(g => g.innerHTML.startsWith(keyword));
labels.forEach(g => {
const date = new Date(+g.substring(keyword.length));
g.innerHTML = date.toLocaleDateString();
});
}, 100);
Use this answer with caution. Using query selectors to modify third party generated content is very unsafe because it relies on the hope that the third-party developers won't modify the way the content is generated.

Try out this column chart:
public histogramChart: GoogleChartInterface = {
chartType: 'ColumnChart',
dataTable: [
['Date', 'Number'],
[new Date(2015, 1, 1), 5],
[new Date(2015, 1, 2), 5.1],
[new Date(2015, 1, 3), 6.2],
[new Date(2015, 1, 4), 7]
];,
//opt_firstRowIsData: true,
options: {
title: 'Shooting history',
legend: { position: 'none' },
colors: ['#4285F4'],
},
};

Annotated Timeline Flickers and Re-Zooms

I have an Annotated Timeline that I would like to update in realtime (similar to how Google Finance does it). However, I am having trouble getting the chart to not flicker and not re-zoom when data is added.
I couldn't get the code to work in JSFiddle (I think because annotated timeline is flash based?) but here is some basic code that you can plug in to Google's Visualization Playground. You can see a saved example here but unfortunately can't modify the code, you'll have to go to the playground to do that.
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'My Data');
data.addRows([
[new Date(2009, 1 ,1), 30000],
[new Date(2009, 1 ,2), 14045],
[new Date(2009, 1 ,3), 55022],
[new Date(2009, 1 ,4), 75284],
[new Date(2009, 1 ,5), 41476],
[new Date(2009, 1 ,6), 33322]
]);
var annotatedtimeline = new google.visualization.AnnotatedTimeLine(
document.getElementById('visualization'));
var options = {
'allowRedraw' : true ,
'displayAnnotations' : true,
'zoomStartTime': new Date(2009, 1 ,2),
'zoomEndTime': new Date(2009, 1 ,10)
};
annotatedtimeline.draw(data, options);
// let's add some more data in 3 seconds
setTimeout(function() {
again(annotatedtimeline, data, options);
}, 3000);
}
function again(timeline, data, options) {
data.addRow([new Date(2009, 1 ,7), 30000]);
timeline.draw(data, options);
}
google.setOnLoadCallback(drawVisualization);​
What's weird is that I get pretty different flicker behavior depending on how I set displayAnnotations
displayAnnotations = true : Chart flickers but does not re-zoom
displayAnnotations = false : No chart flicker but it re-zooms to the new data (try it on the playground to see)
Setting allowRedraw = false causes the chart to flicker regardless. Any idea how to get no flicker and no re-zoom?

From the docs:
allowRedraw must be true
displayAnnotations must be false (that is, you cannot show annotations)
That's your problem.