We Keep Coding

I want google line chart x axis to shift after 1000 data

I want the x-axis of google line chart to shift after 1000 data. Since I am a beginner in javascript, I was able to do this much.
i will use this code to read sensor on raspberry pi.
<script>
google.charts.load("current", { packages: ["corechart", "line"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
let data = google.visualization.arrayToDataTable([
["Year", "CPU Usage"],
[0, 0],
]);
let options = {
width: 1000,
height: 500,
legend: "top",
};
let chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(data, options);
let index = 0;
setInterval(function () {
var jsonData = $.ajax({
type: "GET",
dataType: "json",
url: "HTTP://192.168.1.7:8000/",
async: false,
}).responseJSON;
let random_1 = jsonData["d7s_si"];
data.addRow([index, random_1]);
chart.draw(data, options);
index++;
}, 100);
}
</script>

Google Charts API - how to turn my x-axis labels into Date Format and then group by month on some button click

My JSON array, which I'm getting by ajax response, looks like that:
[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0]...etc
So, everythings works fine, my X-axis labels looks good, but I can't understand how can I:
1) make them in date format for Google Chart understand that this is date and
2) group them by month by clicking some button
All problems come from my way of Google Charts implementing.
Here's the code.
function drawChart() {
var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
data = google.visualization.arrayToDataTable($.parseJSON(obj));
var options = {
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
chartArea:{left:40,top:40,width:"85%"},
hAxis: {
format: 'MM'
},
vAxes: {
0: {},
1: {title: 'Cумма'},
},
series: {0: {targetAxisIndex:0},
1:{targetAxisIndex:0},
2:{targetAxisIndex:1},
3:{targetAxisIndex:1},
},
animation:{
duration: 750,
// easing: 'out',
startup: true
},
backgroundColor: 'aliceblue'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
chart.draw(data, options);
}
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.google.com/jsapi?ext.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div" style="width: 100%; height: 400px;"></div>

1) for google to recognize the first column as a date, need to use the following format in the json...
"Date(year, month, day, hours, minutes, days, seconds, milliseconds)"
e.g.
["Date(2017, 1, 18)",0,0,0,0],["Date(2017, 1, 19)",1,0,0,0],
month is zero-based --> 1 = Feb
or, you can use a view and a calculated column to convert, see snippet...
2) use the group() method to group by month
see following working snippet...
function drawChart() {
var obj ='[["\u041f\u0435\u0440\u0438\u043e\u0434","\u041a\u043b\u0438\u0435\u043d\u0442\u044b","\u0421\u0434\u0435\u043b\u043a\u0438","\u0421\u0443\u043c\u043c\u0430 \u0441\u0434\u0435\u043b\u043e\u043a","\u041e\u043f\u043b\u0430\u0447\u0435\u043d\u043d\u044b\u0435 \u0441\u0434\u0435\u043b\u043a\u0438"],["2017-02-18",0,0,0,0],["2017-02-19",1,0,0,0],["2017-02-20",2,0,0,0],["2017-02-21",4,1,64000,0],["2017-02-22",0,0,0,0],["2017-02-23",3,0,0,0],["2017-02-24",1,0,0,0],["2017-02-25",0,0,0,0],["2017-02-26",2,0,0,0],["2017-02-27",1,1,50000,0],["2017-02-28",1,0,0,0],["2017-03-01",0,0,0,0],["2017-03-02",6,0,0,0],["2017-03-03",2,0,0,0],["2017-03-04",1,0,0,0],["2017-03-05",1,0,0,0],["2017-03-06",10,0,0,0],["2017-03-07",1,0,0,0],["2017-03-08",1,0,0,0],["2017-03-09",0,0,0,0],["2017-03-10",9,0,0,0],["2017-03-11",0,0,0,0],["2017-03-12",3,0,0,0],["2017-03-13",3,0,0,0],["2017-03-14",1,0,0,0],["2017-03-15",6,0,0,0],["2017-03-16",1,0,0,0],["2017-03-17",1,0,0,0],["2017-03-18",0,0,0,0],["2017-03-19",5,0,0,0],["2017-03-20",5,0,0,0]]';
var data = google.visualization.arrayToDataTable($.parseJSON(obj));
// create date formatter
var formatDate = new google.visualization.DateFormat({
pattern: 'MM'
});
// create view with calculated column
var view = new google.visualization.DataView(data);
view.setColumns([
// col 0 - x
{
label: 'date',
type: 'date',
calc: function (dt, row) {
return new Date(dt.getValue(row, 0))
}
},
// col 1 - y
1
]);
// group by month
var groupData = google.visualization.data.group(
// data table
view,
// group by fields
[{column: 0, type: 'string', modifier: function (xValue) {
return formatDate.formatValue(new Date(xValue));
}}],
// aggregate fields
[
{
aggregation: google.visualization.data.sum,
column: 1,
label: 'Total',
type: 'number'
}
]
);
var options = {
crosshair: {
trigger: 'both',
orientation: 'vertical'
},
focusTarget: 'category',
chartArea:{left:40,top:40,width:"85%"},
hAxis: {
format: 'MM'
},
vAxes: {
0: {},
1: {title: 'C????'},
},
series: {0: {targetAxisIndex:0},
1:{targetAxisIndex:0},
2:{targetAxisIndex:1},
3:{targetAxisIndex:1},
},
animation:{
duration: 750,
easing: 'inAndOut',
startup: true
},
backgroundColor: 'aliceblue'
};
var chart = new google.visualization.LineChart(
document.getElementById('chart_div')
);
// draw grouped data
chart.draw(groupData, options);
}
google.charts.load('current', {
callback: function () {
drawChart();
window.addEventListener('resize', drawChart, false);
},
packages:['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="chart_div"></div>

Google chart api explorer vs. selecthandler

I have problem with using Google.charts api... i have chart drawing function like this:
function columnDraw(sectionname) {
var data = google.visualization.arrayToDataTable(array);
var view = new google.visualization.DataView(data);
var options = {
title: "Activity of users",
bar: {groupWidth: "100%"},
legend: {position: "top"},
height: 300,
// explorer: {
//maxZoomOut:0
//maxZoomIn: 50,
// keepInBounds: true,
// axis: 'horizontal'
// },
hAxis: {
title: 'Amount of activity',
minValue : 0,
format: '0'
},
vAxis: {
title: 'Amount of users',
minValue : 0,
format: '0'
}
};
var chart = new google.visualization.ColumnChart(document.getElementById(sectionname));
function selectHandler() {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
document.getElementById("input0").value = data.getValue(selectedItem.row, 0);
}
}
google.visualization.events.addListener(chart, 'select', selectHandler);
chart.draw(view, options);
}
I want to choose parts of chartcolumn by cklicing on them, but i have a problem with zooming. This code works but once I uncomment the explorer part, selectHandler function wont work properly. Can anyone tell me whats wrong with it?

You're missing a ","
maxZoomOut:0,

Google Line Chart Customization

I have these line charts here with real time data from an arduino.
What i want to do is to make the first graph (Temperature) better looking. I want to have always some gaps from the top and bottom (Like humidity) and i want to increase the width of the Y Axis of temperature. Is this possible ?
Both charts has run with exactly the same settings:
function drawTemperature() {
$.ajax({
url: 'http://192.168.1.3/Charts/chart_temperature.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
var options = {
'title': 'Temperature',
'width': 1200,
'height': 600
//'legend.alignment' : 'start',
//'hAxis.baseline' : 5,
//'chartArea.top' : 20,
//'chartArea.left' : 500
//'focusTarget' : 'category'
//'animation.easing' : 'inAndOut'
//colors:['blue','#004411'],
//'hAxis.maxValue' : 30,
//'hAxis.showTextEvery' : 0.1,
//'hAxis.logScale' : 'true',
//'hAxis.gridlines.color' : '#00CC00',
//'hAxis.maxAlternation' : 10,
//'hAxis.viewWindow.max' : 10
//'curveType': 'function'
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_temperature'));
chart.draw(data, options);
}
});
}
function drawHumidity() {
$.ajax({
url: 'http://192.168.1.3/Charts/chart_humidity.php',
dataType: 'json',
success: function (jsonData) {
// Create our data table out of JSON data loaded from server.
var data = new google.visualization.DataTable(jsonData);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_humidity'));
chart.draw(data, {width: 1200, height: 600});
}
});
}
function drawVisualization() {
drawTemperature();
drawHumidity();
}

You can create "gaps" at the top and bottom of you chart by setting the vAxis.minValue and vAxis.maxValue options to values less than the minimum and maximum (respectively) of your chart's data. Here's one way you might do this:
var range = data.getColumnRange(1);
var options = {
title: 'Temperature',
width: 1200,
height: 600,
vAxis: {
minValue: range.min - 1,
maxValue: range.max + 1
}
};

Google chart values on X axis not showing properly

I have two charts, they are being created by javascript the same exact way, one of them shows the values on x axis properly, the other doesn't.
So this is the traffic chart
As you can see the dates are shown properly under x axis, here is the code that generates this chart
function drawTrafficChart(processedData, humanReadableName, params) {
dataArray = [];
dataArrayRow = ['Date', 'Impressions', 'Detail Page Views'];
dataArray.push(dataArrayRow);
for (i in processedData) {
dateString = processedData[i].date;
dateString = formatDateStringAccordingToAggregationType(dateString, params);
dataArrayRow = [dateString, processedData[i].event1, processedData[i].event2];
dataArray.push(dataArrayRow);
}
var dataTable = google.visualization.arrayToDataTable(dataArray);
var chartOptions = {
title: 'Traffic Chart',
hAxis: {title: humanReadableName},
vAxis: {minValuex: 0},
pointSize: 5,
width: 670,
height: 300
};
var chart = new google.visualization.LineChart(document.getElementById('traffic_chart'));
chart.draw(dataTable, chartOptions);
}
And this is the click chart
Here is the code that generates click chart
function drawClickChart(processedData, humanReadableName, params) {
dataArray = [];
dataArrayRow = ['Date', 'Website Clicks', 'Image Clicks', 'Video Clicks'];
dataArray.push(dataArrayRow);
for (i in processedData) {
dateString = processedData[i].date;
dateString = formatDateStringAccordingToAggregationType(dateString, params);
dataArrayRow = [dateString, processedData[i].event3, processedData[i].event4, processedData[i].event5];
dataArray.push(dataArrayRow);
}
var dataTable = google.visualization.arrayToDataTable(dataArray);
var chartOptions = {
title: 'Click Chart',
hAxis: {title: humanReadableName},
vAxis: {minValuex: 0},
pointSize: 5,
width: 670,
height: 300
};
var chart = new google.visualization.LineChart(document.getElementById('click_chart'));
chart.draw(dataTable, chartOptions);
}
As you can see the dates on x axis are messed up, is there something I could do to fix this?