I have a very simple question that I'm struggling to find out:
Instead of this
I want this:
The problem is that google charts resizes it based on the screen size. But I want to show all hours even on a small screen.
I also want to add an extra line for every 15 minutes between the hours. Just the lines, not the label. Is it possible?
Here is my code:
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ 'Work', new Date(2018, 4, 25, 8, 30), new Date(2018, 4, 25, 17, 30) ],
[ 'Rest', new Date(2018, 4, 25, 0, 0), new Date(2018, 4, 25, 8, 30) ],
[ 'Rest', new Date(2018, 4, 25, 17, 30), new Date(2018, 4, 26, 0, 0) ]
]);
chart.draw(dataTable, {
});
}
https://jsfiddle.net/8xpkLe46/
Related
I am using Google Charts API for my Data Visualisations. I would like to retrieve the date of the selected day on the Chart.
What I retrieve is quite strange.. I am using a selectHandler on the chart as recommended by documentation.
function selectHandler() {
console.log(chart.getSelection()[0]);
}
google.visualization.events.addListener(chart, 'select', selectHandler);
On clicking following date, I am reading following output on console:
22/04/2020 : 1587513600000
19/06/2020 : 1592524800000
What kind of date format is this?
Can anyone help me?
this is the date represented as the number of milliseconds since the Unix Epoch.
it is the same value as returned by the getTime() method on a date object.
you can pass the value received from the selection to the date constructor to get the date...
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
}
see following working snippet...
google.charts.load('current', {
packages: ['calendar']
}).then(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'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
function selectHandler() {
var selection = chart.getSelection();
if (selection.length > 0) {
var selectedDate = new Date(selection[0].date);
console.log(selectedDate);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(dataTable, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic"></div>
note: you should check the length of the selection before accessing the contents.
the select event is also called when a date is un-selected.
in this case the selection array will be empty...
Labels overflow outside the box. Some lables are well inside the box. Others just draw outside.
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Term' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
[ '2', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
[ '2', 'Johndc Adams', new Date(1790, 2, 4), new Date(1810, 2, 4) ],
[ '4', 'Johndc Adams', new Date(1770, 2, 4), new Date(1810, 2, 4) ],
[ '3', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);
chart.draw(dataTable);
}
How to mix line and scatter plot on one chart?
Column 1: Y (date)
Column 2: X1 (number, as points/dots)
Column 3: X2 (number, as line)
Example JsFiddle: https://jsfiddle.net/e64y5wfj/4/
It's doesn't seems a way or example on the documentation.
use the series option to change the style of Column 2
series: {
0: {
pointSize: 8,
lineWidth: 0
}
}
see following working snippet...
google.charts.load('current', {
callback: drawMultipleTrendlineChart,
packages:['corechart']
});
function drawMultipleTrendlineChart() {
var chart;
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), 200, 1000],
[new Date(2013, 4, 02), 500, 650],
[new Date(2013, 5, 03), 700, 550],
[new Date(2013, 6, 04), 800, 95],
[new Date(2013, 7, 05), 500, 400],
[new Date(2013, 8, 06), 900, 250],
[new Date(2014, 0, 07), 800, 300],
[new Date(2014, 1, 08), 2000, 200],
[new Date(2014, 2, 09), 1000, 312]
]);
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
},
title: 'multiple lines',
isStacked: true,
width: chartWidth,
height: chartHeight,
colors: ['#0000D8', '#00dddd'],
hAxis: {
title: 'example title',
slantedText: false,
slantedTextAngle: 45,
textStyle: {
fontSize: 10
},
format: 'dd-MM-yyyy'
},
chartArea: {
left: 50,
top: 20,
width: (chartWidth - 10),
height: (chartHeight - 90)
},
series: {
0: {
pointSize: 8,
lineWidth: 0
}
}
};
chart = new google.visualization.LineChart(document.getElementById('multipleTrendChart'));
chart.draw(data, chartOptions);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="multipleTrendChart"></div>
I read the API reference from google developer website. For material line chart, there is example from here. Could anyone tell me how to remove the bottom "Month"? I think it should be worked by some code like:
hAxis: {
title: ''
}
In addition, most of the hAxis and vAxis features don't work.
that is correct, the following option will remove the x-axis title...
hAxis: {
title: ''
},
just be sure to use the options conversion method for material charts...
//convert options
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
see following working snippet...
google.charts.load('current', {'packages':['line', 'corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var button = document.getElementById('change-chart');
var chartDiv = document.getElementById('chart_div');
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', "Average Temperature");
data.addColumn('number', "Average Hours of Daylight");
data.addRows([
[new Date(2014, 0), -.5, 5.7],
[new Date(2014, 1), .4, 8.7],
[new Date(2014, 2), .5, 12],
[new Date(2014, 3), 2.9, 15.3],
[new Date(2014, 4), 6.3, 18.6],
[new Date(2014, 5), 9, 20.9],
[new Date(2014, 6), 10.6, 19.8],
[new Date(2014, 7), 10.3, 16.6],
[new Date(2014, 8), 7.4, 13.3],
[new Date(2014, 9), 4.4, 9.9],
[new Date(2014, 10), 1.1, 6.6],
[new Date(2014, 11), -.2, 4.5]
]);
var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
hAxis: {
title: ''
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
}
}
};
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}
},
vAxes: {
// Adds titles to each axis.
0: {title: 'Temps (Celsius)'},
1: {title: 'Daylight'}
},
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
}
}
};
function drawMaterialChart() {
var materialChart = new google.charts.Line(chartDiv);
materialChart.draw(data, google.charts.Line.convertOptions(materialOptions));
button.innerText = 'Change to Classic';
button.onclick = drawClassicChart;
}
function drawClassicChart() {
var classicChart = new google.visualization.LineChart(chartDiv);
classicChart.draw(data, classicOptions);
button.innerText = 'Change to Material';
button.onclick = drawMaterialChart;
}
drawMaterialChart();
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<button id="change-chart">Change to Classic</button>
<br><br>
<div id="chart_div"></div>
note: the conversion method will not work for all options,
many simply aren't supported...
see --> Tracking Issue for Material Chart Feature Parity
another route would be to use a classic chart with the following option...
theme: 'material'
We need to display a stacked column chart combined with a line chart and would like to stick to the VizFrame control offered by UI5. Is there a way to achieve this? It's not listed in the samples (https://sapui5.netweaver.ondemand.com/sdk/explored.html#/entity/sap.viz.ui5.controls.VizFrame/samples) but maybe there is a way to do it anyway.
EDIT
The data we need to display comes in the following format:
var data = [
{week: 1, stacked1: 10, stacked2: 20, stacked3: 30, line: 100},
{week: 2, stacked1: 12, stacked2: 13, stacked3: 14, line: 40},
{week: 3, stacked1: 14, stacked2: 25, stacked3: 26, line: 20},
{week: 4, stacked1: 15, stacked2: 24, stacked3: 33, line: 52}
];
So the idea is to have weeks on the x-axis, a stacked bar for the values stacked1, stacked2 and stacked3 as well as a value point for the line.
I think you want to use setVizType("stacked_combination") [or vizType: "stacked_combination"] on the VizFrame. You can see all the type on the getVizType() VizFrame doumentation. Here is a simple example where I extended the VizFrame and added two functions to display a Line Stacked Column Chart:
sap.viz.ui5.controls.VizFrame.extend("jonova.ui5.chart.JuVizFrame", {
renderer: { },
setLineStackedBar: function() {
var oModel = new sap.ui.model.json.JSONModel(
[{Product:"Total", Date: 2000, Available: 100},
{Product:"Total", Date: 2001, Available: 100},
{Product:"P1", Date: 2000, Utilized: 30},
{Product:"P1", Date: 2001, Utilized: 20},
{Product:"P2", Date: 2000, Utilized: 40},
{Product:"P2", Date: 2001, Utilized: 60}]);
var oDataset = new sap.viz.ui5.data.FlattenedDataset({
dimensions: [{name: 'Date', value: '{Date}'},
{name: 'Product', value: '{Product}'}],
measures: [{name: 'Available', value: '{Available}'},
{name: 'Utilized', value: '{Utilized}' }],
data: {path: "/"}});
var oFeeds = [new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "valueAxis", type: "Measure", values: ["Utilized", "Available"]}),
new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "categoryAxis", type: "Dimension", values: ["Date"]}),
new sap.viz.ui5.controls.common.feeds.FeedItem({uid: "color", type: "Dimension", values: ["Product"]})];
this.setChart("stacked_combination", oDataset, oModel, oFeeds);
},
setChart: function(aVizType, aDataset, aModel, aFeeds) {
this.setVizType(aVizType);
this.setDataset(aDataset);
this.setModel(aModel);
for( var i=0, len=aFeeds.length; i<len; i++) this.addFeed(aFeeds[i]);
},
});