I have Google Charts set up with the hAxis as a timeline. My client wants to display the time in 24 hour time, with the GMT offset printed along side, and the date. My code is pretty simple, but the "GMT" label is generating an interesting side effect.
Here's my format code: "format": 'H:MM '+' GMT'+$scope.offset.toString()+'\r\n MM/dd/yyyy' but the result is:
6:03 AD3T+7
03/21/2016
AD3T from "GMT", which is probably the result of passing G (to get AD?) and M to get the month (3), and the T apparently has no effect.
My question is, in the Google Charts JSON object, how can I format the time stamp to have a human-readable label of "GMT" and the offset? Do I need to escape "GMT"? If so, how?
There are a couple different ways to apply formatting, easiest being hAxis.format
it follows the ICU pattern set
See table under Detailed Description for all the patterns available.
I think this may get you close, including the offset.
'H:MM ZZZZ \r\n MM/dd/yyyy'
You can also provide your own tick marks.
Which means you can apply your own custom format generated in JavaScript.
The following example assumes this formatting has already occurred.
Provide the typical object google accepts for a column value in an array
one for each tick mark you need displayed
{v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}
Following are two examples, one using hAxis.format, the other ticks ...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = [
['Date', 'Value'], //provide custom formatting
[ {v: new Date(2013, 4, 4, 1, 3, 0, 0), f: '1:05 GMT-04:00 \r\n 05/04/2013'}, 38177],
[ {v: new Date(2013, 4, 5, 3, 6, 0, 0), f: '3:05 GMT-04:00 \r\n 05/05/2013'}, 38705],
[ {v: new Date(2013, 4, 12, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/12/2013'}, 38210],
[ {v: new Date(2013, 4, 13, 4, 8, 0, 0), f: '4:05 GMT-04:00 \r\n 05/13/2013'}, 38029],
[ {v: new Date(2013, 4, 19, 8, 9, 0, 0), f: '8:05 GMT-04:00 \r\n 05/19/2013'}, 38823],
[ {v: new Date(2013, 4, 23, 2, 4, 0, 0), f: '2:05 GMT-04:00 \r\n 05/23/2013'}, 38345],
[ {v: new Date(2013, 4, 24, 1, 1, 0, 0), f: '1:05 GMT-04:00 \r\n 05/24/2013'}, 38436],
[ {v: new Date(2013, 4, 30, 6, 8, 0, 0), f: '6:05 GMT-04:00 \r\n 05/30/2013'}, 38447]
];
var tickMarks = [];
for (var i = 1; i < data.length; i++) {
tickMarks.push(data[i][0]);
i = i + 1;
}
tickMarks.push(data[data.length - 1][0]);
var optionsA = {
hAxis: {
format: 'H:MM ZZZZ \r\n MM/dd/yyyy',
},
legend: 'none',
pointSize: 5
};
var optionsB = {
hAxis: {
ticks: tickMarks
},
legend: 'none',
pointSize: 5
};
var chartA = new google.visualization.LineChart(document.getElementById('chart_divA'));
chartA.draw(google.visualization.arrayToDataTable(data), optionsA);
var chartB = new google.visualization.LineChart(document.getElementById('chart_divB'));
chartB.draw(google.visualization.arrayToDataTable(data), optionsB);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_divA"></div>
<div id="chart_divB"></div>
Related
I have this Google chart and I cannot get the lower part (where date and time is) to show hours from 00 to 23, it always shows it with AM/PM.
I mean the area that is always visible, the other value that apepars on tooltip was formated OK, but not that lower part.
What am I doing wrong ?
I tried by that dateformatter code (it only seems to affect the tooltip date value).
And by this (not doing anything):
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
The jsfiddle
<script>
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
[new Date(2020, 11, 04, 15, 30), 25.60, 62.38],
[new Date(2020, 11, 04, 15, 40), 25.62, 62.16],
[new Date(2020, 11, 04, 15, 50), 25.60, 62.00],
[new Date(2020, 11, 04, 16, 00), 25.60, 61.79],
[new Date(2020, 11, 04, 16, 10), 25.77, 61.72],
[new Date(2020, 11, 04, 16, 20), 25.97, 60.93],
[new Date(2020, 11, 04, 16, 30), 26.07, 60.38],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({pattern: 'dd/MM/yyyy HH:mm'});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {count: 15}
},
legend: {position: 'none'},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temp'},
1: {axis: 'Humidity'},
},
axes: {
y: {
Temp: {label: 'Temps (Celsius)', range: {max: 15, min: 40 }},
Humidity: {label: 'Humidity (%)', /*range: {max: 30, min: 90 }*/},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, materialOptions);
}
drawMaterialChart();
}
</script>
when drawing a material chart,
need to convert the options using static method --> google.charts.Line.convertOptions
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
this will ensure the supported options are included properly,
see following working snippet...
google.charts.load('current', {
'packages': ['line', 'corechart']
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('datetime');
data.addColumn('number', "Temp");
data.addColumn('number', "Humidity");
data.addRows([
[new Date(2020, 11, 04, 15, 00), 25.50, 62.76],
[new Date(2020, 11, 04, 15, 10), 25.58, 62.63],
[new Date(2020, 11, 04, 15, 20), 25.60, 62.47],
]);
// give date a certain format
var dateFormatter = new google.visualization.DateFormat({
pattern: 'dd/MM/yyyy HH:mm'
});
dateFormatter.format(data, 0);
var materialOptions = {
// trying to format date/time on lower line, not working :/
hAxis: {
format: 'dd/MM/yyyy HH:mm',
gridlines: {
count: 15
}
},
legend: {
position: 'none'
},
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {
axis: 'Temp'
},
1: {
axis: 'Humidity'
},
},
axes: {
y: {
Temp: {
label: 'Temps (Celsius)',
range: {
max: 15,
min: 40
}
},
Humidity: {
label: 'Humidity (%)',
range: {max: 30, min: 90 }
},
},
},
colors: ['#B00000', '#1bdec4']
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
}
drawMaterialChart();
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
note: there are several options that are not supported by material charts,
see Tracking Issue for Material Chart Feature Parity
i am working on a area charts.
http://jsfiddle.net/b8eoszt0/
my example is a bit complex or different from the ones we usually see.
for the data structure, i have 4 weeks aggregated data for each month
eg: Sep1-7: 0, Sep8-15: 20 and so on.
the chart works fine, it displays all data points (5 points each month)
However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
opposite: true,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
week: '%b %e',
month: '%b'
},
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0
},
series:[
{
showInLegend: false,
data: [
[Date.UTC(2015, 8, 1), 0],
[Date.UTC(2015, 8, 8), 30],
[Date.UTC(2015, 8, 15), 20],
[Date.UTC(2015, 8, 22), 50],
[Date.UTC(2015, 8, 29), 20],
[Date.UTC(2015, 9, 1), 0],
[Date.UTC(2015, 9, 8), 30],
[Date.UTC(2015, 9, 15), 20],
[Date.UTC(2015, 9, 22), 50],
[Date.UTC(2015, 9, 29), 20],
[Date.UTC(2015, 10, 1), 0],
[Date.UTC(2015, 10, 8), 30],
[Date.UTC(2015, 10, 15), 20],
[Date.UTC(2015, 10, 22), 50],
[Date.UTC(2015, 10, 29), 20],
[Date.UTC(2015, 11, 1), 0],
[Date.UTC(2015, 11, 8), 30],
[Date.UTC(2015, 11, 15), 20],
[Date.UTC(2015, 11, 22), 50],
[Date.UTC(2015, 11, 29), 20],
[Date.UTC(2016, 0, 1), 0],
[Date.UTC(2016, 0, 8), 30],
[Date.UTC(2016, 0, 15), 20],
[Date.UTC(2016, 0, 22), 50],
[Date.UTC(2016, 0, 29), 20],
]
}
],
});
});
i have tried pointinterval, but it doesn't allow Month.
i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.
You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.
type: 'datetime',
units: [
[
'month', [1, 3, 6]
]
]
The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.
You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/
tickPositioner: function(min, max) {
var ticks = this.tickPositions, // original ticks
newTicks = [], // container for a new ticks
start = new Date(ticks[0]); // first tick
// render tick in a first day of the month
start.setDate(1);
// add labels, one for every month:
while (min <= max) {
start.setMonth(start.getMonth() + 1);
min = start.getTime();
newTicks.push(min);
}
// store original info of labels:
newTicks.info = ticks.info;
return newTicks;
},
My fiddle : https://jsfiddle.net/vbdy7fLe/1/
I'm trying to use google column chart and display multiple fields of data and by date. But I'm not sure why it doesn't display 02 Jan 2015 and 04 Jan 2015.
The data is there and here is my js code :
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['date', 'person A', 'person B'],
[new Date(2015, 0, 1), 1, 4, ],
[new Date(2015, 0, 2), 1, 4, ],
[new Date(2015, 0, 3), 6, 11, ],
[new Date(2015, 0, 4), 10, 5, ],
[new Date(2015, 0, 5), 10, 5, ]
]);
var options = {
chart: {
title: 'Meeting by weeks'
},
bars: 'vertical',
height: 400,
colors: ['#3498db', '#9b59b6', '#16a085'],
hAxis: {
format: 'dd MMM yyyy'
}
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
It's not showing because googles function to draw the chart has decided that there is not enough space to write text on every single column.
Either try the setting for hAxis.slantedTextor try making your chart wider.
i would like a suggest...
i have Time series charts (without event to zoom it), my data is this:
data: [
[Date.UTC(2013, 5, 14), 0.7695],
[Date.UTC(2013, 5, 21), 0.7574],
[Date.UTC(2013, 5, 28), 0.7480],
[Date.UTC(2013, 6, 5), 0.7685],
[Date.UTC(2013, 6, 12), 0.7744],
[Date.UTC(2013, 6, 19), 0.7652],
[Date.UTC(2013, 6, 26), 0.7609],
[Date.UTC(2013, 7, 2), 0.7526],
[Date.UTC(2013, 7, 9), 0.7542],
[Date.UTC(2013, 7, 16), 0.7540],
[Date.UTC(2013, 7, 23), 0.7487],
[Date.UTC(2013, 7, 30), 0.7562],
[Date.UTC(2013, 8, 6), 0.7591],
[Date.UTC(2013, 8, 13), 0.7486],
[Date.UTC(2013, 8, 20), 0.7411],
[Date.UTC(2013, 8, 27), 0.7393]
]
These are the starts of weeks.
i enabled scrollbar of x-axis in my chart and i set range:
xAxis: {
type: 'datetime',
range: 28 * (24 * 3600000) // 4 weeks
},
in this way when the chart is ready, it show me last 4 week (and if i want to see other data, i will use the scrollbar)...
The problem is that the values of x-axis aren't my data :/
How i can to do ?
http://jsfiddle.net/k4ayprz4/
Besides i will insert a button under the chart with event onclick() that will reload the chart but with a new range
xAxis: {
type: 'datetime',
range: 3*(30 * (24 * 3600000)) // 3 months
},
the problem is that the values of x-axis in this case they should be names of months :/
Exist a way to do this ?
Thanks!
EDIT: I corrected the link jsfiddle and the array
I want to make a chart that showing data with 4 month interval (3 period/year).
and i want the x-axis label showing the year and the period like image below:
http://i.stack.imgur.com/eerSy.png
what i've done so far :
var data = [[1262278800000,87.5],[1293814800000,750],[1325350800000,100],[1356973200000,25],[1371229200000,87.5],[1388422800000,0],[1388509200000,375],[1402765200000,100],[1419958800000,1000]];
var tahunsekarang=new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: { mode: "time",tickSize: [4, "month"] , timeformat: "%Y",panRange: [1262217600000, tahunsekarang]},
yaxis: {panRange: [0, 1500] },
pan: { interactive: true},
series: {lines: {show: true},points: {show: true}},
});
but since I made it pan: { interactive: true} so when i drag the chart, the tickline is always change value, it made the chartline not fit in the tick line
1) If you want fixed ticks when you drag the chart you have to give a fixed ticks array instead of the tickSize option.
2) To give the Roman number for the trimester you can use a tickFormatter function instead of the timeformat option.
New options object:
xaxis: {
mode: "time",
ticks: ticks,
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
See the code snippet below (or this fiddle) for a working example:
var data = [
[1262278800000, 87.5],
[1293814800000, 750],
[1325350800000, 100],
[1356973200000, 25],
[1371229200000, 87.5],
[1388422800000, 0],
[1388509200000, 375],
[1402765200000, 100],
[1419958800000, 1000]
];
var ticks = [
new Date(2010, 0, 1).valueOf(),
new Date(2010, 4, 1).valueOf(),
new Date(2010, 8, 1).valueOf(),
new Date(2011, 0, 1).valueOf(),
new Date(2011, 4, 1).valueOf(),
new Date(2011, 8, 1).valueOf(),
new Date(2012, 0, 1).valueOf(),
new Date(2012, 4, 1).valueOf(),
new Date(2012, 8, 1).valueOf(),
new Date(2013, 0, 1).valueOf(),
new Date(2013, 4, 1).valueOf(),
new Date(2013, 8, 1).valueOf(),
new Date(2014, 0, 1).valueOf(),
new Date(2014, 4, 1).valueOf(),
new Date(2014, 8, 1).valueOf(),
new Date(2015, 0, 1).valueOf(),
new Date(2015, 4, 1).valueOf(),
new Date(2015, 8, 1).valueOf(),
];
var tahunsekarang = new Date(2015, 12, 31).getTime();
$.plot("#chartTabamaProduktifitas", [data], {
xaxis: {
mode: "time",
//tickSize: [4, "month"],
ticks: ticks,
//timeformat: "%Y",
tickFormatter: function (val, axis) {
var d = new Date(val);
var trimester = '';
for (var i = 1; i <= (1 + d.getMonth() / 4); i++){
trimester += "I";
};
return trimester + "<br>" + d.getFullYear();
},
panRange: [1262217600000, tahunsekarang]
},
yaxis: {
panRange: [0, 1500]
},
pan: {
interactive: true
},
series: {
lines: {
show: true
},
points: {
show: true
}
},
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.navigate.min.js"></script>
<div style="height: 400px; width: 600px;" id="chartTabamaProduktifitas"></div>