Google chart horizontal scrollbar

Google chart horizontal scrollbar - javascript

Here is my chart so far:
JSFiddle
<!-- begin snippet: js hide: false console: true -->
<!-- language: lang-js -->
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Day', 'data1', 'data2', 'data3', 'data4', 'data1 compare', 'data2 compare', 'data3 compare', 'data4 compare', '', ''],
[0.85, 165, 938, 522, 998, null, null, null, null, 614.6, 500],
[1.15, null, null, null, null, 165, 938, 522, 998, 614.6, 510],
[1.5, 0, 0, 0, 0, 0, 0, 0, 0, null, null ],
[1.85, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[2.15, null, null, null, null, 165, 938, 522, 998, 682, 540],
[14, 135, 1120, 599, 1268, null, null, null, null, 682, 530],
[16, null, null, null, null, 165, 938, 522, 998, 682, 540]
]);
var options = {
title : 'Chart',
vAxes: [
{title: 'foo'},
{title: 'bar'}
],
//hAxis: { ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]},
hAxis: {
ticks: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31],
textStyle : {
fontSize: 9 // or the number you want
}
},
seriesType: 'bars',
bar: { groupWidth: 1000 },
isStacked: true,
legend: 'none',
interpolateNulls: true,
series: {
0: {
targetAxisIndex: 0
},
4: {
targetAxisIndex: 0
},
8: {
targetAxisIndex: 1,
type: 'line'
},
9: {
targetAxisIndex: 1,
type: 'line'
}
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<!-- language: lang-html -->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
I wanted to ask if there is a way to make elements in chart make bigger, but have a horizontal scrollbar with vAxes labels fixed and always visible?
Something like this:

Google Charts has this explorer feature whereby you can scroll and zoom in/out of the Chart. However, no buttons or scroll bar will be displayed. You will have to use your mouse to drag and move horizontally on the chart displayed.
To allow this feature, simply add explorer: {axis: 'horizontal'} in your options object. You may notice that you can visit areas where there is no data displayed, to stop this add keepInBounds: true to the explorer options to give explorer: {axis: 'horizontal', keepInBounds: true}.
More information on the explorer options is available here under the table row name explorer.
If you would like a scroll bar feature, then another feature you could explore is a Google Charts ChartRangeFilter available here.
Implementation details and steps are available here and changes need to be made accordingly to your chart type.

Related

Chartist.js chart artifact

What could be the cause to this artifact? I have moved my code from my codepen https://codepen.io/mads10000/pen/vaBdBd
<div class="chartsContainer">
<div class="slaChart">
</div>
</div>
to my HTML boilerplate
Github - Commit with chart that has an artifact
It should not have these black spots as seen on image. It looks right on my codepen.

The solution was, showLine: false, fixed it.
var lineChart = new Chartist.Line('.slaChart', {
labels: ['January', '', 'February', '', 'March'],
series: [
// [0, 5, 8, 10, 7, 6, 5, 5, 4],
[0, 50, 35, 70, 50, 90],
[0 , 45, 25, 55, 35, 70]
]
}, {
low: 0,
high: 100,
showArea: true,
showLine: false, <-------- showLine false fixed it
showPoint: false,
fullWidth: true,
plugins: [
// Chartist.plugins.lineSelector()
],
axisY: {
onlyInteger: true,
offset: 20
},
axisX: { showGrid: false }
});

This is due to the CSS fill property. Something on your page might have set the default fill to be black. For a line path the fill doesn't make sense to clear it you just need to reset the fill to none.
.ct-line {
fill: none
}

Google chart multiple series with same scale

I'm looking for a way to have multiple series on my graphics, with the same scales but displayed only once.
as you can see here :
http://jsfiddle.net/Youkoal/d3xwnqdu/
I have 4 séries and the chart display all 4 axis.
I have noted that this properties do not seem to work here:
TextStyle: {color: 'none'}
nor
{format: 'none'}
when included in the axis options.
How can I 'hide' those axis or put all series on same scales?

the first letter in textStyle should be lowercase...
textStyle: {
color: 'none'
}
this will hide the text, but the chart will still allocate room for the labels,
to minimize, reduce the fontSize...
textStyle: {
color: 'none',
fontSize: 1
}
ideally we could use textPosition: 'none', but this option is not supported for material charts.
Tracking Issue for Material Chart Feature Parity
see following working snippet...
google.charts.load('current', {
packages: ['bar']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Semaines', 'Test Region', 'Test2 Region', 'Test SerieNE', 'Test2 SerieNE', 'Test SerieS', 'Test2 SerieS', 'Test SerieO', 'Test2 SerieO'],
['Semaine 1', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 2', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 3', 0, 0, 0, 0, 0, 0, 0, 0],
['Semaine 4', 24, 0, 21, 0, 0, 0, 3, 0],
['Semaine 5', 122, 0, 21, 0, 52, 0, 49, 0],
['Semaine 6', 361, 0, 23, 0, 325, 0, 13, 0],
['Semaine 7', 51, 0, 21, 0, 11, 0, 19, 0],
['Semaine 8', 81, 3, 3, 0, 64, 3, 14, 0],
['Semaine 9', 711, 22, 81, 3, 527, 9, 103, 10],
['Semaine 10', 139, 13, 26, 5, 104, 5, 9, 3],
['Semaine 11', 255, 12, 139, 2, 33, 4, 83, 6],
['Semaine 12', 256, 10, 23, 4, 15, 5, 218, 1],
['Semaine 13', 145, 26, 84, 7, 58, 16, 3, 3],
['Semaine 14', 112, 15, 51, 0, 34, 11, 27, 4],
['Semaine 15', 122, 27, 29, 8, 53, 14, 40, 5],
['Semaine 16', 98, 18, 17, 6, 31, 7, 50, 5],
['Semaine 17', 87, 21, 12, 6, 37, 3, 38, 12],
]);
var options = {
chart: {
title: 'Suivis hebdo',
subtitle: 'Pilotage',
},
bars: 'vertical',
isStacked: true,
height: 600,
series: {
2: {
targetAxisIndex: 1
},
3: {
targetAxisIndex: 1
},
4: {
targetAxisIndex: 2
},
5: {
targetAxisIndex: 2
},
6: {
targetAxisIndex: 3
},
7: {
targetAxisIndex: 3
}
},
vAxis: {
format: 'decimal',
viewWindow: {
min: 0,
max: 1000
}
},
vAxes: {
1: {
textStyle: {
color: 'none',
fontSize: 1
}
},
2: {
textStyle: {
color: 'none',
fontSize: 1
}
},
3: {
textStyle: {
color: 'none',
fontSize: 1
}
}
},
};
var chart = new google.charts.Bar(document.getElementById('chart_div'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
notes:
1) need to use the correct library, jsapi should no longer be used, instead use loader.js
this will only change the load statement, see above snippet...
2) you can use option vAxis to set the scale for all vAxes
3) it isn't necessary to move the first series to another targetAxisIndex

