Multiple values per day for Serial Chart? (AmChart) - javascript

I have a set of data including possible multiple values for a day.
I would like to plot each single record on the chart to see their distribution.
I tried using serial charts but the problems are 1) many records are missing from the chart (not sure why), and 2) the cursor only hovers the first entry (see the very first Y value only first entry can be hovered.)
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"graphs": [{
"bullet": "round",
"valueField": "value",
"lineAlpha": 0
}],
"chartCursor": {
"zoomable": false,
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
},
"dataProvider": [{
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-27",
"value": 11
}, {
"date": "2012-07-27",
"value": 15
}, {
"date": "2012-07-27",
"value": 16
}, {
"date": "2012-07-27",
"value": 18
}, {
"date": "2012-08-27",
"value": 13
}, {
"date": "2012-08-02",
"value": 22
}, {
"date": "2012-08-03",
"value": 23
}, {
"date": "2012-08-04",
"value": 20
}, {
"date": "2012-08-05",
"value": 17
}, {
"date": "2012-08-06",
"value": 16
}, {
"date": "2012-08-07",
"value": 18
}, {
"date": "2012-08-08",
"value": 21
}, {
"date": "2012-08-09",
"value": 26
}, {
"date": "2012-08-10",
"value": 24
}, {
"date": "2012-08-11",
"value": 29
}, {
"date": "2012-08-12",
"value": 32
}, {
"date": "2012-08-13",
"value": 18
}, {
"date": "2012-08-14",
"value": 24
}, {
"date": "2012-08-15",
"value": 22
}, {
"date": "2012-08-16",
"value": 18
}, {
"date": "2012-08-17",
"value": 19
}, {
"date": "2012-08-18",
"value": 14
}, {
"date": "2012-08-19",
"value": 15
}, {
"date": "2012-08-20",
"value": 12
}]
}
);
Is there any workaround?
I also tried XY Chart, but it doesn't have the date support.
Thanks


There can be only one data item per unique date in amCharts.
You should combine data points into one, like:
{"date":"2012-08-27","value1":10,"value2":12,"value3":14}
and create a separate graph for each value field.


Here is the solution.Suddenly, someone will need
AmCharts.makeChart("chartdiv", {
categoryAxesSettings: {
minPeriod: "hh",//(at least that is not grouped)
groupToPeriods : ["DD", "WW","MM"]//(Data will be grouped by day,week and month)
}
});
more

Related

How to apply date filter between dates in amcharts

