I'm plotting a graph that needs to combine data of a selected date range to weekdays i mean if i selected a date range from ex: 2021-05-01 to 2021-05-31 in that consider 2021-05-01,2021-05-08,2021-05-15 these days are Friday so i need to combine datas of these dates and show as one data with label friday. With the current options that i used the chart is plotting like this. Is there any ways to display it correctly.
Demo Fiddle
This is the way that i currently getting the result
This is the result that i'm expecting
These are the current configd that i'm using in the highchart.
Highcharts.chart("multistackedbarchart-II", {
chart: {
type: "column",
},
title: {
text: "Sent/Received Comparison",
},
xAxis: {
title: {
text: "Day",
},
categories: [labels],
},
yAxis: {
min: 0,
title: {
text: "",
},
stackLabels: {
enabled: false,
style: {
fontWeight: "bold",
color:
// theme
(Highcharts.defaultOptions.title.style && Highcharts.defaultOptions.title.style.color) ||
"gray",
},
},
},
legend: {
align: "center",
verticalAlign: "bottom",
x: 0,
y: 0,
},
tooltip: {
headerFormat: "<b>{point.x}</b><br/>",
pointFormat: "{series.name}: {point.y}",
},
plotOptions: {
column: {
stacking: "normal",
dataGrouping: {
forced: true,
units: [['day', [1]]]
}
},
},
series: chartdata.multistackedbarchart,
credits: {
enabled: false,
},
});
Highcharts.setOptions({ lang: { noData: "No Data Available" } });
You can make a special function to do this sorting by using Array.map() and Array.filter() methods:
const categories = [
"2021-08-04",
"2021-08-05",
"2021-08-06",
"2021-08-07",
"2021-08-08",
"2021-08-09",
"2021-08-10",
"2021-08-11",
"2021-08-12",
"2021-08-13",
"2021-08-14",
"2021-08-15",
"2021-08-16",
"2021-08-17",
"2021-08-18",
"2021-08-19",
"2021-08-20",
"2021-08-21",
"2021-08-22",
"2021-08-23",
"2021-08-24",
"2021-08-25",
"2021-08-26",
"2021-08-27",
"2021-08-28",
"2021-08-29",
"2021-08-30",
"2021-08-31",
"2021-09-01",
"2021-09-02",
"2021-09-03",
"2021-09-04",
"2021-09-05",
"2021-09-06",
"2021-09-07",
"2021-09-08",
"2021-09-09",
"2021-09-10",
"2021-09-11",
"2021-09-12",
"2021-09-13",
"2021-09-14",
"2021-09-15",
"2021-09-16",
"2021-09-17",
"2021-09-18",
"2021-09-19",
"2021-09-20",
"2021-09-21",
"2021-09-22",
"2021-09-23",
"2021-09-24",
"2021-09-25",
"2021-09-26",
"2021-09-27",
"2021-09-28",
"2021-09-29",
"2021-09-30",
"2021-10-01",
"2021-10-02",
"2021-10-03",
"2021-10-04",
"2021-10-05",
"2021-10-06",
"2021-10-07",
"2021-10-08",
"2021-10-09",
"2021-10-10",
"2021-10-11",
"2021-10-12"]
const messagesSent = [ 32,
60,
71,
3,
1,
25,
16,
23,
28,
25,
2,
1,
43,
49,
32,
35,
26,
2,
1,
8,
36,
47,
15,
20,
2,
1,
2,
18,
20,
30,
43,
4,
4,
15,
14,
48,
39,
3,
2,
0,
48,
34,
15,
9,
1,
3,
1,
85,
27,
72,
11,
4,
2,
0,
29,
13,
21,
15,
32,
2,
0,
58,
37,
37,
24,
5,
1,
0,
0,
0]
const messagesReceived = [29,
79,
80,
7,
2,
24,
32,
23,
44,
42,
3,
1,
65,
69,
46,
47,
23,
3,
1,
28,
35,
65,
22,
19,
4,
1,
7,
10,
32,
31,
13,
8,
2,
4,
48,
53,
46,
7,
4,
0,
48,
40,
23,
18,
2,
6,
2,
79,
25,
86,
9,
8,
5,
0,
25,
18,
18,
14,
37,
2,
0,
52,
70,
27,
25,
17,
1,
0,
0,
0]
const organizeData = (days, sent, received) => {
const dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
// get name of weekday
const getDayOfWeek = date => {
const dayOfWeek = new Date(date).getDay();
return isNaN(dayOfWeek) ? null : dayNames[dayOfWeek];
}
return dayNames.map((dayName) => {
let correspondingMessagesSent = []
let correspondingMessagesReceived = []
const matchedDays = days.filter((day, index) => {
if(dayName === getDayOfWeek(day)) {
correspondingMessagesSent.push(sent[index])
correspondingMessagesReceived.push(received[index])
return day
}
})
return { [dayName]: { dates: matchedDays,
sent: correspondingMessagesSent,
received: correspondingMessagesReceived} }
})
}
console.log(organizeData(categories, messagesSent, messagesReceived))
/* This is not a part of answer. It is just to give the output fill height. So IGNORE IT */
.as-console-wrapper { max-height: 100% !important; top: 0; }
As you can see, the first row and the last column are separated from the rest by a larger space.
There is also a fine horizontal grey line under the first row.
How can I achieve that result ?
Fiddle
Highcharts.chart('container', {
chart: {
type: 'heatmap',
marginTop: 40,
marginBottom: 80,
marginLeft: 300,
marginRight: 170,
plotBorderWidth: 0,
},
plotOptions: {
series: {},
heatmap: {
// shared options for all heatmap series
borderColor: '#ffffff',
borderWidth: 100
}
},
title: {
text: ''
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov'],
opposite: true,
},
yAxis: {
categories: ['Human Resources 1', 'Human Resources 2', 'Human Resources 3', 'Human Resources 4', 'Human Resources'],
title: null,
labels: {
align: 'left',
x: -200
},
},
colorAxis: {
dataClasses: [{
from: -1,
to: 0,
color: '#cccccc',
name: 'N/A'
}, {
from: 0,
to: 10,
color: '#4cd093ff',
name: 'Very Low Impact'
}, {
from: 0,
to: 20,
color: '#b4e788ff',
name: 'Low Impact'
}, {
from: 20,
to: 50,
color: '#fff89dff',
name: 'Medium Impact'
}, {
from: 50,
to: 100,
color: '#ffa271ff',
name: 'High Impact'
}, {
from: 100,
color: '#f46160ff',
name: 'Very High Impact'
}]
},
legend: {
align: 'right',
layout: 'vertical',
margin: 0,
verticalAlign: 'top',
y: 25,
squareSymbol: false,
itemMarginTop: 30,
symbolRadius: 0,
symbolHeight: 40,
symbolWidth: 5,
useHTML: true,
itemStyle: {
"color": "#333333",
"cursor": "pointer",
"fontSize": "12px",
"textOverflow": "ellipsis"
}
},
tooltip: {
formatter: function() {
return '<b>In ' + this.series.xAxis.categories[this.point.x] + '</b> impact of <br><b>' +
this.point.value + '</b> for <b>' + this.series.yAxis.categories[this.point.y] + '</b>';
}
},
series: [{
name: 'Sales per employee',
// rowsize: 0.5,
borderWidth: 2,
data: [
[0, 0, 10],
[0, 1, 19],
[0, 2, 8],
[0, 3, 24],
[0, 4, 67],
[1, 0, 92],
[1, 1, 58],
[1, 2, 78],
[1, 3, 117],
[1, 4, 48],
[2, 0, 35],
[2, 1, 15],
[2, 2, 123],
[2, 3, 64],
[2, 4, 52],
[3, 0, 72],
[3, 1, 132],
[3, 2, 114],
[3, 3, 19],
[3, 4, 16],
[4, 0, 38],
[4, 1, 5],
[4, 2, 8],
[4, 3, 117],
[4, 4, 115],
[5, 0, 88],
[5, 1, 32],
[5, 2, 12],
[5, 3, 6],
[5, 4, 120],
[6, 0, 13],
[6, 1, 44],
[6, 2, 88],
[6, 3, 98],
[6, 4, 96],
[7, 0, 31],
[7, 1, 1],
[7, 2, 82],
[7, 3, 32],
[7, 4, 30],
[8, 0, 85],
[8, 1, 97],
[8, 2, 123],
[8, 3, 64],
[8, 4, 84],
[9, 0, 47],
[9, 1, 114],
[9, 2, 31],
[9, 3, 48],
[9, 4, 91]
],
dataLabels: {
enabled: false,
color: '#000000'
}
}, ]
});
#container {
min-width: 310px;
max-width: 800px;
height: 400px;
margin: 0 auto
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
You can achieve this result using xAxis.breaks, yAxis.plotLines and Highcharts.SVGRenderer to render a rectangle that covers the break on the xAxis. Check the demo and code posted below.
Code:
chart: {
events: {
render: function() {
var chart = this,
xAxis = chart.xAxis[0],
x = xAxis.toPixels(8.5),
y = chart.plotTop,
width = (xAxis.toPixels(1) - xAxis.toPixels(0.5)) * 0.6,
element;
if (chart.customElements) {
chart.customElements.forEach(function(elem) {
elem.destroy();
});
}
chart.customElements = [];
element = chart.renderer.rect(x, y, width, chart.plotHeight).attr({
fill: '#fff',
zIndex: 100
}).add();
chart.customElements.push(element);
}
}
},
xAxis: {
breaks: [{
breakSize: 0.6,
from: 8.5,
to: 9
}]
},
yAxis: {
plotLines: [{
value: 3.5,
width: 5,
color: '#fff',
zIndex: 100
}, {
value: 3.5,
width: 1,
color: '#ccc',
zIndex: 101
}]
}
Demo:
https://jsfiddle.net/BlackLabel/16e3o8jk/
API reference:
https://api.highcharts.com/highcharts/xAxis.breaks
https://api.highcharts.com/highcharts/yAxis.plotLines
https://api.highcharts.com/highcharts/chart.events.render
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#rect
I used the following example to create a drop down menu: https://jsfiddle.net/asgallant/WaUu2/ which makes it possible to select a column and then show the line on the graph.
But I also want to use a ChartRangeFilter but the problem is this method doesn't use a dashboard so I have no clue were to start to make everything work together. And most of the examples I found use this dashboard method.
I want it to approximately to be like this example http://jsfiddle.net/x7pyk55q/4/ but would like to keep filtering on the columns.
It would be nice if someone could provide me an example how to do it the right way. I'm a bit new when it comes to this.
My code:
<html>
<head>
<title>Temperature Chart</title>
<link rel="stylesheet" type="text/css" href="graph.css">
<!--Load the Ajax API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.1', {'packages':['controls','corechart']});
</script>
</head>
<body>
<!--this is the div that will hold the pie chart-->
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<script language="JavaScript">
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
// return the JSON data in console
console.log(JSON.stringify(data));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartView () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartView);
setChartView();
columnFilter.draw();
}
</script>
</body>
</html>
you can use the ChartRangeFilter to set the view.rows
similar to how the CategoryFilter sets the view.columns
when the 'statechange' event fires on the ChartRangeFilter,
use it's state to filter the rows for the range selected,
then redraw the chart
the ChartRangeFilter should be drawn using the same data and view as the chart
and re-drawn when the CategoryFilter changes
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages:['controls','corechart']
});
function drawChart() {
// Create our data table out of JSON data loaded from server.
var jsonData = "{\"cols\":[{\"id\":\"\",\"label\":\"datetime\",\"type\":\"datetime\"},{\"id\":\"\",\"label\":\"RPI1\",\"type\":\"number\"},{\"id\":\"\",\"label\":\"RPI2\",\"type\":\"number\"}],\"rows\":[{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 41)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 40, 52)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 2)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 12)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 22)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 32)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 43)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 41, 53)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 3)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 13)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 23)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 34)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 44)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 42, 54)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 4)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 15)\"},{\"v\":\"22\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 25)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 35)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 45)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 43, 55)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 6)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 16)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 26)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 36)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 47)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 44, 57)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 7)\"},{\"v\":\"19\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 17)\"},{\"v\":\"20\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 27)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 38)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 48)\"},{\"v\":\"21\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 45, 58)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 8)\"},{\"v\":\"23\"},{\"v\":null}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 18)\"},{\"v\":null},{\"v\":\"24\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 29)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 39)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 49)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 46, 59)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 10)\"},{\"v\":null},{\"v\":\"22\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 20)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 30)\"},{\"v\":null},{\"v\":\"21\"}]},{\"c\":[{\"v\":\"Date(2017, 0, 3, 15, 47, 40)\"},{\"v\":null},{\"v\":\"22\"}]}]}"
var data = new google.visualization.DataTable(JSON.parse(jsonData));
var columnsTable = new google.visualization.DataTable();
columnsTable.addColumn('number', 'colIndex');
columnsTable.addColumn('string', 'colLabel');
var initState= {selectedValues: []};
// put the columns into this data table (skip column 0)
for (var i = 1; i < data.getNumberOfColumns(); i++) {
columnsTable.addRow([i, data.getColumnLabel(i)]);
}
initState.selectedValues.push(data.getColumnLabel(1));
var chart = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'chart_div',
dataTable: data,
options: {
title: 'Temps',
width: 1600,
height: 600,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature',
}
}
});
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'rngFilter_div',
dataTable: data,
options: {
filterColumnIndex: 0,
ui: {
chartOptions: {
width: 1600,
height: 200,
hAxis:{
title:'DateTime'
},
vAxis:{
title: 'Temperature'
}
}
}
}
});
var columnFilter = new google.visualization.ControlWrapper({
controlType: 'CategoryFilter',
containerId: 'colFilter_div',
dataTable: columnsTable,
options: {
filterColumnLabel: 'colLabel',
ui: {
label:'',
caption: 'Select RPI',
allowTyping: false,
allowMultiple: true,
allowNone: false,
selectedValuesLayout: 'aside'
}
},
state: initState
});
function setChartViewCols () {
var state = columnFilter.getState();
var row;
var view = {
columns: [0]
};
for (var i = 0; i < state.selectedValues.length; i++) {
row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
view.columns.push(columnsTable.getValue(row, 0));
}
// sort the indices into their original order
view.columns.sort(function (a, b) {
return (a - b);
});
view.rows = null;
chart.setView(view);
chart.draw();
rangeFilter.setView(view);
rangeFilter.setState();
rangeFilter.draw();
}
google.visualization.events.addListener(columnFilter, 'statechange', setChartViewCols);
function setChartViewRows () {
var state = rangeFilter.getState();
var view = chart.getView();
view.rows = rangeFilter.getDataTable().getFilteredRows([{
column: 0,
minValue: state.range.start,
maxValue: state.range.end
}]);
chart.setView(view);
chart.draw();
}
google.visualization.events.addListener(rangeFilter, 'statechange', setChartViewRows);
setChartViewCols();
columnFilter.draw();
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="colFilter_div"></div>
<div id="chart_div"></div>
<div id="rngFilter_div"></div>
note:
recommend using loader.js to load the library, instead of jsapi
according to the release notes...
The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.
<script src="https://www.gstatic.com/charts/loader.js"></script>
this will only change the load statement
google.charts.load('current', {packages:['controls','corechart']});
you can also include the callback in the load statement, as in the above snippet...