I created a line graph with 2 lines that refresh every 5 seconds.
Now, I'm trying to add dual vAxis on the left and right side.
However, I can't seem to display the vAxis title. How can I fix this?
Here is the chart option that I added:
This graph fetches data from a servlet and displays the count.
Please advise if there is a simple way to correct the code.
Thank you.
var chartOption1 = function(target, name, namename){
var d=new Date();
this.name = name;
this.name2=namename;
this.target = target;
this.data = null;
this.chart = null;
this.options = {
title:d.getFullYear()+'년 '+(1+d.getMonth())+'월 '+d.getDate()+'일 '+'금일 누적 Flow 유입 개수',
legend: { position: 'top' },
titleTextStyle:{
fontSize: 20,
bold: true
},
series:{
0:{targetAxisIndex:0},
1:{targetAxisIndex:1}
},
vAxis: {0:{precision:0, baseline:0, title:'Normal Flow 개수', minValue:0, maxValue:100, format:'0'},
1:{precision:0, baseline:0, title:'Anomaly Flow 개수', minValue:0, maxValue:100, format:'0'}
},
hAxis: {
title:'기준 시간',
textStyle: {
fontSize: 11
}
},
colors: ['#1cc88a', '#e74a3b'],
animation: {
duration: 500,
easing: 'in',
startup: true
}
}
}
var new_option1 = new chartOption1('chart','Normal Flow', 'Anomaly Flow');
function drawChart1(option1) {
var o1 = option1;
if(o1 != null){
//Process only when it's the initial value
if(o1.chart == null || o1.data == null){
o1.data = new google.visualization.DataTable();
o1.data.addColumn('string', 'time');
o1.data.addColumn('number', o1.name);
o1.data.addColumn('number', o1.name2);
o1.data.addRow(['', 0, 0]);
o1.chart = new google.visualization.ColumnChart(document.getElementById("in_flow_daily"));
}
o1.chart.draw(o1.data, o1.options);
}
}
function animateRenewal1(option1){
var o1 = option1;
if (o1.data.getNumberOfRows() >= 8) {
o1.data.removeRow(0);
}
var value1 = $.ajax({
type:'POST',
url:"/Flow_servlet/normalflow_count_daily.do",
data: {
now :getNowTime1(),
nowend:getNowTimeend1()
},
cache:false,
async:false
}).responseText;
var value1value1 = $.ajax({
type:'POST',
url:"/Flow_servlet/anomalyflow_count_daily.do",
data: {
now :getNowTime1(),
nowend:getNowTimeend1()
},
cache:false,
async:false
}).responseText;
value1=parseInt(value1);
value1value1=parseInt(value1value1);
o1.data.insertRows(o1.data.getNumberOfRows(), [[getNowOnlyTime1(), value1, value1value1]]);
drawChart1(o1);
window.addEventListener('resize', o1, false);
}
setInterval(function(){ //Executes every 50 seconds
animateRenewal1(new_option1);
drawChart3();
drawChart2();
drawChart4();
}, 5000);