What's wrong with this morrisjs javascript ? http://jsbin.com/dituriheje/edit?html,js,output )
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<meta charset=utf-8 />
<title>Morris.js Line Chart Example</title>
</head>
<body>
<div id="js_stats"></div>
<script>
Morris.Line({
element: 'js_stats',
data: [
{y: "Context 1", E: 0.0247578, D: 0.0250694, A: 0.00205555, B: 0.00445085, C: 0.011262},
{y: "Context 2", E: 0.025153150000000003, D: 0.02422775, A: 0.0020365, B: 0.0044665, C: 0.01137645},
{y: "Context 3", E: 0.0254322, D: 0.024671699999999998, A: 0.0022679, B: 0.0045135, C: 0.0114602},
{y: "Context 4", E: 0.02603472, D: 0.0249791, A: 0.00192968, B: 0.00437542, C: 0.01089924},
{y: "Context 5", E: 0.025053799999999998, D: 0.0255343, A: 0.002256, B: 0.0043565, C: 0.0118452}
],
xkey: 'y',
ykeys: ["A", "B", "C", "D", "E"],
labels: ["Strategy 1", "Strategy 2", "Strategy 3", "Strategy 4", "Strategy 5"]
});
</script>
</body>
</html>
Morris work if i set int value in y axis, like y: "1". But i want String value, how to do that ?
Morris graphs will normally try to interpret strings as dates (Docs).
To prevent this use parseTime : false as an option to the Morris.line.
It is then up to you to ensure that there is sufficient room for the labels. You can play with xLabelAngle to make it fit.
Related
Afternoon,
I'm facing a problem with pymongo, I'm not able to set up correctly the parameter to insert into MongoDB via insert_many(). I came across with de following error:
TypeError: document must be an instance of dict, bson.son.SON,
bson.raw_bson.RawBSONDocument, or a type that inherits from
collections.MutableMapping [while running 'Insere no MongoDB']
What am I doing wrong ?
class InsertMongoDB(beam.DoFn):
def process(self, element):
arqJson=json.loads(element)
client = MongoClient("mongodb://user:password#mkp-cr-marketplace-core.lcr88.gcp.mongodb.net/db-poc-base360?retryWrites=true&w=majority%20")
db = client['db-poc-base360']
db.tbPropostaSucesso.insert_many(arqJson)
# tbPropostaErro = db['tbPropostaErro']
# tbPropostaErro
resultado = 0
yield resultado
I receive a messagem from Google PubSub and forward it to a method called InsertMongoDB().
I don't know how to suit my massage, whose value is in a json format, to use it correctly in the insert_many().
When I debug my variable "arqJson" has :
The json that I'm using is :
{
"Status": "Sucesso ",
"Documento": {
"Apolice": [{
"ItemAuto": [{
"nmTipo": "FOX",
"nrItem": "000001",
"nmMarca": "VOLKSWAGEN",
"aaModelo": "2017",
"cdModelo": "0017664",
"nmModelo": "TRENDLINE 1.0 FLEX 12V 5P",
"aaFabricacao": "2016",
"nmTipoVeiculo": "Hatch"
}, {
"nmTipo": "FOX",
"nrItem": "000001",
"nmMarca": "VOLKSWAGEN",
"aaModelo": "2017",
"cdModelo": "0017664",
"nmModelo": "TRENDLINE 1.0 FLEX 12V 5P",
"aaFabricacao": "2016",
"nmTipoVeiculo": "Hatch"
}],
"ItemProp": [{
"dsUF": "MG",
"idLocal": "000001",
"dsCidade": "BELO HORIZONTE",
"dsEndereco": "RUA RUA RUA",
"dsComplemento": "CASA"
}],
"cdEmpresa": "1",
"idApolice": "501741",
"idEndosso": "000000",
"cdCarteira": "431",
"cdSucursal": "010",
"cdPatrimonio": "1",
"nrItemContrato": "2",
"dsTipoDocumento": "A",
"cdVeiculoSegurado": "1"
}],
"Cliente": [{
"cdCliente": "1",
"nmCliente": "Lucas",
"nrCpfCnpj": "4355582833",
"icRegistroAtivo": "1",
"cdAcaoInformacao": "A",
"dtAcaoInformacao": "2020-02-02",
"cdServicoAcaoInformacao": "cdServicoAcao",
"cdUsuarioAcaoInformacao": "cdUsuarioAcao"
}, {
"cdCliente": "2",
"nmCliente": "Lucas",
"nrCpfCnpj": "43331971",
"icRegistroAtivo": "1",
"cdAcaoInformacao": "A",
"dtAcaoInformacao": "2020-02-01",
"cdServicoAcaoInformacao": "cdServicoAcao2",
"cdUsuarioAcaoInformacao": "cdUsuarioAcao2"
}],
"Mensagem": [{
"cdMensagem": "1",
"dsMensagem": "Teste de mensagem"
}],
"EnderecoCobranca": [{
"dsUF": "RS",
"dsBairro": "INTEGRAÇÃO",
"dsCidade": "PAROBE",
"cdEndereco": 1,
"dsEndereco": "RUA RUA RUA",
"nrEndereco": "280",
"dsComplemento": "",
"icRegistroAtivo": "1",
"cdAcaoInformacao": "A",
"dtAcaoInformacao": "2020-02-02",
"cdServicoAcaoInformacao": "cdServicoAcao",
"cdUsuarioAcaoInformacao": "cdUsuarioAcao"
}, {
"dsUF": "SP",
"dsBairro": "INTEGRAÇÃO2",
"dsCidade": "POC2",
"cdEndereco": 2,
"dsEndereco": "RUA B",
"nrEndereco": "222",
"dsComplemento": "CASA 2",
"icRegistroAtivo": "1",
"cdAcaoInformacao": "A",
"dtAcaoInformacao": "2020-02-01",
"cdServicoAcaoInformacao": "cdServicoAcao2",
"cdUsuarioAcaoInformacao": "cdUsuarioAcao2"
}]
}
}
2020/11/20:
At the moment I'm struggling with the format of arqJson that I need to use in the insert_one(arqJson).
I forgot to mention that my method InsertMongoDB receives the arqJson from another method called InsertPostgreSQL.
InsertPostgreSQL does:
Receive the message from Pubsub;
-Transform the element : json.dumps(json.loads(element))
Save it into arqJson. After that, InsertMongoDB is called.
At this moment, I don't know how to format "element" (whose type is list) and save it into arqJson, because I have this error:
raise TypeError("%s must be an instance of dict, bson.son.SON, "
TypeError: document must be an instance of dict, bson.son.SON,
bson.raw_bson.RawBSONDocument, or a type that inherits from
collections.MutableMapping [while running 'Insere no MongoDB']
Thank you,
Juliano
The solution is :
The first error is because your JSON contains a single document not
multiple docs for an insert many. If you use brackets like this
db.tbPropostaSucesso.insert_many([arqJson]) and convert it to a list
with a single element it will work. Or you can try
insert_one(arqJson). – DaveStSomeWhere 5 hours ago
Thank you DaveStSomeWhere
I had the same problem, and what worked for me was adding retryWrites=false to the connection URL:
mongodb+srv://user:pass#server/etc...etc?retryWrites=false
I would like to know if someone can point me to the right direction. I have a View query named 'VwDashBoard_Areachart' that contains the following five fields with some information from the MSSQL server:
+-----+------+-----+-----+-----+
| ID | Year | OC | SS | ST |
+-----+------+-----+-----+-----+
| 1 | 2017 | 1 | 1 | 3 |
| 2 | 2018 | 1 | 1 | 2 |
| 3 | 2019 | 1 | 1 | 2 |
+-----+------+-----+-----+-----+
and I would like to present the data in the Morris Area Chart. I have the following code in the controller below:
public ActionResult AreaChart()
{
var mc = from mon in db.VwDashBoard_Areachart
select new
{
year = mon.Year,
value = mon.SS,
value1 = mon.OC,
value2 = mon.ST,
};
return Json(mc, JsonRequestBehavior.AllowGet);
}
And here's my script:
$(document).ready(function () {
$.get('#Url.Action("AreaChart")', function (result) {
new Morris.Area({
// ID of the element in which to draw the chart.
element: 'morris-area-charts',//'myfirstchart',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
});
});
});
This is the code from the razor:
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>
Now when I run the script, it displays the Area chart but the chart display looks incorrect and does not display the year on the x-axis. However, the same result looks good if I display the chart as a bar chart.
I was wondering if I have forget to include something in the script or controller or the presentation of data layout from the View query needs to be modified in order to display the Area chart correctly.
I have tried putting in some static data and the Area chart displays correctly. The issue is when I am trying to fetch data from database. Any help would be really appreciated.
Your code looks good. Set the parseTime parameter to false to avoid Morris interpreting dates:
parseTime: false
Please try the following snippet based on your data:
var result = [
{ "year": "2017", "value": 1, "value1": 1, "value2": 3 },
{ "year": "2018", "value": 1, "value1": 1, "value2": 2 },
{ "year": "2019", "value": 1, "value1": 1, "value2": 2 }
];
new Morris.Area({
element: 'morris-area-charts',
data: result,
xkey: 'year',
ykeys: ['value', 'value1', 'value2'],
labels: ['OC', 'SS', 'ST'],
pointFillColors: ['#ffffff'],
lineColors: ['#ccc', '#7a6fbe', '#28bbe3'],
redraw: true,
lineWidth: [1, 1, 1],
pointSize: 1,
parseTime: false
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css" rel="stylesheet" />
<div class="panel-body">
<div id="morris-area-charts"></div>
</div>
I'm using a simple table in conjunction with datatable.js.
If I have 6 or 7 columns no problem. The search and paginator align correctly, but with 3 or 4 columns it shows in three columns.
In https://datatables.net/examples/basic_init/dom.html
show how to properly configure this, but I'm using thymeleaf and complains about the syntax
UPDATE 1
I have posted my question in:
https://datatables.net/forums/discussion/45926/dom-in-thymeleaf-html-pages
and this is that post:
Trying to add the code in: https://datatables.net/examples/basic_init/dom.html
in a thymeleaf html page, but it complains about this code:
"dom": '<"top"i>rt<"bottom"flp><"clear">'
I tried to change " by ' and use escape characters but no way.
This script in my html page, doesnt work:
$(document).ready(function() {
$("#mensuales").DataTable({
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"lenghtMenu": [
[5, 12, 15, 20, -1],
[5, 12, 15, 20, "Todos"]
],
"ordering": true,
stateSave: true
});
});
Allan says the code is correct, but I not be able to use in my pages.
UPDATE 2
Any suggestions?
Thanks
Try with:
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
$(document).ready(function() {
$("#mensuales").DataTable({
"dom": '<"top"i>rt<"bottom"flp><"clear">',
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"
},
"lenghtMenu": [
[5, 12, 15, 20, -1],
[5, 12, 15, 20, "Todos"]
],
"ordering": true,
stateSave: true
});
});
/*]]>*/
</script>
I am using morris.js (which has a dependency on raphael) for creating stacked bar graphs. For each stacked bar I want to show the split for the various levels in the bar as a tooltip. I tried using the hoverCallback: but it doesn't seem to give me control over the particular element I am hovering over. I only get the content for that particular bar.
I have setup a JSBIN example for the same here:
When you hover over the bar it shows the index of the bar at the bottom. I want to show the content as a tool tip instead.JSBIN example
Piece of cake. Demo and code:
<script type="text/javascript">
Morris.Bar({
element: 'bar-example',
data: [
{y: '2006',a: 100,b: 90},
{y: '2007',a: 75,b: 65},
{y: '2008',a: 50,b: 40},
{y: '2009',a: 75,b: 65},
{y: '2010',a: 50,b: 40},
{y: '2011',a: 75,b: 65},
{y: '2012',a: 100,b: 90}
],
hoverCallback: function(index, options, content, row) {
return(content);
},
xkey: 'y',
ykeys: ['a', 'b'],
stacked: true,
labels: ['Series A', 'Series B'] // rename it for the 'onhover' caption change
});
</script>
ARGUMENTS:
1: index: it represents record number i.e. from 0 to n records.
2: content: this is default hover div.
3: option : you data is inside this, before return(content);. do console.log(options) to view details.
4: row : to see the use of row below is an example.
hoverCallback: function (index, options, content, row) {
console.log(row);
var hover = "<div class='morris-hover-row-label'>"+row.period+"</div><div class='morris-hover-point' style='color: #A4ADD3'><p color:black>"+row.park1+"</p></div>";
return hover;
},
UPD:
For flying label, you need to add Morris CSS stylesheet to the code - demo
IMPORTANT NOTE
Flying labels works since version 0.4.3
http://jsbin.com/finuqazofe/1/edit?html,js,output
{ y: ..., x: ..., label: "my own label"},'
...
Morris.Line({
hoverCallback: function(index, options, content) {
var data = options.data[index];
$(".morris-hover").html('<div>Custom label: ' + data.label + '</div>');
},
...
other params
});
Suppose I have two dstore collections: value1 and value2.
I want to find out what items are in value1 but not in value2. So something like this:
var filterCollection = value1.filter(function(item) {
return value2.notExists(item);
})；
But "notExists" function, well, doesn't exist. How do I make this logic work?
As this feature is not included by default in dstore, you can write your own function for comparing the content of your dstores and use the result as you wish.
Here a generic example. You need to populate value1 and value1 with the content of your dstore.
Simplified example.
http://jsbin.com/fozeqamide/edit?html,console,output
Version without using indexOf()
http://jsbin.com/nihelejodo/edit?html,console,output
The way how you loop in your datastore is related to its data structure.
Notes: This is a generic example as the question does not provide any source code, nor an example of data in dstore.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Builder</title>
<style>
</style>
<script>
window.app = {
value1: [1, 2, 3, 4, 5, 6, 4, 8], // populate with date for valu1 dstore
value2: [1, 2, 6, 4, 8], // populate with date for valu1 dstore
valueNotExists: [],
start: function () {
this.notExists();
},
notExists: function () {
this.valueNotExists = this.value1.filter(function (x) {
return this.value2.indexOf(x) < 0;
}.bind(this));
console.log(this.valueNotExists);
},
};
</script>
</head>
<body onload="window.app.start();">
</body>
</html>