// Chart option
var options = {
legendTemplate : "<% for (var i=0; i<datasets.length; i++){%><li><span style=\"color:<%=datasets[i].strokeColor%>\">■</span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%>"
};
// GC count var gc_chart_ctx = document.getElementById(‘gc_chart’).getContext(‘2d’); var gc_chart = new Chart(gc_chart_ctx).Line({
labels: [], datasets: [ { label: 'minor GC count', fillColor: 'rgba(220,220,220,0.2)', strokeColor: 'rgba(220,220,220,1)', pointColor: 'rgba(220,220,220,1)', pointStrokeColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data: [] }, { label: 'major GC Count', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', pointStrokeColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(151,187,205,1)', data: [] } ]
}, options);
document.getElementById(‘gc_legend’).innerHTML = gc_chart.generateLegend();
// total object var total_object_ctx = document.getElementById(‘total_object’).getContext(‘2d’); var total_object_chart = new Chart(total_object_ctx).Line({
labels: [], datasets: [ { label: 'total allocated object', fillColor: 'rgba(220,220,220,0.2)', strokeColor: 'rgba(220,220,220,1)', pointColor: 'rgba(220,220,220,1)', pointStrokeColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(220,220,220,1)', data: [] }, { label: 'total freed object', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', pointStrokeColor: '#fff', pointHighlightFill: '#fff', pointHighlightStroke: 'rgba(151,187,205,1)', data: [] } ]
}, options);
document.getElementById(‘total_object_legend’).innerHTML = total_object_chart.generateLegend();
// malloc increase var malloc_increase_ctx = document.getElementById(‘malloc_increase’).getContext(‘2d’); var malloc_increase_chart = new Chart(malloc_increase_ctx).Line({
labels: [], datasets: [ { label: 'malloc increase bytes limit', fillColor: 'rgba(220,220,220,0.2)', strokeColor: 'rgba(220,220,220,1)', pointColor: 'rgba(220,220,220,1)', pointStrokeColor: '#fff', data: [] }, { label: 'malloc increase bytes', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', pointStrokeColor: '#fff', data: [] } ]
}, options);
document.getElementById(‘malloc_increase_legend’).innerHTML = malloc_increase_chart.generateLegend();
// old objects var old_objects_ctx = document.getElementById(‘old_objects’).getContext(‘2d’); var old_objects_chart = new Chart(old_objects_ctx).Line({
labels: [], datasets: [ { label: 'old objects limit', fillColor: 'rgba(220,220,220,0.2)', strokeColor: 'rgba(220,220,220,1)', pointColor: 'rgba(220,220,220,1)', pointStrokeColor: '#fff', data: [] }, { label: 'old objects', fillColor: 'rgba(151,187,205,0.2)', strokeColor: 'rgba(151,187,205,1)', pointColor: 'rgba(151,187,205,1)', pointStrokeColor: '#fff', data: [] } ]
}, options);
document.getElementById(‘old_objects_legend’).innerHTML = old_objects_chart.generateLegend();
// SSE var source = new EventSource(‘/rackprof/gc_stream’);
source.onmessage = function(event) {
data = JSON.parse(event.data); var gc_data = [data.minor_gc_count, data.major_gc_count]; var total_object_data = [data.total_allocated_objects, data.total_freed_objects]; var malloc_increase_data = [data.malloc_increase_bytes_limit, data.malloc_increase_bytes]; var old_objects_data = [data.old_objects_limit, data.old_objects]; gc_chart.addData(gc_data, new Date().getSeconds()); if (gc_chart.datasets[0].points.length > 10) { gc_chart.removeData(); } total_object_chart.addData(total_object_data, new Date().getSeconds()); if (total_object_chart.datasets[0].points.length > 10) { total_object_chart.removeData(); } malloc_increase_chart.addData(malloc_increase_data, new Date().getSeconds()); if (malloc_increase_chart.datasets[0].points.length > 10) { malloc_increase_chart.removeData(); } old_objects_chart.addData(old_objects_data, new Date().getSeconds()); if (old_objects_chart.datasets[0].points.length > 10) { old_objects_chart.removeData(); }
};