Amcharts refresh or validate data every seconds

Amcharts refresh or validate data every seconds - javascript

I'm using amcharts4 for my data visualization,and I need to validate my data every seconds, my problem here is that it keeps refreshing the whole chart not the data. I used amcharts3 and I tried this method but there is no problem. Is there any way to refresh and validate the data and not the whole chart?
setInterval(function() {
refresh();
}, 1000);
function refresh(){
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [ {
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-28",
"value": 11
}, {
"date": "2012-07-29",
"value": 15
}, {
"date": "2012-07-30",
"value": 16
}, {
"date": "2012-07-31",
"value": 18
}, {
"date": "2012-08-01",
"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
}, {
"date": "2012-08-21",
"value": 8
}, {
"date": "2012-08-22",
"value": 9
}, {
"date": "2012-08-23",
"value": 8
}, {
"date": "2012-08-24",
"value": 7
}, {
"date": "2012-08-25",
"value": 5
}, {
"date": "2012-08-26",
"value": 11
}, {
"date": "2012-08-27",
"value": 13
}, {
"date": "2012-08-28",
"value": 18
}, {
"date": "2012-08-29",
"value": 20
}, {
"date": "2012-08-30",
"value": 29
}, {
"date": "2012-08-31",
"value": 33
}, {
"date": "2012-09-01",
"value": 42
}, {
"date": "2012-09-02",
"value": 35
}, {
"date": "2012-09-03",
"value": 31
}, {
"date": "2012-09-04",
"value": 47
}, {
"date": "2012-09-05",
"value": 52
}, {
"date": "2012-09-06",
"value": 46
}, {
"date": "2012-09-07",
"value": 41
}, {
"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
}, {
"date": "2012-10-31",
"value": 72
}, {
"date": "2012-11-01",
"value": 73
}, {
"date": "2012-11-02",
"value": 67
}, {
"date": "2012-11-03",
"value": 68
}, {
"date": "2012-11-04",
"value": 65
}, {
"date": "2012-11-05",
"value": 71
}, {
"date": "2012-11-06",
"value": 75
}, {
"date": "2012-11-07",
"value": 74
}, {
"date": "2012-11-08",
"value": 71
}, {
"date": "2012-11-09",
"value": 76
}, {
"date": "2012-11-10",
"value": 77
}, {
"date": "2012-11-11",
"value": 81
}, {
"date": "2012-11-12",
"value": 83
}, {
"date": "2012-11-13",
"value": 80
}, {
"date": "2012-11-14",
"value": 81
}, {
"date": "2012-11-15",
"value": 87
}, {
"date": "2012-11-16",
"value": 82
}, {
"date": "2012-11-17",
"value": 86
}, {
"date": "2012-11-18",
"value": 80
}, {
"date": "2012-11-19",
"value": 87
}, {
"date": "2012-11-20",
"value": 83
}, {
"date": "2012-11-21",
"value": 85
}, {
"date": "2012-11-22",
"value": 84
}, {
"date": "2012-11-23",
"value": 82
}, {
"date": "2012-11-24",
"value": 73
}, {
"date": "2012-11-25",
"value": 71
}, {
"date": "2012-11-26",
"value": 75
}, {
"date": "2012-11-27",
"value": 79
}, {
"date": "2012-11-28",
"value": 70
}, {
"date": "2012-11-29",
"value": 73
}, {
"date": "2012-11-30",
"value": 61
}, {
"date": "2012-12-01",
"value": 62
}, {
"date": "2012-12-02",
"value": 66
}, {
"date": "2012-12-03",
"value": 65
}, {
"date": "2012-12-04",
"value": 73
}, {
"date": "2012-12-05",
"value": 79
}, {
"date": "2012-12-06",
"value": 78
}, {
"date": "2012-12-07",
"value": 78
}, {
"date": "2012-12-08",
"value": 78
}, {
"date": "2012-12-09",
"value": 74
}, {
"date": "2012-12-10",
"value": 73
}, {
"date": "2012-12-11",
"value": 75
}, {
"date": "2012-12-12",
"value": 70
}, {
"date": "2012-12-13",
"value": 77
}, {
"date": "2012-12-14",
"value": 67
}, {
"date": "2012-12-15",
"value": 62
}, {
"date": "2012-12-16",
"value": 64
}, {
"date": "2012-12-17",
"value": 61
}, {
"date": "2012-12-18",
"value": 59
}, {
"date": "2012-12-19",
"value": 53
}, {
"date": "2012-12-20",
"value": 54
}, {
"date": "2012-12-21",
"value": 56
}, {
"date": "2012-12-22",
"value": 59
}, {
"date": "2012-12-23",
"value": 58
}, {
"date": "2012-12-24",
"value": 55
}, {
"date": "2012-12-25",
"value": 52
}, {
"date": "2012-12-26",
"value": 54
}, {
"date": "2012-12-27",
"value": 50
}, {
"date": "2012-12-28",
"value": 50
}, {
"date": "2012-12-29",
"value": 51
}, {
"date": "2012-12-30",
"value": 52
}, {
"date": "2012-12-31",
"value": 58
}, {
"date": "2013-01-01",
"value": 60
}, {
"date": "2013-01-02",
"value": 67
}, {
"date": "2013-01-03",
"value": 64
}, {
"date": "2013-01-04",
"value": 66
}, {
"date": "2013-01-05",
"value": 60
}, {
"date": "2013-01-06",
"value": 63
}, {
"date": "2013-01-07",
"value": 61
}, {
"date": "2013-01-08",
"value": 60
}, {
"date": "2013-01-09",
"value": 65
}, {
"date": "2013-01-10",
"value": 75
}, {
"date": "2013-01-11",
"value": 77
}, {
"date": "2013-01-12",
"value": 78
}, {
"date": "2013-01-13",
"value": 70
}, {
"date": "2013-01-14",
"value": 70
}, {
"date": "2013-01-15",
"value": 73
}, {
"date": "2013-01-16",
"value": 71
}, {
"date": "2013-01-17",
"value": 74
}, {
"date": "2013-01-18",
"value": 78
}, {
"date": "2013-01-19",
"value": 85
}, {
"date": "2013-01-20",
"value": 82
}, {
"date": "2013-01-21",
"value": 83
}, {
"date": "2013-01-22",
"value": 88
}, {
"date": "2013-01-23",
"value": 85
}, {
"date": "2013-01-24",
"value": 85
}, {
"date": "2013-01-25",
"value": 80
}, {
"date": "2013-01-26",
"value": 87
}, {
"date": "2013-01-27",
"value": 84
}, {
"date": "2013-01-28",
"value": 83
}, {
"date": "2013-01-29",
"value": 84
}, {
"date": "2013-01-30",
"value": 81
} ];
// 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;
}
#chartdiv {
width: 100%;
height: 500px;
}
<!-- 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>
<div id="chartdiv"></div>
Here is my correct code for rendering my chart but not real time
//get data from database every 2secs
$interval(function () {
Blooddonation.donationAdmin().then(function(data) {
app.date = data.data.date; //store the items here
});
}, 2000);
//initialize chart
function initChart() {
var data = [];
for(let key in app.date) {
data.push({
"date": app.date[key]._id,
"value": app.date[key].count
});
}
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "value";
series.dataFields.dateX = "date";
}
Here is my items from data.data.date:
[ { _id: '2018-12-01', count: 1 },
{ _id: '2018-12-09', count: 2 },
{ _id: '2018-12-15', count: 3 },
{ _id: '2018-12-30', count: 5 },
{ _id: '2019-01-10', count: 2 },
{ _id: '2019-01-21', count: 3 } ]