I'm using amcharts4 for my data visualization, using nodejs, mongodb, my problem is how can I filter my charts between dates, using from this date to this date. I'm having a hard time here, nobody is giving me any ideas on how to do this. Here is a sample demo using amcharts 3: https://www.amcharts.com/demos-v3/multiple-data-sets-v3/, any idea is appreciated, I need to finish this for my thesis please somebody give me any idea
initChart();
function initChart(){
// Themes begin
am4core.useTheme(am4themes_dark);
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [{
"date": "2012-09-08",
"value": 43
}, {
"date": "2012-09-09",
"value": 40
}, {
"date": "2012-09-10",
"value": 39
}, {
"date": "2012-09-11",
"value": 34
}, {
"date": "2012-09-12",
"value": 29
}, {
"date": "2012-09-13",
"value": 34
}, {
"date": "2012-09-14",
"value": 37
}, {
"date": "2012-09-15",
"value": 42
}, {
"date": "2012-09-16",
"value": 49
}, {
"date": "2012-09-17",
"value": 46
}, {
"date": "2012-09-18",
"value": 47
}, {
"date": "2012-09-19",
"value": 55
}, {
"date": "2012-09-20",
"value": 59
}, {
"date": "2012-09-21",
"value": 58
}, {
"date": "2012-09-22",
"value": 57
}, {
"date": "2012-09-23",
"value": 61
}, {
"date": "2012-09-24",
"value": 59
}, {
"date": "2012-09-25",
"value": 67
}, {
"date": "2012-09-26",
"value": 65
}, {
"date": "2012-09-27",
"value": 61
}, {
"date": "2012-09-28",
"value": 66
}, {
"date": "2012-09-29",
"value": 69
}, {
"date": "2012-09-30",
"value": 71
}, {
"date": "2012-10-01",
"value": 67
}, {
"date": "2012-10-02",
"value": 63
}, {
"date": "2012-10-03",
"value": 46
}, {
"date": "2012-10-04",
"value": 32
}, {
"date": "2012-10-05",
"value": 21
}, {
"date": "2012-10-06",
"value": 18
}, {
"date": "2012-10-07",
"value": 21
}, {
"date": "2012-10-08",
"value": 28
}, {
"date": "2012-10-09",
"value": 27
}, {
"date": "2012-10-10",
"value": 36
}, {
"date": "2012-10-11",
"value": 33
}, {
"date": "2012-10-12",
"value": 31
}, {
"date": "2012-10-13",
"value": 30
}, {
"date": "2012-10-14",
"value": 34
}, {
"date": "2012-10-15",
"value": 38
}, {
"date": "2012-10-16",
"value": 37
}, {
"date": "2012-10-17",
"value": 44
}, {
"date": "2012-10-18",
"value": 49
}, {
"date": "2012-10-19",
"value": 53
}, {
"date": "2012-10-20",
"value": 57
}, {
"date": "2012-10-21",
"value": 60
}, {
"date": "2012-10-22",
"value": 61
}, {
"date": "2012-10-23",
"value": 69
}, {
"date": "2012-10-24",
"value": 67
}, {
"date": "2012-10-25",
"value": 72
}, {
"date": "2012-10-26",
"value": 77
}, {
"date": "2012-10-27",
"value": 75
}, {
"date": "2012-10-28",
"value": 70
}, {
"date": "2012-10-29",
"value": 72
}, {
"date": "2012-10-30",
"value": 70
}];
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
dateAxis.renderer.grid.template.location = 0;
dateAxis.renderer.minGridDistance = 50;
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
series.strokeWidth = 3;
series.fillOpacity = 0.5;
// Add vertical scrollbar
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.marginLeft = 0;
// Add cursor
chart.cursor = new am4charts.XYCursor();
chart.cursor.behavior = "zoomY";
chart.cursor.lineX.disabled = true;
// Create a horizontal scrollbar with previe and place it underneath the date axis
chart.scrollbarX = new am4charts.XYChartScrollbar();
chart.scrollbarX.series.push(series);
chart.scrollbarX.parent = chart.bottomAxesContainer;
chart.events.on("ready", function () {
dateAxis.zoom({start:0.10, end:1});
});
}
body { background-color: #30303d; color: #fff; }
#chartdiv {
width: 100%;
height: 300px;
}
<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
<div id="chartdiv"></div>

You can filter by start and end date:
const startDate = new Date("2012-10-25");
const endDate = new Date("2012-10-30");
const data = [{
"date": "2012-10-21",
"value": 60
}, {
"date": "2012-10-22",
"value": 61
}, {
"date": "2012-10-23",
"value": 69
}, {
"date": "2012-10-24",
"value": 67
}, {
"date": "2012-10-25",
"value": 72
}, {
"date": "2012-10-26",
"value": 77
}, {
"date": "2012-10-27",
"value": 75
}, {
"date": "2012-10-28",
"value": 70
}, {
"date": "2012-10-29",
"value": 72
}, {
"date": "2012-10-30",
"value": 70
}]
const filteredData = data.filter(el => new Date(el.date).getTime() >= startDate.getTime() && new Date(el.date) <= endDate.getTime());
console.log(filteredData);

Add Y values as labels on a line chart, for some data points

