592 lines
32 KiB
HTML
592 lines
32 KiB
HTML
{% extends 'navbar/navbar.html' %}
|
|
{% load static %}
|
|
{% block malware %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" href="{% static 'malware/css/malware.css' %}">
|
|
<link rel="stylesheet" href="{% static 'malware/css/bubbleMalware.css' %}">
|
|
<title>malware - x-sys</title>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
|
|
</head>
|
|
<body>
|
|
<div class="tabSection">
|
|
{% if message %}
|
|
<div class="alert alert-warning" role="alert">
|
|
{{ message }}
|
|
</div>
|
|
{% endif %}
|
|
<div class="tabMalwareTitle">
|
|
<p class="tabSectionMalware tabSectionActiveMalware">Alerts and Alarms</p>
|
|
<!-- <p class="tabSectionMalware ">Alerts and Alarms</p> -->
|
|
<p class="tabSectionMalware">Malware Alerts</p>
|
|
<p class="tabSectionMalware">AI training Parameter graphs</p>
|
|
<p class="tabSectionMalware">AI model performance</p>
|
|
<p class="tabSectionMalware">Log Activity</p>
|
|
</div>
|
|
<div class="tabDetailsMainSection">
|
|
<div class="tabSectionDetails tabSectionActiveDetails">
|
|
<ul style="padding: 1em; color:#ffffff; text-align:center;">
|
|
{% for file in files_list %}
|
|
<li>{{ file }}</li>
|
|
{% empty %}
|
|
<li>No Alerts and Alarms for malware detected</li>
|
|
{% endfor %}
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="tabSectionDetails" >
|
|
<div style="display: flex; align-items: center; justify-content: center;">
|
|
{% if frequency %}
|
|
<table style="border-collapse: collapse; margin: 20px; display: flex; align-items: center; justify-content: center;">
|
|
<tr style="background-color: #f2f2f2;">
|
|
<th style="border: 1px solid #dddddd; text-align: left; color: black; padding: 8px;">Class</th>
|
|
<th style="border: 1px solid #dddddd; text-align: left; color: black; padding: 8px;">Frequency</th>
|
|
</tr>
|
|
{% for class, frequency in frequency.items %}
|
|
<tr>
|
|
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ class }}</td>
|
|
<td style="border: 1px solid #dddddd; text-align: left; padding: 8px;">{{ frequency }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</table>
|
|
{% else %}
|
|
<p>No alerts for malware detected.</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="tabSectionDetails">
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Malware Class Identification</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="barMalwareChart" style="width: 100%; height:450px;"></div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Identifying malware class type while validating new data set</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="mainCalendarSection">
|
|
<div style="display: flex; justify-content: center; align-items: center;">
|
|
<canvas id="myCanvas" style="width: 90%;height:30% ;"></canvas>
|
|
</div>
|
|
<!-- <div class="chartLabelTitle">
|
|
<p class="malwareClassRamnit"><span></span>Ramnit</p>
|
|
<p class="malwareClassLollipop"><span></span>Lollipop</p>
|
|
<p class="malwareClassKelihos_ver3"><span></span>Kelihos_ver3</p>
|
|
<p class="malwareClassVundo"><span></span>Vundo</p>
|
|
<p class="malwareClassSimda"><span></span>Simda</p>
|
|
<p class="malwareClassTracur"><span></span>Tracur</p>
|
|
<p class="malwareClassKelihos_ver1"><span></span>Kelihos_ver1</p>
|
|
<p class="malwareClassObfuscator"><span></span>Obfuscator.AYC</p>
|
|
<p class="malwareClassGatak"><span></span>Gatak</p>
|
|
</div>
|
|
<div class="bubbleChartSection">
|
|
<div class="rowSection">
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
<div class="bubbleChartRowLine"></div>
|
|
</div>
|
|
<div class="columnSection">
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
<div class="bubbleChartColumnLine"></div>
|
|
</div>
|
|
<div class="bottomTextSection" id="bubbleBottomTextChart">
|
|
<p>68</p>
|
|
<p>70</p>
|
|
<p>72</p>
|
|
<p>74</p>
|
|
<p>76</p>
|
|
<p>78</p>
|
|
<p>80</p>
|
|
<p>82</p>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble ColorThree bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble AnonymousHit bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble ColorFour bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble colorNine bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble colorEight bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble ColorFive bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble AnonymousHit bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble ColorSix bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="bubble colorSeven bubble-animation">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Distribution of training parameters in dataset</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="DistributionTrainData" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Distribution of testing parameters in the dataset</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="DistributionTrainTwoData" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Distribution of validation parameters in the dataset</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="DistributionTrainThreeData" style="width: 100%; height: 500px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="tabSectionDetails">
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Confusion Matrix of model performance</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div class="ConfusionMatrix" id="ConfusionMatrix" style="width: 90%; height: 450px;"></div>
|
|
|
|
</div>
|
|
<div class="chartOpenClose">
|
|
<div class="tabSectionHeader">
|
|
<p class="tabTitle">Error measure</p>
|
|
<span class="svgIcon">
|
|
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M0 25C0 11.1929 11.1929 0 25 0V0C38.8071 0 50 11.1929 50 25V25C50 38.8071 38.8071 50 25 50V50C11.1929 50 0 38.8071 0 25V25Z" fill="#0C7DB1" fill-opacity="0.7"/>
|
|
<path d="M14 20L25 31L36 20" stroke="white" stroke-width="4" stroke-linecap="round"/>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
<div id="Errormeasure" style="width: 100%; height: 450px; padding:10px"></div> <!-- PredictedChart.js-->
|
|
</div>
|
|
</div>
|
|
<div class="tabSectionDetails">
|
|
<pre id="MalwareLogActivity">
|
|
{% for line in logs %}
|
|
<script>
|
|
setInterval(fetchLogs, 2000);
|
|
|
|
</script>
|
|
|
|
<p>{{line}}</p>
|
|
|
|
{% endfor %}
|
|
|
|
</pre>
|
|
|
|
</div>
|
|
<!-- {% if message %}
|
|
<div class="alert alert-warning" role="alert">
|
|
{{ message }}
|
|
</div>
|
|
{% endif %} -->
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<h2 style="display:none;" class="ipNumber"></h2>
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="{% static 'malware/js/PredictedChart.js' %}"></script>
|
|
<script type="application/json" id="class-frequency-data">{{ class_frequency|safe }}</script>
|
|
|
|
<!-- <script type="text/javascript">
|
|
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
// Use the Django context variable to populate the frequencies
|
|
var classData = document.getElementById('class-frequency-data').textContent
|
|
classData = classData.replace(/'/g, '"');
|
|
var classFrequency = JSON.parse(classData);
|
|
|
|
var data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["Ramnit", parseInt(classFrequency['Ramnit']), "#000080"],
|
|
["Lollipop", parseInt(classFrequency['LolliPop']), "#0000ff"],
|
|
["Kelihos_ver3", parseInt(classFrequency['Kelihos_ver3']), "#0081ff"],
|
|
["Vundo", parseInt(classFrequency['Vundo']), "#17ffe2"],
|
|
["Simda", parseInt(classFrequency['Simda']), "#7bff7b"],
|
|
["Tracur", parseInt(classFrequency['Tracur']), "#e3ff15"],
|
|
["Kelihos_ver1", parseInt(classFrequency['Kelihos_ver1"']), "#ff9801"],
|
|
["Obfuscator.ACY", parseInt(classFrequency['Obfuscator.ACY']), "#ff2200"],
|
|
["Gatak", parseInt(classFrequency['Gatak']), "#810000"],
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "",
|
|
height: 430,
|
|
width: 900,
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
vAxis: {
|
|
title: 'Count',
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 200
|
|
},
|
|
ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
|
|
// gridlines: { count: 11 },
|
|
// textStyle: { color: '#ffffff',font_size: 12 }
|
|
},
|
|
hAxis: {
|
|
title: 'Class',
|
|
slantedText: true, // Tilt the text to prevent collisions
|
|
},
|
|
legend: { position: 'none' },
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("barMalwareChart"));
|
|
chart.draw(view, options);
|
|
}
|
|
</script> -->
|
|
|
|
<!-- <script type="text/javascript">
|
|
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
// Function to fetch and draw the chart
|
|
function updateChart() {
|
|
// Use the Django context variable to populate the frequencies
|
|
var classData = document.getElementById('class-frequency-data').textContent
|
|
classData = classData.replace(/'/g, '"');
|
|
var classFrequency = JSON.parse(classData);
|
|
|
|
var data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["Ramnit", parseInt(classFrequency['Ramnit']), "#000080"],
|
|
["Lollipop", parseInt(classFrequency['LolliPop']), "#0000ff"],
|
|
["Kelihos_ver3", parseInt(classFrequency['Kelihos_ver3']), "#0081ff"],
|
|
["Vundo", parseInt(classFrequency['Vundo']), "#17ffe2"],
|
|
["Simda", parseInt(classFrequency['Simda']), "#7bff7b"],
|
|
["Tracur", parseInt(classFrequency['Tracur']), "#e3ff15"],
|
|
["Kelihos_ver1", parseInt(classFrequency['Kelihos_ver1']), "#ff9801"],
|
|
["Obfuscator.ACY", parseInt(classFrequency['Obfuscator.ACY']), "#ff2200"],
|
|
["Gatak", parseInt(classFrequency['Gatak']), "#810000"],
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "",
|
|
height: 430,
|
|
width: 900,
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
vAxis: {
|
|
title: 'Count',
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 200
|
|
},
|
|
ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
|
|
},
|
|
hAxis: {
|
|
title: 'Class',
|
|
slantedText: true, // Tilt the text to prevent collisions
|
|
},
|
|
legend: { position: 'none' },
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("barMalwareChart"));
|
|
chart.draw(view, options);
|
|
}
|
|
|
|
// Initial draw
|
|
updateChart();
|
|
|
|
// Set up real-time updates every 5 seconds
|
|
setInterval(updateChart, 1000);
|
|
}
|
|
</script> -->
|
|
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load("current", { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
// Function to fetch and draw the chart
|
|
function updateChart() {
|
|
// Use the Django context variable to populate the frequencies
|
|
var classData = document.getElementById('class-frequency-data').textContent;
|
|
classData = classData.replace(/'/g, '"');
|
|
var classFrequency = JSON.parse(classData);
|
|
|
|
// Check if classFrequency is empty or contains invalid data
|
|
var isEmpty = Object.values(classFrequency).every(function(value) {
|
|
return value === 0 || value === null || value === undefined;
|
|
});
|
|
|
|
// If data is empty, show a placeholder or empty graph
|
|
if (isEmpty) {
|
|
document.getElementById("barMalwareChart").innerHTML = "<h3>No data available to display</h3>";
|
|
return; // Stop further execution if no data
|
|
}
|
|
|
|
// Prepare the data for the chart
|
|
var data = google.visualization.arrayToDataTable([
|
|
["Element", "Density", { role: "style" }],
|
|
["Ramnit", parseInt(classFrequency['Ramnit']), "#000080"],
|
|
["Lollipop", parseInt(classFrequency['LolliPop']), "#0000ff"],
|
|
["Kelihos_ver3", parseInt(classFrequency['Kelihos_ver3']), "#0081ff"],
|
|
["Vundo", parseInt(classFrequency['Vundo']), "#17ffe2"],
|
|
["Simda", parseInt(classFrequency['Simda']), "#7bff7b"],
|
|
["Tracur", parseInt(classFrequency['Tracur']), "#e3ff15"],
|
|
["Kelihos_ver1", parseInt(classFrequency['Kelihos_ver1']), "#ff9801"],
|
|
["Obfuscator.ACY", parseInt(classFrequency['Obfuscator.ACY']), "#ff2200"],
|
|
["Gatak", parseInt(classFrequency['Gatak']), "#810000"],
|
|
]);
|
|
|
|
var view = new google.visualization.DataView(data);
|
|
view.setColumns([0, 1, 2]);
|
|
|
|
var options = {
|
|
title: "",
|
|
height: 430,
|
|
width: 900,
|
|
legend: { position: "none" },
|
|
backgroundColor: '#0c212b',
|
|
tooltip: { trigger: 'none' },
|
|
vAxis: {
|
|
title: 'Count',
|
|
viewWindow: {
|
|
min: 0,
|
|
max: 200
|
|
},
|
|
ticks: [0, 20, 40, 60, 80, 100, 120, 140, 160, 180, 200],
|
|
},
|
|
hAxis: {
|
|
title: 'Class',
|
|
slantedText: true, // Tilt the text to prevent collisions
|
|
},
|
|
legend: { position: 'none' },
|
|
};
|
|
|
|
var chart = new google.visualization.ColumnChart(document.getElementById("barMalwareChart"));
|
|
chart.draw(view, options);
|
|
}
|
|
|
|
// Initial draw
|
|
updateChart();
|
|
|
|
// Set up real-time updates every 5 seconds
|
|
setInterval(updateChart, 1000);
|
|
}
|
|
</script>
|
|
|
|
<script type="application/json" id="class-average-data">{{ average|safe }}</script>
|
|
<script>
|
|
|
|
var classData = document.getElementById('class-average-data').textContent
|
|
classData = classData.replace(/'/g, '"');
|
|
var malwareData = JSON.parse(classData);
|
|
|
|
|
|
const datasets = Object.entries(malwareData).map(([label, radius], index) => ({
|
|
label,
|
|
data: [{ x: index + 1, y: 5, r: radius * 50 }], // Adjust 'y' value as needed
|
|
backgroundColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`,
|
|
borderColor: `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 1)`,
|
|
borderWidth: 1,
|
|
}));
|
|
|
|
const data = {
|
|
datasets
|
|
};
|
|
|
|
const config = {
|
|
type: 'bubble',
|
|
data: data,
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
title: {
|
|
display: true,
|
|
text: 'Malware Class'
|
|
},
|
|
ticks: {
|
|
callback: function(value, index, values) {
|
|
return Object.keys(malwareData)[index] || value;
|
|
}
|
|
}
|
|
},
|
|
y: {
|
|
title: {
|
|
display: true,
|
|
text: 'Y Axis'
|
|
},
|
|
ticks: {
|
|
display: false, // Add this line to hide the Y axis labels
|
|
beginAtZero: true
|
|
}
|
|
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(tooltipItem) {
|
|
return `${tooltipItem.dataset.label}: ${tooltipItem.raw.r}`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
animation: {
|
|
duration: 1000,
|
|
easing: 'easeOutBounce',
|
|
}
|
|
}
|
|
};
|
|
|
|
const ctx = document.getElementById('myCanvas').getContext('2d');
|
|
const myChart = new Chart(ctx, config);
|
|
</script>
|
|
<!-- <script src="{% static 'malware/js/barMalwareChart.js' %}"></script> -->
|
|
<!-- <script src="{% static 'malware/js/MalwareBubbleChart.js' %}"></script> -->
|
|
<script src="{% static 'malware/js/DistributionTrainData.js' %}"></script>
|
|
<script src="{% static 'malware/js/DistributionTrainTwoData.js' %}"></script>
|
|
<script src="{% static 'malware/js/DistributionTrainThreeData.js' %}"></script>
|
|
<script src="{% static 'malware/js/ConfusionMatrix.js' %}"></script>
|
|
<!-- <script src="{% static 'malware/js/log-Activity.js' %}"></script> -->
|
|
<script src="{% static 'malware/js/malware.js' %}"></script>
|
|
<script src="{% static 'malware/js/bubble.js' %}"></script>
|
|
</body>
|
|
{% endblock %}
|
|
</html> |