Google Charts API custom month names - javascript

I need to set custom month names in Charts.
How set custom month names in Google Charts API?


You can specify custom ticks on the hAxis...
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of Day');
data.addColumn('number', 'Rating');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRows([
[new Date(2015, 1, 1), 5, 'January'],
[new Date(2015, 2, 1), 7, 'February'],
[new Date(2015, 3, 1), 3, 'March'],
[new Date(2015, 4, 1), 2, 'April'],
[new Date(2015, 5, 1), 2, 'May']
]);
var options = {
width: 900,
height: 500,
hAxis: {
format: 'MMM',
gridlines: {count: 5},
ticks: [
{v: new Date(2015, 1, 1), f:'custom 1'},
{v: new Date(2015, 2, 1), f:'custom 2'},
{v: new Date(2015, 3, 1), f:'custom 3'},
{v: new Date(2015, 4, 1), f:'custom 4'},
{v: new Date(2015, 5, 1), f:'custom 5'}
]
},
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>

Related

google charts gantt can't get critical path or axis to show up

I am trying to follow along with examples here:
https://developers.google.com/chart/interactive/docs/gallery/ganttchart
My code looks like this:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['5efbce41802562e233e21b9e',
'Demolition' ,
new Date(2020, 5, 8),
new Date(2020, 6, 24),
null,
100,
''],
['5efbd34a802562e233e21bda',
'Sealing, Flooring' ,
new Date(2020, 6, 27),
new Date(2020, 7, 5),
null,
100,
'5efbce41802562e233e21b9e'],
['5efbd390802562e233e21be6',
'Concrete Work' ,
new Date(2020, 7, 10),
new Date(2020, 7, 14),
null,
100,
'5efbd34a802562e233e21bda'],
['5efbd55e802562e233e21c3c',
'HVAC' ,
new Date(2020, 7, 18),
new Date(2020, 7, 28),
null,
100,
'5efbce41802562e233e21b9e'],
['5efbd55e802562e233e21c43',
'Fire Protection' ,
new Date(2020, 8, 1),
new Date(2020, 8, 11),
null,
100,
'5efbd55e802562e233e21c3c'],
['5efbd55e802562e233e21c4a',
'Framing and Drywalling' ,
new Date(2020, 8, 13),
new Date(2020, 8, 25),
null,
100,
'5efbd55e802562e233e21c3c,5efbd55e802562e233e21c43,5efbd55e802562e233e21c51'],
['5efbd55e802562e233e21c51',
'Electrical Upgrade' ,
new Date(2020, 8, 2),
new Date(2020, 8, 11),
null,
100,
''],
['5efbd55e802562e233e21c58',
'Flooring' ,
new Date(2020, 9, 5),
new Date(2020, 9, 16),
null,
100,
'5efbd390802562e233e21be6'],
['5efbd55e802562e233e21c5f',
'Inspection and Remediation' ,
new Date(2020, 9, 19),
new Date(2020, 9, 30),
null,
100,
'5efbd55e802562e233e21c4a'],
]);
var trackHeight = 40;
var options = {
height: data.getNumberOfRows() * trackHeight + 200,
width: 1024,
gantt: {
criticalPathEnabled: true,
criticalPathStyle: {
stroke: '#e64a19',
strokeWidth: 5
}
};
var chart = new google.visualization.Gantt(document.getElementById('gantt_5efbc530802562d3f4760a1f'));
chart.draw(data, options);
}
But my graph looks like this:
I don't see the axis (legend) as in the example, and i don't see the critical path. Any ideas?
Thanks,
kevin

Group bar colors of google chart timeline by ID