I have a line chart, quite basic (see below for a simplified example that works on the Vega Editor). Basically, it draws lines, the X axis is successive dates, the Y axis is some numerical values.
I am trying to add labels for some of the data points on the line, with the value of Y at that point. Only for some of the data points, because some charts can be for over a year, so there can be hundreds of days (X values).
This is by the way how labels are put on the X axis automatically by Vega. If there are too many X values, it does not display every day, it says e.g. "Jan 1", then "Jan 8", then "Jan 15", etc. (nice one!)
Just for reference, with C3 (a charting library for D3), I used the following to draw one label out of every 7 data point:
data: {
json: data.data,
type: 'spline',
labels: {
format: function(v, id, i, j) {
if ( i % 7 === 3 ) {
return d3.format('.2f')(v);
}
}
...
Unfortunately, I have no idea where to start. I did not find any such example, and could not find anything related in the documentation.
Just for reference, here is an example chart to which I'd like to add these labels:
{
"$schema": "https://vega.github.io/schema/vega/v3.json",
"width": 500,
"height": 250,
"autosize": {
"type": "fit",
"resize": true
},
"data": [{
"name": "table",
"format": {
"parse": {
"date": "date",
"value": "number"
}
},
"values": [
{ "date": "2017-09-01", "value": "12.34", "what": "one" },
{ "date": "2017-09-01", "value": "4.34", "what": "two" },
{ "date": "2017-09-02", "value": "13.34", "what": "one" },
{ "date": "2017-09-02", "value": "13.34", "what": "two" },
{ "date": "2017-09-03", "value": "4.34", "what": "one" },
{ "date": "2017-09-03", "value": "15.34", "what": "two" },
{ "date": "2017-09-04", "value": "15.34", "what": "one" },
{ "date": "2017-09-04", "value": "5.34", "what": "two" },
{ "date": "2017-09-05", "value": "16.34", "what": "one" },
{ "date": "2017-09-05", "value": "6.34", "what": "two" },
{ "date": "2017-09-06", "value": "17.34", "what": "one" },
{ "date": "2017-09-06", "value": "17.34", "what": "two" },
{ "date": "2017-09-07", "value": "18.34", "what": "one" },
{ "date": "2017-09-07", "value": "8.34", "what": "two" },
{ "date": "2017-09-08", "value": "18.34", "what": "one" },
{ "date": "2017-09-08", "value": "14.34", "what": "two" },
{ "date": "2017-09-09", "value": "9.34", "what": "one" },
{ "date": "2017-09-09", "value": "14.34", "what": "two" },
{ "date": "2017-09-10", "value": "20.34", "what": "one" },
{ "date": "2017-09-10", "value": "4.34", "what": "two" }
]
}],
"scales": [{
"name": "x",
"type": "utc",
"range": "width",
"domain": {"data": "table", "field": "date"}
}, {
"name": "y",
"type": "linear",
"range": "height",
"nice": true,
"zero": true,
"domain": {"data": "table", "field": "value"}
}, {
"name": "color",
"type": "ordinal",
"range": "category",
"domain": {"data": "table", "field": "what"}
}],
"axes": [{
"orient": "bottom",
"scale": "x",
"encode": {
"labels": {
"interactive": true,
"update": {
"fill": {"value": "steelblue"},
"angle": {"value": 50},
"fontSize": {"value": 14},
"align": {"value": "left"},
"baseline": {"value": "middle"},
"dx": {"value": 3}
},
"hover": {
"fill": {"value": "firebrick"}
}}}
}, {
"orient": "left",
"scale": "y"
}],
"marks": [{
"type": "group",
"from": {
"facet": {
"name": "series",
"data": "table",
"groupby": "what"
}
},
"marks": [{
"type": "line",
"from": {"data": "series"},
"encode": {
"enter": {
"x": {"scale": "x", "field": "date"},
"y": {"scale": "y", "field": "value"},
"stroke": {"scale": "color", "field": "what"},
"strokeWidth": {"value": 2}
},
"update": {
"interpolate": {"value": "monotone"},
"fillOpacity": {"value": 1}
},
"hover": {
"fillOpacity": {"value": 0.5}
}
}
}]
}]
}

Vega has a property called tickCount that can be added to your axes definitions. Adding this to your y-axis must solve your case:
{
"orient": "left",
"scale": "y",
"tickCount": 4
}
You could use a signal as well if it should be dynamic.
The feature is even more powerful than illustrated. Go check out the docs for other options in below link:
https://vega.github.io/vega/docs/axes/

How can I change color of StockEvent baloon's border [AmCharts v3]

Is is possible to change color of StockEvent balloon (hint) border? It's always red. I can't find any suitable option. Please see my current solution http://jsfiddle.net/a04j0hqv/4/
There is of course possibility to change AmBalloon border of value hint but it seems to be impossible to change it to StockEvent.
var amChartsData = [{"date":"2017-03-01","value":"126.510000"},{"date":"2017-03-02","value":"126.420000"},{"date":"2017-03-03","value":"126.480000"},{"date":"2017-03-06","value":"126.400000"},{"date":"2017-03-07","value":"126.650000"},{"date":"2017-03-08","value":"126.370000"},{"date":"2017-03-09","value":"126.480000"},{"date":"2017-03-10","value":"120.720000"},{"date":"2017-03-13","value":"121.420000"},{"date":"2017-03-14","value":"121.420000"},{"date":"2017-03-15","value":"121.700000"},{"date":"2017-03-16","value":"122.410000"},{"date":"2017-03-17","value":"122.530000"},{"date":"2017-03-20","value":"122.260000"},{"date":"2017-03-21","value":"121.540000"},{"date":"2017-03-22","value":"121.250000"},{"date":"2017-03-23","value":"121.690000"},{"date":"2017-03-24","value":"121.950000"},{"date":"2017-03-27","value":"121.390000"},{"date":"2017-03-28","value":"122.330000"},{"date":"2017-03-29","value":"122.840000"},{"date":"2017-03-30","value":"122.670000"},{"date":"2017-03-31","value":"122.840000"},{"date":"2017-04-03","value":"122.760000"},{"date":"2017-04-04","value":"123.070000"},{"date":"2017-04-05","value":"123.930000"},{"date":"2017-04-06","value":"124.130000"},{"date":"2017-04-07","value":"124.580000"},{"date":"2017-04-10","value":"124.310000"},{"date":"2017-04-11","value":"123.870000"},{"date":"2017-04-12","value":"123.530000"},{"date":"2017-04-13","value":"123.470000"},{"date":"2017-04-14","value":"123.470000"},{"date":"2017-04-18","value":"123.000000"},{"date":"2017-04-19","value":"122.660000"},{"date":"2017-04-20","value":"122.940000"},{"date":"2017-04-21","value":"122.610000"},{"date":"2017-04-24","value":"124.010000"},{"date":"2017-04-25","value":"124.280000"},{"date":"2017-04-26","value":"124.460000"}];
function parseDate(dateString) {
var dateArray = dateString.split("-");
if(dateArray.lenght < 2) { alert(dateString); }
var date = new Date(Number(dateArray[0]), Number(dateArray[1]) - 1, Number(dateArray[2]), 0, 0, 0);
return date;
}
for (var j in amChartsData) {
amChartsData[j].date = parseDate(amChartsData[j].date);
}
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"theme": "light",
"dataSets": [ {
"color": "#006EBE",
"fieldMappings": [ {
"fromField": "value",
"toField": "value"
} ],
"dataProvider": amChartsData,
"categoryField": "date",
// EVENTS
"stockEvents": [{
"date": new Date( 2017, 3, 6 ),
"type": "sign",
"rollOverColor": "#EF9463",
"borderColor": "#EF9463",
"backgroundColor": "#ffffff",
"graph": "g1",
"description": "Lorem Ipsum ...",
}]
} ],
"panels": [ {
"title": "Value",
"stockGraphs": [ {
"id": "g1",
"valueField": "value"
} ]
} ],
"chartScrollbarSettings": {
"graph": "g1"
},
"chartCursorSettings": {
"pan": true,
"cursorColor": "#006EBE",
"valueBalloonsEnabled": true,
"valueLineAlpha": 0.5,
},
"balloon": {
"shadowAlpha": 0,
"borderThickness": 1,
"adjustBorderColor": true,
"cornerRadius": 5,
"fillColor": "#FFFFFF"
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 10,
"date": "10 days"
}, {
"period": "MM",
"count": 1,
"date": "1 month"
}, {
"period": "YYYY",
"count": 1,
"date": "1 year"
}, {
"period": "YTD",
"date": "YTD"
}, {
"period": "MAX",
"date": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
}
} );

