google.charts.load('current', { 'packages': ['corechart'] }); google.charts.setOnLoadCallback(drawVisualization); function drawVisualization() { var data; var deviceId = localStorage.getItem('deviceId'); if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') { data = google.visualization.arrayToDataTable([ ['Month', '', ''], ['BENIGN', getRandomInt(0, 0), getRandomInt(0, 0)], ['MSSQL', getRandomInt(0, 0), getRandomInt(0, 0)], ['Portmap', getRandomInt(0, 0), getRandomInt(0, 0)], ['UDP', getRandomInt(0, 0), getRandomInt(0, 0)], ['NetBIOS', getRandomInt(0, 0), getRandomInt(0, 0)], ['Syn', getRandomInt(0, 0), getRandomInt(0, 0)], ['UDPLag', getRandomInt(0, 0), getRandomInt(0, 0)], ]); } else { data = google.visualization.arrayToDataTable([ ['Month', '', ''], ['BENIGN', 0, 0], ['MSSQL', 0, 0], ['Portmap', 0, 0], ['UDP', 0, 0], ['NetBIOS', 0, 0], ['Syn', 0, 0], ['UDPLag', 0, 0], ]); } var options = { title: '', vAxis: { title: 'epoch', viewWindow: { min: 0, } }, hAxis: { title: 'DDoS type' }, seriesType: 'bars', series: { 1: { type: 'line' } }, backgroundColor: '#0c212b', tooltip: { trigger: 'none' }, colors: ['#2f6689', '#dd4477'] }; var chart = new google.visualization.ComboChart(document.getElementById('LineColumnsChart')); chart.draw(data, options); // Update data every 3 seconds setInterval(function() { fetch('fetch_ddos_value/') .then(response => response.json()) .then(jsonData => { var benignValue = 100; // Check if any of the specified values are greater than 0 if (parseInt(jsonData.data['mysql.log'] || 0) > 0 || parseInt(jsonData.data['portmap.log'] || 0) > 0 || parseInt(jsonData.data['udp.log'] || 0) > 0 || parseInt(jsonData.data['netbios.log'] || 0) > 0 || parseInt(jsonData.data['syn.log'] || 0) > 0 || parseInt(jsonData.data['udplag.log'] || 0) > 0) { benignValue = 0; } // Update bar chart values data.setValue(0, 1, benignValue); // BENIGN data.setValue(1, 1, truncateToThreeDigits(parseInt(jsonData.data['mysql.log'] || 0))); // MSSQL data.setValue(2, 1, truncateToThreeDigits(parseInt(jsonData.data['portmap.log'] || 0))); // Portmap data.setValue(3, 1, truncateToThreeDigits(parseInt(jsonData.data['udp.log'] || 0))); // UDP data.setValue(4, 1, truncateToThreeDigits(parseInt(jsonData.data['netbios.log'] || 0))); // NetBIOS data.setValue(5, 1, truncateToThreeDigits(parseInt(jsonData.data['syn.log'] || 0))); // Syn data.setValue(6, 1, truncateToThreeDigits(parseInt(jsonData.data['udplag.log'] || 0))); // UDPLag // Update line chart values for (var i = 1; i <= 6; i++) { var randomValue = getRandomInt(0, 0); if (randomValue === 0) { // Set line chart to null if bar chart is 0 data.setValue(i, 2, null); } else { // Otherwise update with random value data.setValue(i, 2, randomValue); } } chart.draw(data, options); }) .catch(error => console.error('Error fetching data:', error)); }, 3000); } function truncateToThreeDigits(value) { // Ensure value is an integer and limit to 3 digits return parseInt(value.toString().slice(0, 3)); } function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } // google.charts.load('current', { 'packages': ['corechart'] }); // google.charts.setOnLoadCallback(drawVisualization); // function drawVisualization() { // var data; // var deviceId = localStorage.getItem('deviceId'); // if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi') { // data = google.visualization.arrayToDataTable([ // ['Month', '', ''], // ['BENIGN', getRandomInt(500, 800), getRandomInt(500, 800)], // ['MSSQL', getRandomInt(500, 800), getRandomInt(500, 800)], // ['Portmap', getRandomInt(500, 800), getRandomInt(500, 800)], // ['UDP', getRandomInt(500, 800), getRandomInt(500, 800)], // ['NetBIOS', getRandomInt(500, 800), getRandomInt(500, 800)], // ['Syn', getRandomInt(500, 800), getRandomInt(500, 800)], // ['UDPLag', getRandomInt(500, 800), getRandomInt(500, 800)], // ]); // } else { // data = google.visualization.arrayToDataTable([ // ['Month', '', ''], // ['BENIGN', 0, 0], // ['MSSQL', 0, 0], // ['Portmap', 0, 0], // ['UDP', 0, 0], // ['NetBIOS', 0, 0], // ['Syn', 0, 0], // ['UDPLag', 0, 0], // ]); // } // var options = { // title: '', // vAxis: { // title:'epoch', // viewWindow: { // min: 0, // max: 500 // } // }, // hAxis: { title: 'DDoS type' }, // seriesType: 'bars', // series: { 1: { type: 'line' } }, // backgroundColor: '#0c212b', // tooltip: { trigger: 'none' }, // colors: ['#2f6689', '#dd4477'] // }; // var chart = new google.visualization.ComboChart(document.getElementById('LineColumnsChart')); // chart.draw(data, options); // // Update data every second // setInterval(function() { // var deviceId = localStorage.getItem('deviceId'); // if (deviceId === 'xAq9W1PO5rmAuuQ' || deviceId === 'wzI0R1JqWqV0Lyi' ) { // data.setValue(0, 1, getRandomInt(0, 500)); // data.setValue(0, 2, getRandomInt(0,100)); // data.setValue(1, 1, getRandomInt(0,100)); // data.setValue(1, 2, getRandomInt(0,100)); // data.setValue(2, 1, getRandomInt(0,100)); // data.setValue(2, 2, getRandomInt(0,100)); // data.setValue(3, 1, getRandomInt(0,100)); // data.setValue(3, 2, getRandomInt(0,100)); // data.setValue(4, 1, getRandomInt(0,100)); // data.setValue(4, 2, getRandomInt(0,100)); // data.setValue(5, 1, getRandomInt(0,100)); // data.setValue(5, 2, getRandomInt(0,10)); // data.setValue(6, 1, getRandomInt(0,10)); // data.setValue(6, 2, getRandomInt(0,10)); // chart.draw(data, options); // } else { // data.setValue(0, 1, getRandomInt(0,0)); // data.setValue(0, 2, getRandomInt(0,0)); // data.setValue(1, 1, getRandomInt(0,0)); // data.setValue(1, 2, getRandomInt(0,0)); // data.setValue(2, 1, getRandomInt(0,0)); // data.setValue(2, 2, getRandomInt(0,0)); // data.setValue(3, 1, getRandomInt(0,0)); // data.setValue(3, 2, getRandomInt(0,0)); // data.setValue(4, 1, getRandomInt(0,0)); // data.setValue(4, 2, getRandomInt(0,0)); // data.setValue(5, 1, getRandomInt(0,0)); // data.setValue(5, 2, getRandomInt(0,0)); // data.setValue(6, 1, getRandomInt(0,0)); // data.setValue(6, 2, getRandomInt(0,0)); // chart.draw(data, options); // } // }, 1000); // } // function getRandomInt(min, max) { // return Math.floor(Math.random() * (max - min + 1)) + min; // }