I'm trying to group the colors of the bar in google timeline according to the ID. I can't figure out why it mostly works. Here's an image of what it looks like.
The image is suppose to label tests in green like this:
Here's my code:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var container = document.getElementById('bed-trace-svg-insert');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
var i, rows=[],curr_row, start_utcDate, start_local_date,
end_utcDate, end_local_date;
dataTable.addColumn({ type: 'string', id: 'Group' });
dataTable.addColumn({ type: 'string', id: 'Category' });
dataTable.addColumn({ type: 'string', id: 'ID' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
// dataTable.addRows(rows);
dataTable.addRows([
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'test', '', new Date(2016, 8, 1), new Date(2016, 8, 2) ]
]);
var color_array = [];
var colorMap =
{
// should contain a map of category -> color for every category
HO: '#e63b6f', // pink
test:'#32a852', // green
LTCO: '#592df7', // purple
OPT: '#2dbef7', // blue
}
for (i = 0; i < dataTable.getNumberOfRows(); i++)
{
color_array.push(colorMap[dataTable.getValue(i, 1)]);
}
var rowHeight = 41;
var chartHeight = (dataTable.getNumberOfRows() + 1) * rowHeight;
var options =
{
timeline:
{
groupByRowLabel: true,
rowLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14,
color: '#333333'
},
barLabelStyle:
{
fontName: 'Roboto Condensed',
fontSize: 14
}
},
avoidOverlappingGridLines: true,
height: chartHeight,
width: '100%',
colors: color_array
};
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4]);
chart.draw(view, options);
}
</script>
<div id='bed-trace-svg-insert'></div>
The color_array array is correct:
["#e63b6f", "#592df7", "#e63b6f", "#592df7", "#32a852"]
I'm unsure why my colors change when the chart is drawn. Any ideas?
It might be related to the order because if I switch the order to:
dataTable.addRows([
[ 'M2016019706', 'test', 'test', new Date(2016, 8, 1), new Date(2016, 8, 2) ],
[ 'M2016019706', 'HO', 'NYH01 816', new Date(2016, 5, 1), new Date(2016, 6, 12) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 6, 13), new Date(2016, 7, 29) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 7, 30), new Date(2016, 8, 7) ],
[ 'M2016019706', 'LTCO', 'NYLTC18', new Date(2016, 8, 8), new Date(2016, 8, 12) ],
[ 'M2016019706', 'HO', 'NYH01 834', new Date(2016, 8, 13), new Date(2016, 8, 28) ]
]);
I get this:

This fiddle answered by question:enter link description here
You need to use:
dataTable.addColumn({ type: 'string', role: 'style' });

Google Gantt chart shows wrong year

I have started using Gantt chart which is recently launched by Google which seems great for tasks tracking via chart.
I have created 4 tasks and chart loads fine but it shows wrong date for e.g. Jan 2016 in Develop the product and release section. Actually I haven't used this date in my data at all. What is the issue over here?
Here is my code:
HTML:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
JavaScript:
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Design', 'Design and analysis',
new Date(2015, 8, 1), new Date(2015, 8, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 8, 16), new Date(2015, 10, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 11, 01), new Date(2015, 11, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 12, 01), new Date(2015, 12, 20), null, 0, null],
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}