You can change all stock events' balloon color by setting the balloonColor property in stockEventsSettings:
"stockEventsSettings": {
"balloonColor": "#008800"
}
Unfortunately you can't individually set the border for each different event.
Here's an updated fiddle with the balloon set to green.

Amcharts guides

When I add the guides into valueAxesSettings but it doesn't work even I choose valueAxesSettings into valueAxes.
Furthermore, what the difference between valueAxesSettings and valueAxes, as the reference said If you change a property after the chart is initialized, you should call stockChart.validateNow() method in order for it to work.? what does it mean?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>My first stock chart</title>
<link rel="stylesheet" href="amcharts/style.css" type="text/css">
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<style>
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
</style>
<script type="text/javascript">
AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [ {
"dataProvider": [ {
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
} ],
"fieldMappings": [ {
"fromField": "val",
"toField": "value"
} ],
"categoryField": "date"
} ],
"panels": [ {
"legend": {},
"stockGraphs": [ {
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
} ]
} ],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": {
"value": 10,
"tovalue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true,
}
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
</script>
</head>
<body>
<div id="chartdiv"></div>
</body>
</html>

valueAxesSettings is a global version of valueAxes - anything you set in valueAxesSettings will be applied to all stock panels' valueAxes objects. If you want to override or set a specific setting in one of your panels' valueAxes, you can set a valueAxes inside the panel:
"panels": [{
"valueAxes":[{
//settings specific to this panel
}],
// ...
}, {
"valueAxes": [{
//settings specific to this panel
}]
}
The guides property is an array. You're setting it as a single object, which is incorrect. Also, the property is called toValue, not "tovalue" - the casing is important. Here's the corrected valueAxesSettings object:
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
Demo:
AmCharts.makeChart("chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [{
"dataProvider": [{
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
}],
"fieldMappings": [{
"fromField": "val",
"toField": "value"
}],
"categoryField": "date"
}],
"panels": [{
"valueAxes": [{
}],
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "value",
"type": "line",
"title": "MyGraph",
"fillAlphas": 0
}]
}],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 13,
"guides": [{
"value": 10,
"toValue": 12,
"lineColor": "#CC0000",
"lineAlpha": 1,
"fillAlpha": 0.2,
"fillColor": "#CC0000",
"dashLength": 2,
"inside": true
}]
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line",
"position": "bottom"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [{
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
}]
}
});
#chartdiv {
width: 100%;
height: 500px;
font-size: 11px;
}
<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>
<script src="//www.amcharts.com/lib/3/amstock.js"></script>
<div id="chartdiv"></div>
Regarding validateNow, if you change a property in your stock chart object, you need to call validateNow to redraw the chart with your new settings. validateData is primarily used when you make changes to your dataSets/dataProvider.

