I'm developing a web application that aims to generate monthly reports of some information coming from the mobile application. Since I have little experience with Jquery, I'm having trouble uploading the information on the chart. I'm using the link API to generate the charts. My html page the user will choose the given month that he wants to see the data and click load. Clicking the chart containing the amount of vane installed information and the number of positive vanes per neighborhood will be loaded onto the chart.
follows the image of the graph statically.
Wherethecountrieswillbetheneighborhoodsthathavebeeninstalledthestraws.
Mymodellookslikethis:
@EntitypublicclassPalhetaextendsGenericModel{@Required@ExposepublicStringcodigo;publicStringovos;@Required@Temporal(TemporalType.TIMESTAMP)publicDatedata_instalacao;@Required@Temporal(TemporalType.TIMESTAMP)publicDatedata_coleta;@ExposepublicStringobservacao;@ManyToOne@JoinColumn(name="endereco_id")
@Expose
public Endereco endereco;
@SerializedName("id")
@Expose
@Id
@GeneratedValue
public Integer id;
@ManyToOne(fetch = FetchType.EAGER)
@JoinColumn(name="agente_id")
@Expose
public Agente agente;
@Expose
@Enumerated(EnumType.STRING)
public Status status;
@Expose
@Enumerated(EnumType.STRING)
public Status situacao;
@Expose
@Enumerated(EnumType.STRING)
public Status status_palheta;
@Expose
@Enumerated(EnumType.STRING)
public Status statusMsg;
public Palheta() {
status = Status.ATIVO;
statusMsg = Status.NAO_LIDA;
}
}
My html page where the graphics are generated is like this:
<section class="forms">
<form action="@{Services.relatorios}" method="post">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<label>Selecione o mês:</label> <select id="mes" class="custom-select mb-3 mr-sm-3 mb-sm-0"
name="valor">
<option selected>Selecione...</option>
<option value="1">Janeiro</option>
<option value="2">Fevereiro</option>
<option value="3">Março</option>
<option value="4">Abril</option>
<option value="5">Maio</option>
<option value="6">Junho</option>
<option value="7">Julho</option>
<option value="8">Agosto</option>
<option value="9">Setembro</option>
<option value="10">Outubro</option>
<option value="11">Novembro</option>
<option value="12">Dezembro</option>
</select>
<button id="btRelUm" type="submit" class="btn btn-primary">Carregar</button>
</div>
<!-- Bar Chart -->
<div class="chart col-lg-9 col-12">
<div id="chartdiv2" class="chartdiv float"></div>
</div>
The jquery script to generate the graph:
$(function() {
$("#btRelUm").click(function(e) {
e.preventDefault();
$.ajax({
method: "POST",
url: "/relatorios/palhetasPositivas",
data: {
valor: $("#mes").val()
}
}).done(function(data) {
/**
* PRIMEIRO chart
*/
var chart = AmCharts
.makeChart(
"chartdiv2",
{
"theme" : "light",
"type" : "serial",
"dataProvider" : [ {
"country" : "USA",
"year2004" : 3.5,
"year2005" : 4.2
}, {
"country" : "UK",
"year2004" : 1.7,
"year2005" : 3.1
}, {
"country" : "Canada",
"year2004" : 2.8,
"year2005" : 2.9
}, {
"country" : "Japan",
"year2004" : 2.6,
"year2005" : 2.3
}, {
"country" : "France",
"year2004" : 1.4,
"year2005" : 2.1
}, {
"country" : "Brazil",
"year2004" : 2.6,
"year2005" : 4.9
}, {
"country" : "Russia",
"year2004" : 6.4,
"year2005" : 7.2
}, {
"country" : "India",
"year2004" : 8,
"year2005" : 7.1
}, {
"country" : "China",
"year2004" : 9.9,
"year2005" : 10.1
} ],
"valueAxes" : [ {
"stackType" : "3d",
"unit" : "%",
"position" : "left",
"title" : "Palhetas instaladas - Amarelo / Palhetas positivas - Verde",
} ],
"startDuration" : 1,
"graphs" : [
{
"balloonText" : "Palhetas instaladas <b>[[value]]</b>",
"fillAlphas" : 0.9,
"lineAlpha" : 0.2,
"title" : "2004",
"type" : "column",
"valueField" : "year2004"
},
{
"balloonText" : "Palhetas positivas <b>[[value]]</b>",
"fillAlphas" : 0.9,
"lineAlpha" : 0.2,
"title" : "2005",
"type" : "column",
"valueField" : "year2005"
} ],
"plotAreaFillAlphas" : 0.1,
"depth3D" : 60,
"angle" : 20,
"categoryField" : "country",
"categoryAxis" : {
"gridPosition" : "start"
},
"titles" : [ {
"text" : "Relatório mensal por bairro"
} ],
"export" : {
"enabled" : true,
"menu" : []
}
});
}).fail(function(jqXHR, textStatus) {
});
});
});
My controller Services responsible for creating the service that will feed the graphics.
public static void palhetasInstaladas(Integer valor) {
long palCount = Palheta.count("status = ? and situacao = ? or situacao =? and month(data_instalacao) = ?", Status.ATIVO, Status.INSTALADA, Status.COLETADA, valor);
if (valor == null || valor < 1 ||valor > 12) {
throw new RuntimeException("ERRO!!!");
}
renderJSON(palCount);
}
public static void palhetasPositivas(Integer valor) {
long positivasCount = Palheta.count("status = ? and status_palheta =? and month(data_instalacao) =?", Status.ATIVO,
Status.POSITIVA, valor);
if (valor == null || valor < 1 ||valor > 12) {
throw new RuntimeException("ERRO!!!");
}
renderJSON(positivasCount);
}
Can anyone help me implement these charts?