I would recommend you to check the dynamic updates section in the documentaion.
Your chart creation is encapsulated in the refresh function. That means if will try to draw the chart every time refresh is called. Instead you need to instantiate the chart once and only update the data using the addData method:
chart.addData(dataItem, 1);
Based on your updated code, you could try something like shown below assuming app exists in the context:
chart.events.on('ready', function (e) {
$interval(function () {
Blooddonation.donationAdmin().then(function(data) {
app.date = data.data.date; //store the items here
e.target.addData(app.date.map(function (item) {
return {
date: item._id,
value: item.count
};
}), app.date.length - 1);
});
}, 2000);
});
Check the updated example below:
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("chartdiv", am4charts.XYChart);
// Add data
chart.data = [ {
"date": "2012-07-27",
"value": 13
}, {
"date": "2012-07-28",
"value": 11
}, {
"date": "2012-07-29",
"value": 15
}, {
"date": "2012-07-30",
"value": 16
}, {
"date": "2012-07-31",
"value": 18
}, {
"date": "2012-08-01",
"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
}, {
"date": "2012-08-21",
"value": 8
}, {
"date": "2012-08-22",
"value": 9
}, {
"date": "2012-08-23",
"value": 8
}, {
"date": "2012-08-24",
"value": 7
}, {
"date": "2012-08-25",
"value": 5
}, {
"date": "2012-08-26",
"value": 11
}, {
"date": "2012-08-27",
"value": 13
}, {
"date": "2012-08-28",
"value": 18
}, {
"date": "2012-08-29",
"value": 20
}, {
"date": "2012-08-30",
"value": 29
}, {
"date": "2012-08-31",
"value": 33
}, {
"date": "2012-09-01",
"value": 42
}, {
"date": "2012-09-02",
"value": 35
}, {
"date": "2012-09-03",
"value": 31
}, {
"date": "2012-09-04",
"value": 47
}, {
"date": "2012-09-05",
"value": 52
}, {
"date": "2012-09-06",
"value": 46
}, {
"date": "2012-09-07",
"value": 41
}, {
"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
}, {
"date": "2012-10-31",
"value": 72
}, {
"date": "2012-11-01",
"value": 73
}, {
"date": "2012-11-02",
"value": 67
}, {
"date": "2012-11-03",
"value": 68
}, {
"date": "2012-11-04",
"value": 65
}, {
"date": "2012-11-05",
"value": 71
}, {
"date": "2012-11-06",
"value": 75
}, {
"date": "2012-11-07",
"value": 74
}, {
"date": "2012-11-08",
"value": 71
}, {
"date": "2012-11-09",
"value": 76
}, {
"date": "2012-11-10",
"value": 77
}, {
"date": "2012-11-11",
"value": 81
}, {
"date": "2012-11-12",
"value": 83
}, {
"date": "2012-11-13",
"value": 80
}, {
"date": "2012-11-14",
"value": 81
}, {
"date": "2012-11-15",
"value": 87
}, {
"date": "2012-11-16",
"value": 82
}, {
"date": "2012-11-17",
"value": 86
}, {
"date": "2012-11-18",
"value": 80
}, {
"date": "2012-11-19",
"value": 87
}, {
"date": "2012-11-20",
"value": 83
}, {
"date": "2012-11-21",
"value": 85
}, {
"date": "2012-11-22",
"value": 84
}, {
"date": "2012-11-23",
"value": 82
}, {
"date": "2012-11-24",
"value": 73
}, {
"date": "2012-11-25",
"value": 71
}, {
"date": "2012-11-26",
"value": 75
}, {
"date": "2012-11-27",
"value": 79
}, {
"date": "2012-11-28",
"value": 70
}, {
"date": "2012-11-29",
"value": 73
}, {
"date": "2012-11-30",
"value": 61
}, {
"date": "2012-12-01",
"value": 62
}, {
"date": "2012-12-02",
"value": 66
}, {
"date": "2012-12-03",
"value": 65
}, {
"date": "2012-12-04",
"value": 73
}, {
"date": "2012-12-05",
"value": 79
}, {
"date": "2012-12-06",
"value": 78
}, {
"date": "2012-12-07",
"value": 78
}, {
"date": "2012-12-08",
"value": 78
}, {
"date": "2012-12-09",
"value": 74
}, {
"date": "2012-12-10",
"value": 73
}, {
"date": "2012-12-11",
"value": 75
}, {
"date": "2012-12-12",
"value": 70
}, {
"date": "2012-12-13",
"value": 77
}, {
"date": "2012-12-14",
"value": 67
}, {
"date": "2012-12-15",
"value": 62
}, {
"date": "2012-12-16",
"value": 64
}, {
"date": "2012-12-17",
"value": 61
}, {
"date": "2012-12-18",
"value": 59
}, {
"date": "2012-12-19",
"value": 53
}, {
"date": "2012-12-20",
"value": 54
}, {
"date": "2012-12-21",
"value": 56
}, {
"date": "2012-12-22",
"value": 59
}, {
"date": "2012-12-23",
"value": 58
}, {
"date": "2012-12-24",
"value": 55
}, {
"date": "2012-12-25",
"value": 52
}, {
"date": "2012-12-26",
"value": 54
}, {
"date": "2012-12-27",
"value": 50
}, {
"date": "2012-12-28",
"value": 50
}, {
"date": "2012-12-29",
"value": 51
}, {
"date": "2012-12-30",
"value": 52
}, {
"date": "2012-12-31",
"value": 58
}, {
"date": "2013-01-01",
"value": 60
}, {
"date": "2013-01-02",
"value": 67
}, {
"date": "2013-01-03",
"value": 64
}, {
"date": "2013-01-04",
"value": 66
}, {
"date": "2013-01-05",
"value": 60
}, {
"date": "2013-01-06",
"value": 63
}, {
"date": "2013-01-07",
"value": 61
}, {
"date": "2013-01-08",
"value": 60
}, {
"date": "2013-01-09",
"value": 65
}, {
"date": "2013-01-10",
"value": 75
}, {
"date": "2013-01-11",
"value": 77
}, {
"date": "2013-01-12",
"value": 78
}, {
"date": "2013-01-13",
"value": 70
}, {
"date": "2013-01-14",
"value": 70
}, {
"date": "2013-01-15",
"value": 73
}, {
"date": "2013-01-16",
"value": 71
}, {
"date": "2013-01-17",
"value": 74
}, {
"date": "2013-01-18",
"value": 78
}, {
"date": "2013-01-19",
"value": 85
}, {
"date": "2013-01-20",
"value": 82
}, {
"date": "2013-01-21",
"value": 83
}, {
"date": "2013-01-22",
"value": 88
}, {
"date": "2013-01-23",
"value": 85
}, {
"date": "2013-01-24",
"value": 85
}, {
"date": "2013-01-25",
"value": 80
}, {
"date": "2013-01-26",
"value": 87
}, {
"date": "2013-01-27",
"value": 84
}, {
"date": "2013-01-28",
"value": 83
}, {
"date": "2013-01-29",
"value": 84
}, {
"date": "2013-01-30",
"value": 81
} ];
// 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;
chart.events.on('ready', function (e) {
setInterval(function () {
var data = e.target.data,
item = data[data.length - 1],
lastDate = new Date(item.date),
newDate = new Date(lastDate.setDate(lastDate.getDate() + 2)),
fullYear = newDate.getFullYear(),
month = newDate.getMonth() + 1,
day = newDate.getDate();
if (month < 10)
month = '0' + month;
if (day < 10)
day = '0' + day;
chart.addData({
date: [fullYear, month, day].join('-'),
value: item.value + Math.floor(Math.random() * 9) - 5
}, 1);
}, 1000);
});
// chart.events.on('ready', function (e) {
//
// $interval(function () {
// Blooddonation.donationAdmin().then(function(data) {
// app.date = data.data.date; //store the items here
//
// e.target.addData(app.date.map(function (item) {
// return {
// date: item._id,
// value: item.count
// };
// }), app.date.length - 1);
// });
// }, 2000);
//
// });
#chartdiv {
width: 100%;
height: 400px;
}
<!-- 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>
<div id="chartdiv"></div>