How to parse JSON from Gmail API using JavaScript?

Using JavaScript, how do I extract the Date, To, From, Subject and Text fields from the Gmail API's return (see below)?
It's not in the usual name-value pair, at least not how I would do it with JSON. Also, the text needs to be decoded.
{
"id": "rthrt34t34t45g45g4",
"threadId": "gg54tgw4y45t24f3f",
"labelIds": [
"SENT"
],
"snippet": "Testing 1 2 3",
"historyId": "2344",
"payload": {
"mimeType": "multipart/alternative",
"filename": "",
"headers": [
{
"name": "MIME-Version",
"value": "1.0"
},
{
"name": "Received",
"value": "by 101.64.82.199 with HTTP; Wed, 18 Feb 2015 21:34:49 -0800 (PST)"
},
{
"name": "Date",
"value": "Thu, 19 Feb 2015 12:34:49 +0700"
},
{
"name": "Delivered-To",
"value": "test#test.org"
},
{
"name": "Message-ID",
"value": "<retert-_RKS0Vc-U6-V8dSma5=ertertertertf2e#mail.gmail.com>"
},
{
"name": "Subject",
"value": "testing 123"
},
{
"name": "From",
"value": "A Test <test#test.org>"
},
{
"name": "To",
"value": "test.test#test.com"
},
{
"name": "Content-Type",
"value": "multipart/alternative; boundary=egrreg34t34"
}
],
"body": {
"size": 0
},
"parts": [
{
"partId": "0",
"mimeType": "text/plain",
"filename": "",
"headers": [
{
"name": "Content-Type",
"value": "text/plain; charset=UTF-8"
}
],
"body": {
"size": 8,
"data": "MTIzNDU2DQo="
}
},
{
"partId": "1",
"mimeType": "text/html",
"filename": "",
"headers": [
{
"name": "Content-Type",
"value": "text/html; charset=UTF-8"
}
],
"body": {
"size": 29,
"data": "PGRpdiBkaXI9Imx0ciI-MTIzNDU2PC9kaXY-DQo="
}
}
]
},
"sizeEstimate": 651
}

Surfing on the Internet I have found this class which describes a Generic GMail Message. You might use this to easily parse the JSON (by using any of the wide range of provided libraries).

you can use e.g. filter function as follows:
var extractField = function(json, fieldName) {
return json.payload.headers.filter(function(header) {
return header.name === fieldName;
})[0];
};
var date = extractField(response, "Date");
var subject = extractField(response, "Subject");
Does this help?

Categories