month numbers are zero-based in JavaScript
so Dec, 1 2015 would be --> new Date(2015, 11, 01)
instead the 12 pushes the date to Jan 1, 2016
see following snippets...
Date Test
console.log(new Date(2015, 11, 01));
console.log(new Date(2015, 12, 01));
Chart Test
if the range should be Aug - Dec, then reduce each month # by 1
google.charts.load('current', {'packages':['gantt']});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Task ID');
data.addColumn('string', 'Task Name');
data.addColumn('date', 'Start Date');
data.addColumn('date', 'End Date');
data.addColumn('number', 'Duration');
data.addColumn('number', 'Percent Complete');
data.addColumn('string', 'Dependencies');
data.addRows([
['Design', 'Design and analysis',
new Date(2015, 7, 1), new Date(2015, 7, 15), null, 25, null],
['Development', 'Develop the product',
new Date(2015, 7, 16), new Date(2015, 9, 31), null, 20, null],
['Testing', 'Product testing',
new Date(2015, 10, 01), new Date(2015, 10, 30), null, 10, null],
['Release', 'Release the product',
new Date(2015, 11, 01), new Date(2015, 11, 20), null, 0, null],
]);
var options = {
height: 275
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

i have faced the issue while creating triple y-axis

i have faced the problem while creating triple y-axis in google charts .
The problem is space between right side axis. could you please help me.
i provided the following code snippet. In result, right y-axes are merged .could you provide what is way to give space /gap between them to look good. Thank you
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
// Gives each series an axis that matches the vAxes number below.
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2},
3: {targetAxisIndex: 3}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'},
2: {title: 'third'},
3: {title: 'foruth'}
},
hAxis: {
ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
vAxis: {
viewWindow: {
max: 30
}
}
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<br><br>
<div id="chart_div"></div>

i'm thinking this feature was intended for no more than two vAxes,
although it does appear to work, there aren't any config options to handle this
if you must have three, try textPosition
have one 'in' and the other 'out'
see following example...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addColumn('number', "Average 1");
data.addColumn('number',"Average 2")
data.addRows([
[new Date(2014, 0), -.5, 8.7,7,11],
[new Date(2014, 1), .4, 8.7,5,12],
[new Date(2014, 2), .5, 12,6,13],
[new Date(2014, 3), 2.9, 15.7,5,14],
[new Date(2014, 4), 6.3, 18.6,8,15],
[new Date(2014, 5), 9, 20.9,8,16],
[new Date(2014, 6), 10.6, 19.8,9,16],
[new Date(2014, 7), 10.3, 16.6,7,15],
[new Date(2014, 8), 7.4, 13.3,8,14],
[new Date(2014, 9), 4.4, 9.9,12,13],
[new Date(2014, 10), 1.1, 6.6,11,12],
[new Date(2014, 11), -.2, 4.5,11,11]
]);
var classicOptions = {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
width: 900,
height: 500,
chartArea: {
width: '50%'
},
series: {
0: {targetAxisIndex: 0},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 2}
},
vAxes: {
0: {
textPosition: 'out',
title: 'Temps (Celsius)'
},
1: {
textPosition: 'in',
title: 'Daylight',
viewWindow: {
max: 30
}
},
2: {
textPosition: 'out',
title: 'third',
viewWindow: {
max: 40
}
}
},
hAxis: {
ticks: [
new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
new Date(2014, 4), new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
]
},
};
var classicChart = new google.visualization.LineChart(document.getElementById('chart_div'));
classicChart.draw(data, classicOptions);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Multiple trendlines in Google Charts

I need to add multiple trendlines to my google line chart but I just can't figure out how to do it with more than one line.
Here is my code example with a single line based on a date and value to build the chart:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawMultipleTrendlineChart() {
var chart;
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value');
data.addRow([new Date(2013, 3, 11), 10]);
data.addRow([new Date(2013, 4, 02), 650]);
data.addRow([new Date(2013, 5, 03), 55]);
data.addRow([new Date(2013, 6, 04), 95]);
data.addRow([new Date(2013, 7, 05), 400]);
data.addRow([new Date(2013, 8, 06), 600]);
data.addRow([new Date(2014, 0, 07), 800]);
data.addRow([new Date(2014, 1, 08), 900]);
data.addRow([new Date(2014, 2, 09), 3127]);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
prefix: 'R$:'
});
formatter.format(data, 1);
var dateFormatter = new google.visualization.NumberFormat({
pattern: 'MMM yyyy'
});
dateFormatter.format(data, 0);
var chartHeight = 400;
var chartWidth = 600;
var chartOptions = {
tooltip:{isHtml: true},
trendlines: {
0: {color: 'red'}
},
title: 'Trendlines with multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 100,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
google.load('visualization', '1', {packages:['corechart'], callback: drawMultipleTrendlineChart});
</script>
</head>
<body>
<div id="multipleTrendChart"></div>
</body>
I wan't to do it like this image:Image_example
jsfiddle example: http://jsfiddle.net/w3ez9gwb/

Just add more columns of your data:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Sales value A');
data.addColumn('number', 'Sales value B');
data.addRows([
[new Date(2013, 3, 11), 100, 10],
[new Date(2013, 4, 02), 50, 650],
[new Date(2013, 5, 03), 70, 55],
[new Date(2013, 6, 04), 80, 95],
[new Date(2013, 7, 05), 50, 400],
[new Date(2013, 8, 06), 10, 600],
[new Date(2014, 0, 07), 20, 800],
[new Date(2014, 1, 08), 300, 900],
[new Date(2014, 2, 09), 100, 312]
]);
Then add the trendlines to your chart options like so:
var chartOptions = {
tooltip: {
isHtml: true
},
trendlines: {
0: {
color: 'red'
},
1: {
color: 'yellow'
},
},
...
};
Full example: JSFiddle

Categories