Chart.js: scrollable/swipable time-based x-axis - chart.js

Let's say I have the following data set using a time based Cartesian x axis. Basically, these are data points spread over 3 days.
{x: new Date(2021, 2, 5, 0, 0), y: 9},
{x: new Date(2021, 2, 5, 2, 0), y: 7},
{x: new Date(2021, 2, 5, 5.5, 0), y: 4.3},
{x: new Date(2021, 2, 5, 7, 0), y: 6},
{x: new Date(2021, 2, 5, 8, 0), y: 3.7},
{x: new Date(2021, 2, 5, 14, 0), y: 9.5},
{x: new Date(2021, 2, 6, 4, 0), y: 4.0},
{x: new Date(2021, 2, 6, 11, 0), y: 5},
{x: new Date(2021, 2, 6, 12, 0), y: 2.7},
{x: new Date(2021, 2, 6, 14, 0), y: 1.7},
{x: new Date(2021, 2, 6, 19, 0), y: 5.7},
{x: new Date(2021, 2, 7, 17, 0), y: 6.7},
{x: new Date(2021, 2, 7, 21, 0), y: 5.7},
{x: new Date(2021, 2, 7, 22, 0), y: 4.7},
Lets say my starting view is the middle day, in this case day 6. Then I want a feature where you can swipe scroll to the next / previous day. Only 1 day should be shown in the graph at a time, unless you are scrolling / swiping between these.
Here is a simple sketch to illustrate this using the above data points.
Here are some other examples that show what I mean:
https://swipecalendar.io/. While this is a calendar, the idea should be clear and applicable to a line graph as well. You are swiping between 'months' and snapping to a month.
https://www.amcharts.com/demos/date-based-data/. Here you can see you can swipe along the x-axis and the time-span of the x-axis changes along while swiping (ignoring the 'full' graph' they have on the bottom).
Is something like this possible with Chartjs or with a plugin? I have not see any Chartjs examples that have a changing chart view based on a scroll state of the x-axis.
If not, is there recommendation for an alternative?


Please take a look at this plugin, https://github.com/chartjs/chartjs-plugin-zoom
With this you can make the chart movable

Related

Django count number of records per day

I'm using Django 2.0
I am preparing data to show on a graph in template. I want to fetch number of records per day.
This is what I'm doing
qs = self.get_queryset().\
extra({'date_created': "date(created)"}).\
values('date_created').\
annotate(item_count=Count('id'))
but, the output given is
[
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1},
{'date_created': datetime.date(2018, 5, 24), 'item_count': 1}
]
Here data is not grouped and same date is returning repeatedly with count as 1

Try using TruncDate function.
See that answer

Google Charts is not displaying last row in the data array?

I have data array with 45 rows but only 44 rows are visible on the screen after I am hide columns between 8 and 14 using "setColumns" and then re-enable any of the columns between 8 and 14:
The 45th row has following data:
0:{wf: "10 May 2018, 14:44:36"}
1:{wf: ""}
2:{wf: ""}
3:{wf: ""}
4:{wf: ""}
5:{wf: ""}
6:{wf: ""}
7:{wf: ""}
8:{wf: "69.9"}
9:{wf: "73.2"}
10:{wf: "65.2"}
11:{wf: "73.2"}
12:{wf: "82.8"}
13:{wf: "0"}
14:{wf: "28.6"}
To perform column toggle I use following commands:
performColumnToggle: function (col)
{
// use original unfiltered data
_view = new google.visualization.DataView(_original_data);
// get a key due to splice not keeping keys one delete
var key = $.inArray(col, _toggledColumns);
if (_columns[col]['status'] === 1) {
_columns[col]['status'] = 0;
// delete by key because splice doesn't keep keys on delete
_toggledColumns.splice(key, 1);
} else {
_columns[col]['status'] = 1;
// insert new items with a key and push other columns
_toggledColumns.splice(col, 0, col);
}
// set columns to display
_view.setColumns(_toggledColumns);
console.log(_chart.getDataTable().getNumberOfRows()); // keeps returns 44 rather then 45.
_dashboard.draw(_view);
}
I set _original_data when I first initiate the chart and when I have to update the data in the chart. When I perform console.log(_original_data) I see all 45 rows.
init_chart: function ()
{
_data = new google.visualization.DataTable(_tableData);
_original_data = _data;
// some other code ....
}
updateData: function ()
{
_tableData = data;
_data = new google.visualization.DataTable(_tableData);
_original_data = _data;
// some other code ....
}
Below is an example code
https://jsfiddle.net/Spiker/g0k714h7/
To trigger error take following steps:
Scroll down the page you will notice that we have 45 rows with last row having time date "10 May 2018, 14:44:36"
Scroll back up and click on "Select/Diselect All". You can scroll down the table to see that now we have 44 rows
Either Click on "Select/Diselect All" or "record8". Scroll down the page to see that we still have 44 rows in the table

