I'm trying to create some charts using highcharts, and doing so with dynamic div's.
It's successful on the first chart, but the rest are blank. Viewing the html source I would assume everything is ok.
Here are my dynamically created div's:
<!-- Break Down of all Signature names in each class -->
<% n = 0 %>
<% @sig_class_name_info.each do |scn_chart| %>
<div>
<%= scn_chart[:sig_class_name] %>
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart<%=+n%>" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<%n = n+1%>
<% end %>
This is the html source created:
<!-- Break Down of all Signature names in each class -->
<div>
web-application-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart0" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
attempted-admin
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart1" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
misc-attack
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart2" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
<div>
policy-violation
</div>
<table class="table">
<tr>
<td style='width:100%'>
<div class="panel panel-warning well">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div id="alert_name_bar_chart3" class="panel-body text-center">
</div>
</div>
</td>
</tr>
</table>
Here is the highcharts script:
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
<% n = 0%>
<% @sig_class_name_info.each do |i| %>
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart<%=+n%>",<%= raw i[:sig_class_name].to_json.html_safe %>,<%= raw i[:event_name_count].to_json.html_safe %>,<%= raw i[:event_name].to_json.html_safe %>)
))
<% n = n+1%>
<% end %>
});
</script>
Here is the html source from this highcharts script:
<script type="text/javascript">
var charts = [];
$(function () {
var getChartConfig = function(renderId, title, data, x_axis) {
var config = {};
config.chart = {
renderTo: renderId,
defaultSeriesType: 'column',
margin: [50, 50, 100, 80]
};
new Highcharts.Chart ({
chart: {
type: 'bar',
renderTo: renderId
},
title: {
text: title,
style: {
color: '#52508d'
}
},
xAxis: {
categories: x_axis
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function () {
location.href = this.series.options.url;
}
}
}
}
},
series: [{
data: data,
showInLegend: false,
name: 'Alerts',
url: '/ips_alert_classes?query=',
color: '#2a2874'
}]
});
}
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart0", "web-application-attack", [919,1,1,1], ["drop - WP-Admin attempt","Snort Alert [1:16431:5]","Snort Alert [1:19438:9]","drop - SQL use of concat function with select - likely SQL injection"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart1", "attempted-admin", [1,10,4], ["Snort Alert [1:31976:4]","drop - SERVER-OTHER Wordpress linenity theme LFI attempt","drop - OS-OTHER Bash CGI environment variable injection attempt"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart2", "misc-attack", [1], ["drop - SQL union select - possible sql injection attempt - GET parameter"])
))
charts.push(new Highcharts.Chart(
getChartConfig("alert_name_bar_chart3", "policy-violation", [2], ["drop - POLICY-OTHER Adobe ColdFusion admin interface access attempt"])
))
});
</script>
As you can see the charts.push(new Highcharts.Chart() script seems to be working as expected.
What would cause the first chart to display just fine, but the rest be blank?
Aucun commentaire:
Enregistrer un commentaire