Related

Get min and max of nested JSON object

I have a nested json object which looks like---
[
{"key":"AXCG","values":[
{"interval":'1_to_2years',"value":34},
{"interval":'3_to_4years',"value":12},
{"interval":'5_to_6years',"value":45},
]},
{"key":"BDGT","values":[
{"interval":'1_to_2years',"value":194},
{"interval":'3_to_4years',"value":12},
{"interval":'5_to_6years',"value":45},
]},
{"key":"YTEF","values":[
{"interval":'1_to_2years',"value":0},
{"interval":'3_to_4years',"value":12},
{"interval":'5_to_6years',"value":15},
]}]
I want to find the min and max among the value. Like in this case it would be min 0 and 194 maximum. How should I do it?

Find below the code for your use-case,
'use strict'
const collection = [
{
"key": "AXCG", "values": [
{ "interval": '1_to_2years', "value": 34 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "BDGT", "values": [
{ "interval": '1_to_2years', "value": 194 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "YTEF", "values": [
{ "interval": '1_to_2years', "value": 0 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 15 },
]
}]
const list = []
collection.every(e => e.values.every(e2 => list.push(e2.value)));
console.log('Max Value:: ' + Math.max.apply(null, list)); // 194
console.log('Min Value:: ' + Math.min.apply(null, list)); // 0

var collection = [
{
"key": "AXCG", "values": [
{ "interval": '1_to_2years', "value": 34 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "BDGT", "values": [
{ "interval": '1_to_2years', "value": 194 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "YTEF", "values": [
{ "interval": '1_to_2years', "value": 0 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 15 },
]
}
];
var values = [];
collection.forEach(function (item) {
item.values.forEach(function (nestedItem) {
values.push(nestedItem.value);
});
});
console.log("Min:" + Math.min.apply(Math, values)); // Min:0
console.log("Max:" + Math.max.apply(Math, values)); // Max:194

Another variation on the simple idea of using Array.forEach:
var o = [
{
"key": "AXCG", "values": [
{ "interval": '1_to_2years', "value": 34 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "BDGT", "values": [
{ "interval": '1_to_2years', "value": 194 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 45 },
]
},
{
"key": "YTEF", "values": [
{ "interval": '1_to_2years', "value": 0 },
{ "interval": '3_to_4years', "value": 12 },
{ "interval": '5_to_6years', "value": 15 },
]
}];
var minimum = 9999;
var maximum = 0;
o.forEach(function (element) {
var inner = element.values;
inner.forEach(function (innerELement) {
if (innerELement.value < minimum) minimum = innerELement.value;
if (innerELement.value > maximum) maximum = innerELement.value;
});
});
console.log('Min is ' + minimum + ' and max is ' + maximum);

You can use array#reduce to get the minimum and maximum value of the value inside the values array. Iterate through each object of values array and compare the values with minimum and maximum value stored and when you encounter new minimum and maximum value update the stored value.
var collection = [{ "key": "AXCG", "values": [{ "interval": '1_to_2years', "value": 34 }, { "interval": '3_to_4years', "value": 12 }, { "interval": '5_to_6years', "value": 45 }, ] }, { "key": "BDGT", "values": [{ "interval": '1_to_2years', "value": 194 }, { "interval": '3_to_4years', "value": 12 }, { "interval": '5_to_6years', "value": 45 }, ] }, { "key": "YTEF", "values": [{ "interval": '1_to_2years', "value": 0 }, { "interval": '3_to_4years', "value": 12 }, { "interval": '5_to_6years', "value": 15}, ] } ],
result = collection.reduce((r,{values}) => {
values.forEach(({value}) => {
r.min = r.min > value ? value : r.min;
r.max = r.max < value ? value : r.max;
});
return r;
},{min: Number.MAX_SAFE_INTEGER, max: Number.MIN_SAFE_INTEGER});
console.log(result);

amcharts (v3.x) date formatting issue on graph

I am trying to plot chart using Amchart and Angular js.
My Data array object contains date in form of a string.
Problem is the amchart's dataDateFormat is not working as required.
For example -
in my data object
{
"date": "2012-07-27 11:33",
"value": 18
}
In amchart code
"dataDateFormat": "JJ:NN" or "dataDateFormat": "YYYY-MM-DD JJ:NN"
shows a single line as graph.
Below is the js code
angular.module("ctrl", ['ui.bootstrap']).controller("mindCtrl",
function($scope) {
$scope.makaDaCharto = function(index) {
$scope.chart = AmCharts.makeChart("chartdiv" + index, {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "JJ:NN",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"valueScrollbar": {
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2012-07-27 11:22",
"value": 13
}, {
"date": "2012-07-27 11:23",
"value": 11
}, {
"date": "2012-07-27 11:24",
"value": 15
}, {
"date": "2012-07-27 11:25",
"value": 16
}, {
"date": "2012-07-27 11:26",
"value": 18
}, {
"date": "2012-07-27 11:27",
"value": 13
}, {
"date": "2012-07-27 11:28",
"value": 22
}, {
"date": "2012-07-27 11:29",
"value": 23
}, {
"date": "2012-07-27 11:30",
"value": 20
}, {
"date": "2012-07-27 11:31",
"value": 17
}, {
"date": "2012-07-27 11:32",
"value": 16
}, {
"date": "2012-07-27 11:33",
"value": 18
}, {
"date": "2012-07-27 11:34",
"value": 21
}, {
"date": "2012-07-27 11:35",
"value": 26
}, {
"date": "2012-07-27 11:36",
"value": 24
}, {
"date": "2012-07-27 11:37",
"value": 29
}, {
"date": "2012-07-27 11:38",
"value": 32
}, {
"date": "2012-07-27 11:39",
"value": 18
}, {
"date": "2012-07-27 11:40",
"value": 24
}, {
"date": "2012-07-27 11:41",
"value": 22
}, {
"date": "2012-07-27 11:42",
"value": 18
}, {
"date": "2012-07-27 11:43",
"value": 19
}, {
"date": "2012-07-27 11:44",
"value": 14
}, {
"date": "2012-07-27 11:45",
"value": 15
}, {
"date": "2012-07-27 11:46",
"value": 12
}, {
"date": "2012-07-27 11:47",
"value": 8
}, {
"date": "2012-07-27 11:48",
"value": 9
}, {
"date": "2012-07-27 11:49",
"value": 8
}, {
"date": "2012-07-27 11:50",
"value": 7
}, {
"date": "2012-07-27 11:51",
"value": 5
}, {
"date": "2012-07-27 11:52",
"value": 11
}, {
"date": "2012-07-27 11:53",
"value": 13
}, {
"date": "2012-07-27 11:54",
"value": 18
}]
});
$scope.chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
$scope.chart.zoomToIndexes($scope.chart.dataProvider.length - 40,
$scope.chart.dataProvider.length - 1);
}
};
});
Amchart Curve by editing fiddle
Existing Example fiddle at http://jsfiddle.net/v917yya3/68/
Fiddle I Created to depict the issue http://jsfiddle.net/phex4qg5/
PS - I already tried
amCharts with AngularJS
JSON with parsed time or timestamp to amCharts
Almost all formats explained here http://www.amcharts.com/kbase/formatting-dates/

AmCharts assumes your data is in daily intervals by default. Since your data is in minute intervals, you need to adjust the category axis' minPeriod to accommodate this. In your case, set minPeriod: "mm", along with setting dataDateFormat: "YYYY-MM-DD JJ:NN" will fix your chart.
Updated fiddle: http://jsfiddle.net/phex4qg5/10/

PHP - amcharts.js:34 Uncaught TypeError: Cannot read property 'call' of undefined

Please clear me this error i don't know what to do with this error? I really don't know where the error is? I want to create a graph like this but the
values i give is not working. The JSON values I am giving had not been
plotte
i want the result as plotted graph with all scroll and zoom options for realtime dataset in json format friends. Here i am using amchart js and normal javascript.
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled":true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth":true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon":{
"drop":true,
"adjustBorderColor":false,
"color":"#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis":false,
"offset":30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount":true,
"color":"#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha":1,
"cursorColor":"#258cbb",
"limitToGraph":"g1",
"valueLineAlpha":0.2,
"valueZoomable":true
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [
{
"date":"2017-08-08",
"value":28
},
{
"date":"2017-08-07",
"value":26
},
{
"date":"2017-08-06",
"value":36
},
{
"date":"2017-08-05",
"value":31
},
{
"date":"2017-08-04",
"value":30
},
{
"date":"2017-08-03",
"value":27
},
{
"date":"2017-08-02",
"value":28
},
{
"date":"2017-08-01",
"value":25
},
{
"date":"2017-07-31",
"value":27
},
{
"date":"2017-07-30",
"value":27
},
{
"date":"2017-07-29",
"value":36
},
{
"date":"2017-07-28",
"value":30
},
{
"date":"2017-07-27",
"value":39
},
{
"date":"2017-07-26",
"value":36
},
{
"date":"2017-07-25",
"value":32
},
{
"date":"2017-08-09",
"value":33
},
{
"date":"2017-08-09",
"value":40
},
{
"date":"2017-08-09",
"value":33
},
{
"date":"2017-08-09",
"value":25
},
{
"date":"2017-08-09",
"value":33
},
{
"date":"2017-08-09",
"value":26
},
{
"date":"2017-07-24",
"value":38
},
{
"date":"2017-07-23",
"value":33
},
{
"date":"2017-07-22",
"value":37
},
{
"date":"2017-07-21",
"value":35
},
{
"date":"2017-07-20",
"value":39
},
{
"date":"2017-07-19",
"value":26
},
{
"date":"2017-07-18",
"value":29
},
{
"date":"2017-07-17",
"value":40
},
{
"date":"2017-07-16",
"value":40
},
{
"date":"2017-07-15",
"value":37
},
{
"date":"2017-07-14",
"value":28
},
{
"date":"2017-07-13",
"value":26
},
{
"date":"2017-07-12",
"value":32
},
{
"date":"2017-07-11",
"value":34
},
{
"date":"2017-07-10",
"value":31
},
{
"date":"2017-07-09",
"value":34
},
{
"date":"2017-07-08",
"value":37
},
{
"date":"2017-07-07",
"value":31
},
{
"date":"2017-07-06",
"value":36
},
{
"date":"2017-07-05",
"value":40
},
{
"date":"2017-07-04",
"value":27
},
{
"date":"2017-07-03",
"value":26
},
{
"date":"2017-07-02",
"value":38
},
{
"date":"2017-07-01",
"value":39
},
{
"date":"2017-06-30",
"value":33
},
{
"date":"2017-06-29",
"value":31
},
{
"date":"2017-06-28",
"value":38
},
{
"date":"2017-06-27",
"value":26
},
{
"date":"2017-06-26",
"value":32
},
{
"date":"2017-06-25",
"value":30
},
{
"date":"2017-06-24",
"value":27
},
{
"date":"2017-06-23",
"value":29
},
{
"date":"2017-06-22",
"value":39
},
{
"date":"2017-06-21",
"value":40
},
{
"date":"2017-06-20",
"value":39
},
{
"date":"2017-06-19",
"value":38
},
{
"date":"2017-06-18",
"value":25
},
{
"date":"2017-06-17",
"value":28
},
{
"date":"2017-06-16",
"value":37
},
{
"date":"2017-06-15",
"value":40
},
{
"date":"2017-06-14",
"value":40
},
{
"date":"2017-06-13",
"value":40
},
{
"date":"2017-06-12",
"value":25
},
{
"date":"2017-06-11",
"value":32
},
{
"date":"2017-06-10",
"value":34
},
{
"date":"2017-06-09",
"value":32
},
{
"date":"2017-06-08",
"value":25
},
{
"date":"2017-06-07",
"value":31
},
{
"date":"2017-06-06",
"value":39
},
{
"date":"2017-06-05",
"value":37
},
{
"date":"2017-06-04",
"value":30
},
{
"date":"2017-06-03",
"value":26
},
{
"date":"2017-06-02",
"value":38
},
{
"date":"2017-06-01",
"value":28
},
{
"date":"2017-05-31",
"value":40
},
{
"date":"2017-05-30",
"value":31
},
{
"date":"2017-05-29",
"value":34
},
{
"date":"2017-05-28",
"value":37
},
{
"date":"2017-05-27",
"value":33
},
{
"date":"2017-05-26",
"value":25
},
{
"date":"2017-05-25",
"value":27
},
{
"date":"2017-05-24",
"value":35
},
{
"date":"2017-05-23",
"value":30
},
{
"date":"2017-05-22",
"value":25
},
{
"date":"2017-05-21",
"value":35
},
{
"date":"2017-05-20",
"value":29
},
{
"date":"2017-05-19",
"value":38
},
{
"date":"2017-05-18",
"value":36
},
{
"date":"2017-05-17",
"value":32
},
{
"date":"2017-05-16",
"value":35
},
{
"date":"2017-05-15",
"value":35
},
{
"date":"2017-05-14",
"value":32
},
{
"date":"2017-05-13",
"value":35
},
{
"date":"2017-05-12",
"value":36
},
{
"date":"2017-05-11",
"value":39
},
{
"date":"2017-05-10",
"value":28
},
{
"date":"2017-05-09",
"value":28
},
{
"date":"2017-05-08",
"value":40
},
{
"date":"2017-05-07",
"value":35
},
{
"date":"2017-05-06",
"value":26
},
{
"date":"2017-05-05",
"value":36
},
{
"date":"2017-05-04",
"value":25
},
{
"date":"2017-05-03",
"value":28
},
{
"date":"2017-05-02",
"value":34
},
{
"date":"2017-05-01",
"value":28
},
{
"date":"2017-04-30",
"value":27
},
{
"date":"2017-04-29",
"value":25
},
{
"date":"2017-04-28",
"value":37
},
{
"date":"2017-04-27",
"value":39
},
{
"date":"2017-04-26",
"value":33
},
{
"date":"2017-04-25",
"value":38
},
{
"date":"2017-04-24",
"value":25
},
{
"date":"2017-04-23",
"value":28
},
{
"date":"2017-04-22",
"value":27
},
{
"date":"2017-04-21",
"value":26
},
{
"date":"2017-04-20",
"value":38
},
{
"date":"2017-04-19",
"value":32
},
{
"date":"2017-04-18",
"value":39
},
{
"date":"2017-04-17",
"value":33
},
{
"date":"2017-04-16",
"value":39
},
{
"date":"2017-04-15",
"value":34
},
{
"date":"2017-04-14",
"value":28
},
{
"date":"2017-04-13",
"value":31
},
{
"date":"2017-04-12",
"value":28
},
{
"date":"2017-04-11",
"value":40
},
{
"date":"2017-04-10",
"value":29
},
{
"date":"2017-04-09",
"value":32
},
{
"date":"2017-04-08",
"value":27
},
{
"date":"2017-04-07",
"value":28
},
{
"date":"2017-04-06",
"value":26
},
{
"date":"2017-04-05",
"value":29
},
{
"date":"2017-04-04",
"value":40
},
{
"date":"2017-04-03",
"value":26
},
{
"date":"2017-04-02",
"value":32
},
{
"date":"2017-04-01",
"value":34
},
{
"date":"2017-03-31",
"value":29
},
{
"date":"2017-03-30",
"value":35
},
{
"date":"2017-03-29",
"value":34
},
{
"date":"2017-03-28",
"value":26
},
{
"date":"2017-03-27",
"value":33
},
{
"date":"2017-03-26",
"value":27
},
{
"date":"2017-03-25",
"value":39
},
{
"date":"2017-03-24",
"value":34
},
{
"date":"2017-03-23",
"value":30
}
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
.amcharts-chart-div a {display:none !important;}
#drop {
margin-top: 5%;
margin-left: 30%;
margin-right: 30%;
}
#chartdiv {
margin-top: 2%;
margin-left: 20%;
margin-right: 20%;
width : auto;
height : 500px;
}
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<div class="row" id="drop">
<div class="offset-m3 offset-l4 col s12 m6 l4">
<ul id = "dropdown" class = "dropdown-content">
<li>Department2</li>
<li>Department3</li>
<li>Department4</li>
<li>Department5</li>
<li>Department6</li>
<li>Department7</li>
<li>Department8</li>
<li>Department9</li>
<li>Department10</li>
<li>Department11</li>
<li>Department12</li>
<li>Department13</li>
<li>Department14</li>
<li>Department15</li>
<li>Department16</li>
<li>Department17</li>
</ul>
<a class = "btn dropdown-button" href = "graph.html" data-activates = "dropdown">Department1
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</div>
</div>
<div class="offset-m2 offset-l3 col s12 m8 l6">
<div class="" id="chartdiv"></div>
</div>
</body>
</html>

I'm not able to reproduce that exact console error, but I am getting issues when zooming due to your dates being out of order. As mentioned in the parseDates documentation, your date-based data must be sorted in ascending order. Your data was mostly in descending order with duplicate 2017-08-09 dates out of order, which should also be removed.
Here's your code in sorted order with the duplicates removed:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "YYYY-MM-DD",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"valueScrollbar": {
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2017-03-23",
"value": 30
}, {
"date": "2017-03-24",
"value": 34
}, {
"date": "2017-03-25",
"value": 39
}, {
"date": "2017-03-26",
"value": 27
}, {
"date": "2017-03-27",
"value": 33
}, {
"date": "2017-03-28",
"value": 26
}, {
"date": "2017-03-29",
"value": 34
}, {
"date": "2017-03-30",
"value": 35
}, {
"date": "2017-03-31",
"value": 29
}, {
"date": "2017-04-01",
"value": 34
}, {
"date": "2017-04-02",
"value": 32
}, {
"date": "2017-04-03",
"value": 26
}, {
"date": "2017-04-04",
"value": 40
}, {
"date": "2017-04-05",
"value": 29
}, {
"date": "2017-04-06",
"value": 26
}, {
"date": "2017-04-07",
"value": 28
}, {
"date": "2017-04-08",
"value": 27
}, {
"date": "2017-04-09",
"value": 32
}, {
"date": "2017-04-10",
"value": 29
}, {
"date": "2017-04-11",
"value": 40
}, {
"date": "2017-04-12",
"value": 28
}, {
"date": "2017-04-13",
"value": 31
}, {
"date": "2017-04-14",
"value": 28
}, {
"date": "2017-04-15",
"value": 34
}, {
"date": "2017-04-16",
"value": 39
}, {
"date": "2017-04-17",
"value": 33
}, {
"date": "2017-04-18",
"value": 39
}, {
"date": "2017-04-19",
"value": 32
}, {
"date": "2017-04-20",
"value": 38
}, {
"date": "2017-04-21",
"value": 26
}, {
"date": "2017-04-22",
"value": 27
}, {
"date": "2017-04-23",
"value": 28
}, {
"date": "2017-04-24",
"value": 25
}, {
"date": "2017-04-25",
"value": 38
}, {
"date": "2017-04-26",
"value": 33
}, {
"date": "2017-04-27",
"value": 39
}, {
"date": "2017-04-28",
"value": 37
}, {
"date": "2017-04-29",
"value": 25
}, {
"date": "2017-04-30",
"value": 27
}, {
"date": "2017-05-01",
"value": 28
}, {
"date": "2017-05-02",
"value": 34
}, {
"date": "2017-05-03",
"value": 28
}, {
"date": "2017-05-04",
"value": 25
}, {
"date": "2017-05-05",
"value": 36
}, {
"date": "2017-05-06",
"value": 26
}, {
"date": "2017-05-07",
"value": 35
}, {
"date": "2017-05-08",
"value": 40
}, {
"date": "2017-05-09",
"value": 28
}, {
"date": "2017-05-10",
"value": 28
}, {
"date": "2017-05-11",
"value": 39
}, {
"date": "2017-05-12",
"value": 36
}, {
"date": "2017-05-13",
"value": 35
}, {
"date": "2017-05-14",
"value": 32
}, {
"date": "2017-05-15",
"value": 35
}, {
"date": "2017-05-16",
"value": 35
}, {
"date": "2017-05-17",
"value": 32
}, {
"date": "2017-05-18",
"value": 36
}, {
"date": "2017-05-19",
"value": 38
}, {
"date": "2017-05-20",
"value": 29
}, {
"date": "2017-05-21",
"value": 35
}, {
"date": "2017-05-22",
"value": 25
}, {
"date": "2017-05-23",
"value": 30
}, {
"date": "2017-05-24",
"value": 35
}, {
"date": "2017-05-25",
"value": 27
}, {
"date": "2017-05-26",
"value": 25
}, {
"date": "2017-05-27",
"value": 33
}, {
"date": "2017-05-28",
"value": 37
}, {
"date": "2017-05-29",
"value": 34
}, {
"date": "2017-05-30",
"value": 31
}, {
"date": "2017-05-31",
"value": 40
}, {
"date": "2017-06-01",
"value": 28
}, {
"date": "2017-06-02",
"value": 38
}, {
"date": "2017-06-03",
"value": 26
}, {
"date": "2017-06-04",
"value": 30
}, {
"date": "2017-06-05",
"value": 37
}, {
"date": "2017-06-06",
"value": 39
}, {
"date": "2017-06-07",
"value": 31
}, {
"date": "2017-06-08",
"value": 25
}, {
"date": "2017-06-09",
"value": 32
}, {
"date": "2017-06-10",
"value": 34
}, {
"date": "2017-06-11",
"value": 32
}, {
"date": "2017-06-12",
"value": 25
}, {
"date": "2017-06-13",
"value": 40
}, {
"date": "2017-06-14",
"value": 40
}, {
"date": "2017-06-15",
"value": 40
}, {
"date": "2017-06-16",
"value": 37
}, {
"date": "2017-06-17",
"value": 28
}, {
"date": "2017-06-18",
"value": 25
}, {
"date": "2017-06-19",
"value": 38
}, {
"date": "2017-06-20",
"value": 39
}, {
"date": "2017-06-21",
"value": 40
}, {
"date": "2017-06-22",
"value": 39
}, {
"date": "2017-06-23",
"value": 29
}, {
"date": "2017-06-24",
"value": 27
}, {
"date": "2017-06-25",
"value": 30
}, {
"date": "2017-06-26",
"value": 32
}, {
"date": "2017-06-27",
"value": 26
}, {
"date": "2017-06-28",
"value": 38
}, {
"date": "2017-06-29",
"value": 31
}, {
"date": "2017-06-30",
"value": 33
}, {
"date": "2017-07-01",
"value": 39
}, {
"date": "2017-07-02",
"value": 38
}, {
"date": "2017-07-03",
"value": 26
}, {
"date": "2017-07-04",
"value": 27
}, {
"date": "2017-07-05",
"value": 40
}, {
"date": "2017-07-06",
"value": 36
}, {
"date": "2017-07-07",
"value": 31
}, {
"date": "2017-07-08",
"value": 37
}, {
"date": "2017-07-09",
"value": 34
}, {
"date": "2017-07-10",
"value": 31
}, {
"date": "2017-07-11",
"value": 34
}, {
"date": "2017-07-12",
"value": 32
}, {
"date": "2017-07-13",
"value": 26
}, {
"date": "2017-07-14",
"value": 28
}, {
"date": "2017-07-15",
"value": 37
}, {
"date": "2017-07-16",
"value": 40
}, {
"date": "2017-07-17",
"value": 40
}, {
"date": "2017-07-18",
"value": 29
}, {
"date": "2017-07-19",
"value": 26
}, {
"date": "2017-07-20",
"value": 39
}, {
"date": "2017-07-21",
"value": 35
}, {
"date": "2017-07-22",
"value": 37
}, {
"date": "2017-07-23",
"value": 33
}, {
"date": "2017-07-24",
"value": 38
}, {
"date": "2017-07-25",
"value": 32
}, {
"date": "2017-07-26",
"value": 36
}, {
"date": "2017-07-27",
"value": 39
}, {
"date": "2017-07-28",
"value": 30
}, {
"date": "2017-07-29",
"value": 36
}, {
"date": "2017-07-30",
"value": 27
}, {
"date": "2017-07-31",
"value": 27
}, {
"date": "2017-08-01",
"value": 25
}, {
"date": "2017-08-02",
"value": 28
}, {
"date": "2017-08-03",
"value": 27
}, {
"date": "2017-08-04",
"value": 30
}, {
"date": "2017-08-05",
"value": 31
}, {
"date": "2017-08-06",
"value": 36
}, {
"date": "2017-08-07",
"value": 26
}, {
"date": "2017-08-08",
"value": 28
}, {
"date": "2017-08-09",
"value": 33
}/*
remove extra duplicate dates
, {
"date": "2017-08-09",
"value": 40
}, {
"date": "2017-08-09",
"value": 33
}, {
"date": "2017-08-09",
"value": 25
}, {
"date": "2017-08-09",
"value": 33
}, {
"date": "2017-08-09",
"value": 26
}
*/
]
});
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
.amcharts-chart-div a {
display: none !important;
}
#drop {
margin-top: 5%;
margin-left: 30%;
margin-right: 30%;
}
#chartdiv {
margin-top: 2%;
margin-left: 20%;
margin-right: 20%;
width: auto;
height: 500px;
}
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<script>
</script>
<style>
</style>
</head>
<body>
<div class="row" id="drop">
<div class="offset-m3 offset-l4 col s12 m6 l4">
<ul id="dropdown" class="dropdown-content">
<li>Department2</li>
<li>Department3</li>
<li>Department4</li>
<li>Department5</li>
<li>Department6</li>
<li>Department7</li>
<li>Department8</li>
<li>Department9</li>
<li>Department10</li>
<li>Department11</li>
<li>Department12</li>
<li>Department13</li>
<li>Department14</li>
<li>Department15</li>
<li>Department16</li>
<li>Department17</li>
</ul>
<a class="btn dropdown-button" href="graph.html" data-activates="dropdown">Department1
<i class = "mdi-navigation-arrow-drop-down right"></i></a>
</div>
</div>
<div class="offset-m2 offset-l3 col s12 m8 l6">
<div class="" id="chartdiv"></div>
</div>
</body>
</html>

amserialchart graphs duplication calculation

I'm use amChartSerialChart.
"categoryField": "ymd",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "WW",
"dataProvider": [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}
If there are multiple data of the same date, I would like to obtain the total result.
i hope result value is 10.
What kind of solution is there?

Reduce
Map
dataProvider= [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
var result=dataProvider.map(function(arr){return arr.value;
}).reduce((a, b) => a + b, 0);;
console.log(result);

The chart doesn't automatically sum up values of the same date, nor does it support duplicate dates. You need to pre-process your data before assigning it to the chart's dataProvider.
var rawData = [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var rawData = [{
"date": "2016-11-15",
"value": 4
}, {
"date": "2016-11-15",
"value": 1
}, {
"date": "2016-11-16",
"value": 3
}, {
"date": "2016-11-16",
"value": 4
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-18",
"value": 5
}, {
"date": "2016-11-18",
"value": 1
}, {
"date": "2016-11-19",
"value": 4
}, {
"date": "2016-11-19",
"value": 1
}, {
"date": "2016-11-20",
"value": 4
}, {
"date": "2016-11-20",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-22",
"value": 5
}, {
"date": "2016-11-22",
"value": 3
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-24",
"value": 4
}, {
"date": "2016-11-24",
"value": 2
}, {
"date": "2016-11-25",
"value": 5
}, {
"date": "2016-11-25",
"value": 4
}, {
"date": "2016-11-26",
"value": 5
}, {
"date": "2016-11-26",
"value": 1
}, {
"date": "2016-11-27",
"value": 5
}, {
"date": "2016-11-27",
"value": 3
}, {
"date": "2016-11-28",
"value": 5
}, {
"date": "2016-11-28",
"value": 1
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-30",
"value": 4
}, {
"date": "2016-11-30",
"value": 3
}, {
"date": "2016-12-01",
"value": 4
}, {
"date": "2016-12-01",
"value": 2
}, {
"date": "2016-12-02",
"value": 4
}, {
"date": "2016-12-02",
"value": 1
}, {
"date": "2016-12-03",
"value": 4
}, {
"date": "2016-12-03",
"value": 3
}, {
"date": "2016-12-04",
"value": 3
}, {
"date": "2016-12-04",
"value": 1
}, {
"date": "2016-12-05",
"value": 5
}, {
"date": "2016-12-05",
"value": 2
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-07",
"value": 5
}, {
"date": "2016-12-07",
"value": 1
}, {
"date": "2016-12-08",
"value": 4
}, {
"date": "2016-12-08",
"value": 1
}, {
"date": "2016-12-09",
"value": 3
}, {
"date": "2016-12-09",
"value": 4
}, {
"date": "2016-12-10",
"value": 5
}, {
"date": "2016-12-10",
"value": 2
}, {
"date": "2016-12-11",
"value": 5
}, {
"date": "2016-12-11",
"value": 1
}, {
"date": "2016-12-12",
"value": 3
}, {
"date": "2016-12-12",
"value": 2
}];
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"graphs": [{
"bullet": "round",
"valueField": "value"
}],
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "7DD",
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Note that WW is an invalid minPeriod. If you want to group your data in weeks, use 7DD instead. API documentation for minPeriod

Is this JSON structure suitable for a stacked bar chart using d3.js?

I need to create a stacked bar chart plus line graph. I'm thinking d3.js is the tool for the job, but I'm having problems binding my data. Is the following JSON formatted in a way that will work for the stack method?
{
"response": {
"qtime": 11,
"params": {
"id": "jb8wp1rw41v",
"format": "json"
}
},
"series": {
"twitter": [{
"date": "2013-08-20",
"value": 3
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 4
}, {
"date": "2013-08-23",
"value": 1
}, {
"date": "2013-08-24",
"value": 5
}, {
"date": "2013-08-25",
"value": 9
}, {
"date": "2013-08-26",
"value": 2
}, {
"date": "2013-08-27",
"value": 6
}, {
"date": "2013-08-28",
"value": 5
}, {
"date": "2013-08-29",
"value": 3
}, {
"date": "2013-08-30",
"value": 5
}, {
"date": "2013-08-31",
"value": 8
}, {
"date": "2013-09-01",
"value": 9
}, {
"date": "2013-09-02",
"value": 7
}],
"facebook": [{
"date": "2013-08-20",
"value": 0
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 3
}, {
"date": "2013-08-23",
"value": 6
}, {
"date": "2013-08-24",
"value": 10
}, {
"date": "2013-08-25",
"value": 21
}, {
"date": "2013-08-26",
"value": 28
}, {
"date": "2013-08-27",
"value": 21
}, {
"date": "2013-08-28",
"value": 10
}, {
"date": "2013-08-29",
"value": 6
}, {
"date": "2013-08-30",
"value": 0
}, {
"date": "2013-08-31",
"value": 15
}, {
"date": "2013-09-01",
"value": 21
}, {
"date": "2013-09-02",
"value": 1
}],
"email": [{
"date": "2013-08-20",
"value": 0
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 1
}, {
"date": "2013-08-23",
"value": 2
}, {
"date": "2013-08-24",
"value": 3
}, {
"date": "2013-08-25",
"value": 5
}, {
"date": "2013-08-26",
"value": 8
}, {
"date": "2013-08-27",
"value": 13
}, {
"date": "2013-08-28",
"value": 5
}, {
"date": "2013-08-29",
"value": 8
}, {
"date": "2013-08-30",
"value": 1
}, {
"date": "2013-08-31",
"value": 1
}, {
"date": "2013-09-01",
"value": 2
}, {
"date": "2013-09-02",
"value": 13
}],
"amazon_rank": [{
"date": "2013-08-20",
"value": 1001
}, {
"date": "2013-08-21",
"value": 2312
}, {
"date": "2013-08-22",
"value": 2300
}, {
"date": "2013-08-23",
"value": 5179
}, {
"date": "2013-08-24",
"value": 5112
}, {
"date": "2013-08-25",
"value": 2305
}, {
"date": "2013-08-26",
"value": 1902
}, {
"date": "2013-08-27",
"value": 1221
}, {
"date": "2013-08-28",
"value": 1010
}, {
"date": "2013-08-29",
"value": 2588
}, {
"date": "2013-08-30",
"value": 4093
}, {
"date": "2013-08-31",
"value": 4432
}, {
"date": "2013-09-01",
"value": 5002
}, {
"date": "2013-09-02",
"value": 3902
}],
"pinterest": [{
"date": "2013-08-20",
"value": 17
}, {
"date": "2013-08-21",
"value": 23
}, {
"date": "2013-08-22",
"value": 11
}, {
"date": "2013-08-23",
"value": 13
}, {
"date": "2013-08-24",
"value": 19
}, {
"date": "2013-08-25",
"value": 5
}, {
"date": "2013-08-26",
"value": 17
}, {
"date": "2013-08-27",
"value": 11
}, {
"date": "2013-08-28",
"value": 2
}, {
"date": "2013-08-29",
"value": 3
}, {
"date": "2013-08-30",
"value": 5
}, {
"date": "2013-08-31",
"value": 7
}, {
"date": "2013-09-01",
"value": 19
}, {
"date": "2013-09-02",
"value": 0
}]
}
}

You'll need to wrangle the data a little bit to get in a format that d3 likes, but there are built in functions to do all the work for you:
var companies = d3.layout.stack()(d3.values(json.series))
will give you a data structure similar to causes in the stacked bar chart example.
Basically, d3.values is taking your object with several arrays and turning in into an array of arrays. d3.layout.stack takes that two dimensional array, re structures it a a little bit and adds convenience functions that make it much simpler create a stacked bar chart.

I would recommend you to not use JSON at all since it is not streamable. Indeed, charts are often representing a big amount of datas and it is recommended to load their content progressively with the help of the XHR progress event.
Since most of the charts are tabular datas, i assume CSV is the better format for that purpose. If you still want be able to manage trees like with JSON, take a look at VarStream https://github.com/nfroidure/VarStream.
Here is an example of loading charts with a streamable format versus with JSON : http://server.elitwork.com/experiments/chartstream/index.html
The badest is your connection, the more you see how usefull is XHR Streaming.

Develop Reference

JavaScript is the programming language of the Web.

Amcharts refresh or validate data every seconds - javascript

Related

Get min and max of nested JSON object

amcharts (v3.x) date formatting issue on graph

PHP - amcharts.js:34 Uncaught TypeError: Cannot read property 'call' of undefined

amserialchart graphs duplication calculation

Is this JSON structure suitable for a stacked bar chart using d3.js?

Categories

Resources

Develop Reference

JavaScript is the programming language of the Web.

Amcharts refresh or validate data every seconds - javascript

Related

Get min and max of nested JSON object

amcharts (v3.x) date formatting issue on graph

PHP - amcharts.js:34 Uncaught TypeError: Cannot read property 'call' of undefined

amserialchart graphs d​uplication calculation

Is this JSON structure suitable for a stacked bar chart using d3.js?

Categories

Resources

amserialchart graphs duplication calculation