DataView Class
.hideColumns() Method
DataView Class is a special version of the DataTable Class. Its main purpose is to present a part(s) of the DataTable(s). OP code needs to toggle columns with the method that compliments .setColumns() which is .hideColumns().
In Demo 1 below there is a ternary that toggles the columns from [0,...14] to [8...14] columns by using both set/hideColumns() methods. The table has 90 rows and it persists at 90 between toggling of columns.
Example
var dView = *status === 'on' ?
view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]) :
view.hideColumns([0, 1, 2, 3, 4, 5, 6, 7]);
⭐ Demo 2 (located at the bottom of this post,) isn't a solution but it could help the OP code should you decide on not using Demo 1.
Demo 1
.as-console-wrapper.as-console-wrapper {
max-height: 15px;
color: red
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<style>
#import url('https://fonts.googleapis.com/css?family=Raleway');
html {
height: 100%;
width: 100%;
font: 400 16px/1.1 Raleway;
}
body {
position: relative;
overflow: auto;
}
main {
overflow: auto;
}
.btn {
width: 11ch;
font: inherit;
}
.btn.on::after {
content: '\a0ON';
}
.btn.off::after {
content: '\a0OFF';
}
.heavy {
font-weight: 900;
}
.darkBkg {
background: rgba(0, 0, 0, 0.4);
color: #fff;
}
.active {
background: rgba(200, 150, 20, 0.3);
color: #000;
}
.tomato {
color: tomato
}
.font {
font-family: Raleway;
}
.right {
text-align: right;
}
.big {
font-size: 20px
}
</style>
</head>
<body>
<main>
<button class='btn off' type='button'>VIEW</button>
<figure id='table'></figure>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['table']
});
google.charts.setOnLoadCallback(drawTable);
var cssClassNames = {
'headerRow': 'heavy font',
'tableRow': '',
'oddTableRow': 'darkBkg',
'selectedTableRow': 'active',
'hoverTableRow': 'active',
'headerCell': 'font',
'tableCell': 'right font',
'rowNumberCell': 'big heavy tomato font'
};
var options = {
backgroundColor: {
fill: 'transparent'
},
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%',
'cssClassNames': cssClassNames
};
$('.btn').on('click', function(e) {
$(this).toggleClass('on off');
var status = $(this).hasClass('on') ? 'on' : 'off';
console.log(status);
drawTable(status);
});
function drawTable(status) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'START');
data.addColumn('date', 'END');
data.addColumn('string', 'DESC');
data.addColumn('number', '0');
data.addColumn('number', '1');
data.addColumn('number', '2');
data.addColumn('number', '3');
data.addColumn('number', '4');
data.addColumn('number', 'EXT 0');
data.addColumn('number', 'EXT 1');
data.addColumn('number', 'EXT 2');
data.addColumn('number', 'EXT 3');
data.addColumn('number', 'COL 0');
data.addColumn('number', 'COL 1');
data.addColumn('number', 'COL 2');
var time = new google.visualization.DateFormat({
formatType: 'short'
});
data.addRows([
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0],
[new Date(2017, 4, 12), new Date(2019, 4, 12), 'Current', 01, 0.335, 487, 5, 63.20, 52, 23, 105.3, 60, 0.001, 111, -1],
[new Date(1996, 0, 18), new Date(1996, 6, 4), 'Archive', 01, 1.30, 56, 3, 7.08, 88, 23, 98.5, 28, 0.010, 212, 1],
[new Date(2024, 1, 29), new Date(2028, 1, 29), 'Leap', 01, 0.00, 596, 4, 162.2, 971, 23, 92.3, 4, 0.100, 121, 0]
]);
var table = new google.visualization.Table(document.getElementById('table'));
var view = new google.visualization.DataView(data);
var dView = status === 'on' ? view.setColumns([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]) : view.hideColumns([0, 1, 2, 3, 4, 5, 6, 7]);
table.draw(view, options);
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>
⭐Although I strongly suggest that you use the hideColumns() from Google Visualization API, I'd like to address this:
"// delete by key because splice doesn't keep keys on delete "
splice() returns whatever it deletes. So you call on splice() and store its return in a var, const, array, object, etc.
Demo 2
var columnArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
var removedArray = columnArray.splice(0, 8);
console.log('Removed Column Array: ' + removedArray);
console.log('Remaining Column Array: ' + columnArray);
var restoredArray = removedArray.concat(columnArray);
console.log('Restored Column Array: ' + restoredArray);