Google Charts Dashboard - "View" property on ChartWrapper not working

I'm trying to create a Google Charts dashboard with multiple charts all based on the same dataset. Different charts require different columns of the data, though, and every time I try to limit the columns in the ChartWrapper view, I get an error. Here's my code:
google.charts.load('current', {packages: ['corechart', 'bar', 'controls']});
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
var data = google.visualization.arrayToDataTable([
['Institution', 'Ineligible', 'Active', 'Closed With Outcome', 'Closed Outside Process', 'Closed Without Outcome',
'Eligibile'],
['CAC', 144, 35, 38, 4, 175, 115 ],
['SPF', 62, 2, 12, 1, 93, 4 ],
['CM', 69, 18, 10, 7, 64, 32 ],
['IP', 36, 4, 28, 24, 38, 62 ],
['EVM', 77, 7, 8, 2, 78, 19 ],
['RMC', 63, 5, 9, 1, 62, 18 ],
['MRI', 17, 5, 1, 5, 8, 3 ],
['IRM', 8, 0, 2, 1, 10, 5 ],
]);
var dashboard = new google.visualization.Dashboard(
document.getElementById('dashboard_div'));
var iamFilter = new google.visualization.ControlWrapper({
'controlType': 'CategoryFilter',
'containerId': 'iam_filter',
'options': {
'filterColumnLabel': 'IAM',
'ui': {
'caption': "Choose mechanisms",
'label': '',
'labelStacking': 'vertical',
'selectedValuesLayout': 'belowWrapping',
'cssClass': 'ChartControl',
}
},
});
var columnChart = new google.visualization.ChartWrapper({
'chartType': 'ColumnChart',
'containerId': 'id_outcomes',
'options': {
colors: ['#1b5869', '#42bb9a', '#bec3c7', '#9953b5', '#4c96da'],
animation: {
"startup": true,
duration: 1000,
easing: 'out',
},
legend: { position: 'right'},
bar: { groupWidth: '75%' },
isStacked: true,
},
'view': {'columns': [0,2,3]},
});
dashboard.bind(iamFilter, columnChart);
dashboard.draw(data);
}
In the above example, the error I get is:
Invalid column index 3. Should be an integer in the range [0-2].
But if I change it to 'view': {'columns': [0,2]}, the error I get is:
Invalid column index 2. Should be an integer in the range [0-1].
The view property works fine on the ControlWrapper, but I need it to work on the ChartWrapper, since a single ControlWrapper needs to filter data for multiple charts.
Any advice is much appreciated!

I was trouble bubble value in highcharts .How to show by default value in series

I was trouble bubble value in highcharts .How to show by default value in series
I want show by default value in bubble. when i was hovered in bubble showing series value but i want to show by default series value is this possible.?
https://jsfiddle.net/Kondaldurgam/q734jr5t/
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 0,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get('rgba')]
]
}
}
}, ]
});

Add plot options in chart with datalables
Fiddle link
plotOptions: {
bubble: {
dataLabels: {
enabled: true,
x:40,/*shifting values to right side*/
format: '({point.x},{point.y})<br>Size:{point.z}'
},
}
},

CategoryFilter as column selector

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...

Develop Reference

JavaScript is the programming language of the Web.

Google chart horizontal scrollbar - javascript

Related

Chartist.js chart artifact

Google chart multiple series with same scale

Google Charts Dashboard - "View" property on ChartWrapper not working

I was trouble bubble value in highcharts .How to show by default value in series

CategoryFilter as column selector

Categories

Resources