When the cursor is placed over the calendar chart date should be popup like second attached image (like tool-tip), in my code it showing like (refer First figure)below the chart, I want my output as in Second Figure.
Please guide me to fix this issue, and below is see my code.
<script>
$.getScript("https://www.google.com/jsapi", function () {
google.load('visualization', '1.1' , { 'callback': calenderchart, 'packages': ['calendar'] });
});
function calenderchart(data) {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "",
tooltip: {isHtml: true}
};
chart.draw(dataTable, options);
}
</script>
<body>
<div id="calendar_basic" style="width: 1000px;"ng-init ='calanderchart()'></div>
</body>
seems to work fine here, is there more you can share?
any CSS on your page?
google.load('visualization', '1.1', {
callback: function () {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
chart.draw(dataTable, {
tooltip: {isHtml: true}
});
},
packages: ['calendar']
});
<script src="https://www.google.com/jsapi"></script>
<div id="calendar_basic" style="width: 1000px;"></div>
Related
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' });
below is the code for google gantt char in js but I need the same to be used in react. I have found a similar npm package for react but for that I couldn't customize the bar colors.
http://jsfiddle.net/7A88H/1123/
HTML
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
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([
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
CategoryA: '#e63b6f',
CategoryB: '#19c362',
CategoryC: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.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: colors
};
// 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);
}
google.load('visualization', '1', {packages:['timeline'], callback:drawChart});
below is the code for google gantt char in js but I need the same to be used in react. I have found a similar npm package for react but for that I couldn't customize the bar colors.
http://jsfiddle.net/7A88H/1123/
I am using Google Timeline chart and want to hire a click function. Simply when I clicked on the colored rectangles or text I want a bootstrap Modal show up.
google.charts.load("current", {packages:["timeline"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30),
new Date(2017, 2, 30) ],
[ 'Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1),
new Date(2017, 4, 30) ],
[ 'Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01),
new Date(2017, 6, 30) ],
[ 'Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30),
new Date(2017, 3, 30) ],
[ 'Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30),
new Date(2017, 5, 30) ],
[ 'Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30),
new Date(2018, 1, 30) ]]);
var options = {
timeline: { colorByRowLabel: true }
};
chart.draw(dataTable, options);
}
Please take a look at this Fiddle
please help.
the TimeLine chart doesn't have a 'click' event
but it does have 'select'
you can use the properties from the selection,
to pull information from the data table
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 1));
}
});
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['timeline']
});
function drawChart() {
var container = document.getElementById('example5.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({type: 'string', id: 'Room'});
dataTable.addColumn({type: 'string', id: 'Name'});
dataTable.addColumn({type: 'date', id: 'Start'});
dataTable.addColumn({type: 'date', id: 'End'});
dataTable.addRows([
['Magnolia Room', 'Beginning JavaScript', new Date(2017, 1, 30), new Date(2017, 2, 30)],
['Learning for Life', 'Intermediate JavaScript', new Date(2017, 3, 1), new Date(2017, 4, 30)],
['Magnolia Room', 'Advanced JavaScript', new Date(2017, 5, 01), new Date(2017, 6, 30)],
['Willow Room', 'Beginning Google Charts', new Date(2017, 1, 30), new Date(2017, 3, 30)],
['Willow Room', 'Intermediate Google Charts', new Date(2017, 4, 30), new Date(2017, 5, 30)],
['Willow Room', 'Advanced Google Charts', new Date(2017, 6, 30), new Date(2018, 1, 30)]
]);
var options = {
timeline: {
colorByRowLabel: true
}
};
google.visualization.events.addListener(chart, 'select', function () {
var selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 1));
}
});
chart.draw(dataTable, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="example5.1"></div>
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
It is possible to add two columns before the column groups?
This image is how is the current situation, I would add two columns before the column that has (GROUP # 1 GROUP # 2). For example, one category column and column name of the participant.
I dont found how to do in the documentation Google Charts: https://developers.google.com/chart/interactive/docs/gallery/timeline?hl=pt
My Example:
http://jsfiddle.net/asgallant/7A88H/
Ex: Current situation:
Ex: Image of desired output
Code current situation.
function drawChart() {
var container = document.getElementById('example4.2');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
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([
[ 'GROUP #1', 'CategoryA', 'C00001', new Date(2014, 0, 1), new Date(2014, 0, 31) ],
[ 'GROUP #1', 'CategoryA', 'C00002', new Date(2014, 1, 1), new Date(2014, 1, 28) ],
[ 'GROUP #1', 'CategoryA', 'C00003', new Date(2014, 3, 1), new Date(2014, 3, 15) ],
[ 'GROUP #1', 'CategoryB', 'C00003', new Date(2014, 0, 21), new Date(2014, 2, 19) ],
[ 'GROUP #1', 'CategoryA', 'C00004', new Date(2014, 0, 1), new Date(2014, 0, 15) ],
[ 'GROUP #2', 'CategoryC', 'C00005', new Date(2014, 2, 8), new Date(2014, 2, 15) ],
[ 'GROUP #3', 'CategoryC', 'C00006', new Date(2014, 5, 1), new Date(2014, 5, 15) ],
[ 'GROUP #4', 'CategoryA', 'C00007', new Date(2014, 1, 15), new Date(2014, 1, 25) ]
]);
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
CategoryA: '#e63b6f',
CategoryB: '#19c362',
CategoryC: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.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: colors
};
// 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);
}
google.load('visualization', '1', {packages:['timeline'], callback: drawChart});