the problem appears to occur in function --> switchOffAllColumns
there must be some sort of bug with the view
setting the view columns on the ChartWrapper, rather than the DataView,
corrects the issue
in switchOffAllColumns, change the following line...
_view.setColumns(_toggledColumns);
to...
_chart.setView({
columns: _toggledColumns
});
see following working fiddle...
https://jsfiddle.net/WhiteHat/o0j70y9r/
note: jsapi should no longer be used, changed above fiddle to use loader.js load statement...

How to change style of the selected point in Google Charts?

I'm using Google Charts to build a Line Graph and I need to change the style of the selected point.
The code below customizes the points individually when the graph loads, but I need to style the point after the user selects/clicks the point. I need to change the color, size and stroke-width of the selected point.
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X', 'Y', {'type': 'string', 'role': 'style'}],
[1, 3, null],
[2, 2.5, null],
[3, 3, null],
[4, 4, null],
[5, 4, null],
[6, 3, 'point { size: 18; shape-type: star; fill-color: #a52714; visible: false }'],
[7, 2.5, null],
[8, 3, null]
]);
var options = {
legend: 'none',
hAxis: { minValue: 0, maxValue: 9 },
curveType: 'function',
pointSize: 7,
dataOpacity: 0.3
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
https://jsfiddle.net/api/post/library/pure/

chart js (version 2) bar chart superimpose one data set onto another

I have a horizontal bar chart with two datasets
I am trying to superimpose the blue bars onto red.so that the intesection can be a start time and the bar can indicate a range.
is there any way to do this?
data: {
labels: ["C#", "ASP.NET MVC", "WebAPI", "SQL", "Entity Framework","NServiceBus / MSMQ", "WCF", "WPF / XAML", "",
"HTML / CSS", "JavaScript", "Angular JS v1","",
"DI / IoC", "TDD / Unit Testing", "UI Testing (Seleno)", "CI (Teamcity)"],
datasets: [
{
label:"# years",
data: [3, 2, 1, 4, 6, 2, 0.5, 0.25, 0,
7, 2, 0.5, 0,
2, 2, 0.5, 0.5],
backgroundColor: 'red',
borderWidth: 0
},
{
label:"# years",
data: [6, 4, 3, 6, 6, 2, 0.5, 0.25, 0,
7, 2, 0.5, 0,
2, 2, 0.5, 0.5],
backgroundColor: 'blue',
borderWidth: 0
}
]
}

options:{
scales: {
xAxes: [{ stacked:true}]
}
}

How to make a custom tooltip for each series in Google Line Chart

I am currently testing google charts and having difficulty in specifying my own custom tooltips.
my data is declared as below
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([0, 0, 0, 'hello'], [1, 10, 5, 'hello'],
[2, 23, 15, 'hello'],[3, 17, 9, 'hello'], [4, 18, 10, 'hello'],
[5, 9, 5, 'hello'],
see this jsFiddle http://jsfiddle.net/SecretSquirrel/rbwyhx1q/
It appears the custom tooltip is only affecting the first data column?
I thought it was pretty limited to only allow 1 tooltip per row, but if this is only 1 tooltip for the first column this is really quite useless.

Well you have to add another tooltip column for your second graft.
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addColumn('number', 'Cats');
data.addColumn({type: 'string', role: 'tooltip', p: {'html':true}});
data.addRows([
[0, 0,'custom', 0, 'hello'], [1, 10,'custom', 5, 'hello'], [2, 23,'custom', 15, 'hello'],
[3, 17,'custom', 9, 'hello'], [4, 18,'custom', 10, 'hello'], [5, 9,'custom', 5, 'hello'],
[6, 11,'custom', 3, 'hello'], [7, 27,'custom', 19, 'hello'], [8, 33,'custom', 25, 'hello'],
[9, 40,'custom', 32, 'hello'], [10, 32,'custom', 24, 'hello'], [11, 35,'custom', 27, 'hello'],
[12, 30,'custom', 22, 'hello'], [13, 40,'custom', 32, 'hello'], [14, 42,'custom', 34, 'hello'],
[15, 47,'custom', 39,'hello'], [16, 44,'custom', 36,'hello'], [17, 48,'custom', 40, 'hello'],
[18, 52,'custom', 44,'hello'], [19, 54,'custom', 46,'hello'], [20, 42,'custom', 34, 'hello'],
[21, 55,'custom', 47,'hello'], [22, 56,'custom', 48,'hello'], [23, 57,'custom', 49,'hello']
]);
var options = {
width: 1000,
height: 563,
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('ex2'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="ex2"></div>