Chart.js graphs rendered incorrectly on Chrome and Edge - google-chrome
Something I just noticed, is that graphs in Chart.js are rendered with double X and Y axes on Chrome and Edge. They are looking as I want them on Firefox. I'm sure they were ok on Chrome a few weeks ago.
Is this a bug in Graph.js or do I have my code wrong?
This is how it looks in Firefox:
And this is in Edge and Chrome:
There is a second Y axis ranging from 0 to 1, and the X axis has the days in what looks like Unix time and a secondary axis with times per 4 hours.
The website is http://www.maasluip.nl/energyprice/SPOT.html
The script for the first graph is this:
var ctx = document.getElementById('SpotWeek');
var PVDay = new Chart(ctx, {
type: 'line',
data: {
labels: [
'2022-11-12 00:00:00','2022-11-12 01:00:00','2022-11-12 02:00:00','2022-11-12 03:00:00','2022-11-12 04:00:00','2022-11-12 05:00:00','2022-11-12 06:00:00','2022-11-12 07:00:00','2022-11-12 08:00:00','2022-11-12 09:00:00','2022-11-12 10:00:00','2022-11-12 11:00:00','2022-11-12 12:00:00','2022-11-12 13:00:00','2022-11-12 14:00:00','2022-11-12 15:00:00','2022-11-12 16:00:00','2022-11-12 17:00:00','2022-11-12 18:00:00','2022-11-12 19:00:00','2022-11-12 20:00:00','2022-11-12 21:00:00','2022-11-12 22:00:00','2022-11-12 23:00:00','2022-11-13 00:00:00','2022-11-13 01:00:00','2022-11-13 02:00:00','2022-11-13 03:00:00','2022-11-13 04:00:00','2022-11-13 05:00:00','2022-11-13 06:00:00','2022-11-13 07:00:00','2022-11-13 08:00:00','2022-11-13 09:00:00','2022-11-13 10:00:00','2022-11-13 11:00:00','2022-11-13 12:00:00','2022-11-13 13:00:00','2022-11-13 14:00:00','2022-11-13 15:00:00','2022-11-13 16:00:00','2022-11-13 17:00:00','2022-11-13 18:00:00','2022-11-13 19:00:00','2022-11-13 20:00:00','2022-11-13 21:00:00','2022-11-13 22:00:00','2022-11-13 23:00:00','2022-11-14 00:00:00','2022-11-14 01:00:00','2022-11-14 02:00:00','2022-11-14 03:00:00','2022-11-14 04:00:00','2022-11-14 05:00:00','2022-11-14 06:00:00','2022-11-14 07:00:00','2022-11-14 08:00:00','2022-11-14 09:00:00','2022-11-14 10:00:00','2022-11-14 11:00:00','2022-11-14 12:00:00','2022-11-14 13:00:00','2022-11-14 14:00:00','2022-11-14 15:00:00','2022-11-14 16:00:00','2022-11-14 17:00:00','2022-11-14 18:00:00','2022-11-14 19:00:00','2022-11-14 20:00:00','2022-11-14 21:00:00','2022-11-14 22:00:00','2022-11-14 23:00:00','2022-11-15 00:00:00','2022-11-15 01:00:00','2022-11-15 02:00:00','2022-11-15 03:00:00','2022-11-15 04:00:00','2022-11-15 05:00:00','2022-11-15 06:00:00','2022-11-15 07:00:00','2022-11-15 08:00:00','2022-11-15 09:00:00','2022-11-15 10:00:00','2022-11-15 11:00:00','2022-11-15 12:00:00','2022-11-15 13:00:00','2022-11-15 14:00:00','2022-11-15 15:00:00','2022-11-15 16:00:00','2022-11-15 17:00:00','2022-11-15 18:00:00','2022-11-15 19:00:00','2022-11-15 20:00:00','2022-11-15 21:00:00','2022-11-15 22:00:00','2022-11-15 23:00:00','2022-11-16 00:00:00','2022-11-16 01:00:00','2022-11-16 02:00:00','2022-11-16 03:00:00',
'2022-11-16 04:00:00','2022-11-16 05:00:00','2022-11-16 06:00:00','2022-11-16 07:00:00','2022-11-16 08:00:00','2022-11-16 09:00:00','2022-11-16 10:00:00','2022-11-16 11:00:00','2022-11-16 12:00:00','2022-11-16 13:00:00','2022-11-16 14:00:00','2022-11-16 15:00:00','2022-11-16 16:00:00','2022-11-16 17:00:00','2022-11-16 18:00:00','2022-11-16 19:00:00','2022-11-16 20:00:00','2022-11-16 21:00:00','2022-11-16 22:00:00','2022-11-16 23:00:00','2022-11-17 00:00:00','2022-11-17 01:00:00','2022-11-17 02:00:00','2022-11-17 03:00:00','2022-11-17 04:00:00','2022-11-17 05:00:00','2022-11-17 06:00:00','2022-11-17 07:00:00','2022-11-17 08:00:00','2022-11-17 09:00:00','2022-11-17 10:00:00','2022-11-17 11:00:00','2022-11-17 12:00:00','2022-11-17 13:00:00','2022-11-17 14:00:00','2022-11-17 15:00:00','2022-11-17 16:00:00','2022-11-17 17:00:00','2022-11-17 18:00:00','2022-11-17 19:00:00','2022-11-17 20:00:00','2022-11-17 21:00:00','2022-11-17 22:00:00','2022-11-17 23:00:00'],
datasets: [{
label: 'SPOT prijs ex BTW',
data: [
'0.13780','0.13421','0.13001','0.12680','0.12944','0.12968','0.15800','0.17250','0.17410','0.16693','0.14185','0.13030','0.13378','0.13782','0.14988','0.20001','0.18990','0.24070','0.23800','0.19971','0.17807','0.16760','0.16127','0.15870','0.16880','0.15221','0.14300','0.12700','0.13407','0.13529','0.13529','0.15075','0.15596','0.13157','0.12031','0.13300','0.13013','0.12500','0.13746','0.14145','0.14913','0.19890','0.19797','0.17310','0.15872','0.15000','0.14200','0.13300','0.10454','0.10411','0.11910','0.10800','0.11955','0.11999','0.16720','0.21661','0.22470','0.19257','0.17470','0.16812','0.15866','0.17510','0.20732','0.21285','0.21315','0.25418','0.27039','0.19794','0.17530','0.16800','0.15791','0.15000','0.13565','0.12818','0.12899','0.10828','0.10863','0.12594','0.16405','0.21193','0.22140','0.21000','0.20010','0.19868','0.18983','0.20565','0.22216','0.22299','0.21735','0.22167','0.21501','0.21493','0.17498','0.15000','0.13876','0.13600','0.10180','0.10040','0.14255','0.09686','0.07959','0.09110','0.12074','0.22990','0.28794','0.21540','0.17442','0.16378','0.16682','0.17400','0.20107','0.22058','0.23610','0.27746','0.26486','0.20207','0.15420','0.11410','0.09948','0.06491','0.05116','0.02777','0.01633','0.00510','0.00588','0.01106','0.09491','0.18000','0.22300','0.26180','0.20550','0.17990','0.17050','0.16500','0.18000','0.17950','0.17990','0.29473','0.30000','0.23200','0.19500','0.14684','0.15150','0.13242'],
backgroundColor: ['rgba(54, 162, 235, 1)'],
borderColor: ['rgba(54, 162, 235, 1)'],
borderWidth: 1,
pointRadius: 1,
},{
label: 'Consumentenprijs',
data: [
'0.24816','0.24382','0.23873','0.23485','0.23804','0.23833','0.27260','0.29015','0.29208','0.28341','0.25306','0.23908','0.24329','0.24818','0.26278','0.32343','0.31120','0.37267','0.36940','0.32307','0.29689','0.28422','0.27656','0.27345','0.28567','0.26560','0.25445','0.23509','0.24365','0.24512','0.24512','0.26383','0.27013','0.24062','0.22700','0.24235','0.23888','0.23267','0.24775','0.25258','0.26187','0.32209','0.32096','0.29087','0.27347','0.26292','0.25324','0.24235','0.20791','0.20739','0.22553','0.21210','0.22608','0.22661','0.28373','0.34352','0.35331','0.31443','0.29281','0.28485','0.27340','0.29329','0.33228','0.33897','0.33933','0.38898','0.40859','0.32093','0.29353','0.28470','0.27249','0.26292','0.24556','0.23652','0.23750','0.21244','0.21286','0.23381','0.27992','0.33786','0.34931','0.33552','0.32354','0.32182','0.31112','0.33026','0.35023','0.35124','0.34441','0.34964','0.34158','0.34149','0.29315','0.26292','0.24932','0.24598','0.20460','0.20290','0.25391','0.19862','0.17772','0.19165','0.22752','0.35960','0.42983','0.34205','0.29247','0.27959','0.28327','0.29196','0.32472','0.34832','0.36710','0.41715','0.40190','0.32593','0.26800','0.21948','0.20179','0.15996','0.14332','0.11502','0.10118','0.08759','0.08854','0.09480','0.19626','0.29922','0.35125','0.39820','0.33008','0.29910','0.28773','0.28107','0.29922','0.29862','0.29910','0.43804','0.44442','0.36214','0.31737','0.25910','0.26474','0.24165'],
backgroundColor: ['rgba(255, 73, 17, 1)'],
borderColor: ['rgba(255, 73, 17, 1)'],
borderWidth: 2,
pointRadius: 1,
}]
},
options: {
animation: false,
scales: {
yAxis: {
position: 'left',
beginAtZero: true,
title: {
text: 'Euro',
display: true
},
},
xAxis: {
type: 'time',
ticks: {
align: "center",
source: "data",
callback: function(value, index, values) {
return ((index % 24) == 0) ? value : null;}
},
offset: false,
padding: 1,
time: {
tooltipFormat: 'DD-MM-YYYY HH:mm',
displayFormats: {
hour: 'DD MMM'
}
}
}
}
}
});
I found out one thing: I have my x- and y-axis named xAxis and yAxis, and apparently that does not work anymore. Renaming them to x and y did fix a lot of errors but I still have some graphs that behave differently. Maybe they changed the logic of their processing, I don't know. Can't find anything about that.
Related
Manim Diagonal bar_names
I want to animate a bar chart in manim and it works just fine. However, the bar_names are long and have to be displayed rather small. Is there a way to rotate them so they can be displayed bigger?
CONFIG = {
"max_value" : 100,
"bar_names" : ["Fleisch von Wiederkäuern","Anderes Fleisch, Fisch","Milchprodukte","Früchte", "Snacks, etc.","Gemüse","Pflanzliche Öle","Getreideprodukte", "Pflanzliche Proteine"],
"bar_label_scale_val" : 0.2,
"bar_stroke_width" : 0,
"width" : 10,
"height" : 6,
"label_y_axis" : False,
}
def construct(self):
composition = [96.350861, 18.5706488, 14.7071608, 8.25588773, 7.33856028, 4.24083463, 1.65574964, 1.36437485, 1]
chart = BarChart(values=composition, **self.CONFIG)
self.play(Write(chart), run_time=2)```
Maybe something like this?
(I just made new labels so delete the old ones, or delete their size)
(also I modified some of the names because my Latex crashed with some characters)
CONFIG = {
"height": 4,
"width": 10,
"n_ticks": 4,
"tick_width": 0.2,
"label_y_axis": False,
"y_axis_label_height": 0.25,
"max_value": 100,
"bar_colors": [BLUE, YELLOW],
"bar_fill_opacity": 0.8,
"bar_stroke_width": 0,
"bar_names": ["Fleisch von Wiederkuern","Anderes Fleisch, Fisch","Milchprodukte","Frchte", "Snacks, etc.","Gemse","Pflanzliche le","Getreideprodukte", "Pflanzliche Proteine"],
"bar_label_scale_val": 0
}
def construct(self):
bar_names=["Fleisch von Wiederkuern","Anderes Fleisch, Fisch","Milchprodukte","Frchte", "Snacks, etc.","Gemse","Pflanzliche le","Getreideprodukte", "Pflanzliche Proteine"]
Lsize=0.55
Lseparation=1.1
Lpositionx=-5.4
Lpositiony=2
bar_labels = VGroup()
for i in range(len(bar_names)):
label = TexMobject(bar_names[i])
label.scale(Lsize)
label.move_to(DOWN*Lpositiony+(i*Lseparation+Lpositionx)*RIGHT)
label.rotate(np.pi*(1.5/6))
bar_labels.add(label)
composition = [96.350861, 18.5706488, 14.7071608, 8.25588773, 7.33856028, 4.24083463, 1.65574964, 1.36437485, 1]
chart = BarChart(values=composition, **self.CONFIG)
chart.shift(UP)
self.play(Write(chart),Write(bar_labels), run_time=2)
# Manim Community Version 0.7.0 in Google Colab
%%manim -qm -v WARNING BarChartExample2
import numpy as np
mobject.probability.np = np
class BarChartExample2(Scene):
CONFIG = {
"height": 4,
"width": 10,
"n_ticks": 4,
"tick_width": 0.2,
"label_y_axis": False,
"y_axis_label_height": 0.25,
"max_value": 100,
"bar_colors": [BLUE, YELLOW],
"bar_fill_opacity": 0.8,
"bar_stroke_width": 0,
"bar_names": ["Fleisch von Wiederkuern","Anderes Fleisch, Fisch","Milchprodukte",
"Frchte", "Snacks, etc.","Gemse","Pflanzliche le","Getreideprodukte", "Pflanzliche Proteine"],
"bar_label_scale_val": 0
}
def construct(self):
bar_names=["Fleisch von Wiederkuern","Anderes Fleisch, Fisch","Milchprodukte",
"Frchte", "Snacks, etc.","Gemse","Pflanzliche le","Getreideprodukte", "Pflanzliche Proteine"]
Lsize=0.55
Lseparation=1.1
Lpositionx=-5.4
Lpositiony=2
bar_labels = VGroup()
for i in range(len(bar_names)):
#label = TexMobject(bar_names[i])
label = MathTex(bar_names[i])
label.scale(Lsize)
label.move_to(DOWN*Lpositiony+(i*Lseparation+Lpositionx)*RIGHT)
label.rotate(np.pi*(1.5/6))
bar_labels.add(label)
composition = [96.350861, 18.5706488, 14.7071608, 8.25588773, 7.33856028, 4.24083463, 1.65574964, 1.36437485, 1]
chart = BarChart(values=composition,**self.CONFIG)
chart.shift(UP)
self.play(Write(chart),Write(bar_labels), run_time=2)
Categorical data points are not displayed on scatter plot when using multi select drop-down
Suppose we have the following dataframe pulled from SQL called df:
ProdHouse Date_Year Date_Month
Software6 2001 Jan
Software6 2020 Feb
Software1 2004 Mar
Software4 2004 Apr
Software5 2004 May
Software3 2009 Dec
Software5 1995 Dec
Software3 1995 Oct
The objective is to display the total number of products per month. The year is selected using the drop down. It appears that when the x-axis is categorical (i.e month) it does not display the data points. However, if i substitute it with an integer, points are displayed.
def serve_layout():
session_id = str(uuid.uuid4())
return html.Div([ html.Div(session_id, id='session-id', style={'display': 'none'}),
html.Label('Year'),
dcc.Dropdown( id='year-dropdown',
options=[
{'label': year ,'value': year} for year in df['Date_Year'].unique()
],
value=[2020],#[df['Date_Year'].unique()],
multi=True ),
dcc.Graph(id='graph-with-dropdown')
] , style={'width':'33%','display':'inline-block'} )
app.layout = serve_layout
#app.callback(
dash.dependencies.Output('graph-with-dropdown', 'figure'),
[dash.dependencies.Input('year-dropdown', 'value')]) # Add the marks as a State
def update_figure(selected_year):
print('selected_year: ', selected_year)
filtered_df = df[df.Date_Year.isin(selected_year)]
#filtered_df = df[df.Date_Year == selected_year]
df_grouped = filtered_df.groupby(['ProdHouse','Date_Month']).size().rename('Total_Active_Products').reset_index()
traces=[]
for i in filtered_df.ProdHouse.unique():
df_by_ProdHouse = df_grouped[df_grouped['ProdHouse'] == i]
traces.append(go.Scatter(
x=df_by_ProdHouse['Date_Month'], #df_by_ProdHouse['Total_Active_Products'],
y=df_by_ProdHouse['Total_Active_Products'],
##text=df_by_ProdHouse['brand'],
mode='markers',
opacity=0.7,
marker={
'size': 15,
'line': {'width': 0.5, 'color': 'white'}
},
name=i
) )
return {
'data': traces,
'layout': dict(
xaxis={'type': 'linear', 'title': 'Active Products Per Month'},
yaxis={'title': 'Total Active Products'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
hovermode='closest',
transition = {'duration': 500},
)
}
How would one modify the above code so that the data can be displayed on the plot?
This answers the first part of the question which is related to, the points not being displayed. I manage to get the categorical data to display by changing the scatter plot to a bar chart. Since the graph was changed, I removed the mode and type parameters.
#app.callback(
dash.dependencies.Output('graph-with-dropdown', 'figure'),
[dash.dependencies.Input('year-dropdown', 'value')]) # Add the marks as a State
def update_figure(selected_year):
print('selected_year: ', selected_year)
filtered_df = df[df.Date_Year.isin(selected_year)]
df_grouped = filtered_df.groupby(['ProdHouse','Date_Month']).size().rename('Total_Active_Products').reset_index()
traces=[]
for i in filtered_df.ProdHouse.unique():
df_by_ProdHouse = df_grouped[df_grouped['ProdHouse'] == i]
traces.append(go.Bar(
x=df_by_ProdHouse['Date_Month'],
y=df_by_ProdHouse['Total_Active_Products'],
name=i
) )
return {
'data': traces,
'layout': dict(
xaxis={ 'title': 'Active Products Per Month'},
yaxis={'title': 'Total Active Products'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
hovermode='closest',
transition = {'duration': 500},
)
}
Alternatively if you want to still use Scatter plot, convert df['Date_Month'] and df['Date_Year'] from category to object with dates eg: May 2020 is 2020-05-01.
This can be achieved using the following example:
import pandas as pd
df = pd.DataFrame({'ProdHouse': ['software 1', 'software 2', 'software 3', 'software 4', 'software 3'],
'Date_Year': [2018, 2018, 2018, 2018, 2018], 'Date_Month': ['January', 'February', 'March', 'April', 'May'],'Total_Active_Products':[1,2,7,8,6]})
date_1 ='{}-{}'.format(df['Date_Month'].iloc[0], df['Date_Year'].iloc[0])
date_2 = '{}-{}'.format('June', df['Year'].iloc[4])
df['dates'] = pd.date_range(date_1, date_2, freq='M')
print(df)
Since you are now using objects, replace isin with the following:
filtered_df = df[(pd.to_datetime(df.dates).dt.year>=selected_year_min)& (pd.to_datetime(df.dates).dt.year<=selected_year_max)]
Please adjust the above code accordingly. It is designed to get the min and max year from the dropdown.
Lastly, change x input value in scatter plot as shown below:
traces.append(go.Scatter(
x=df_by_ProdHouse['dates'],
y=df_by_ProdHouse['Total_Active_Products'],
mode='lines+markers',
line={
'color': '#CD5C5C',
'width': 2},
marker={
'color': '#CD5C5C',
'size': 10,
'symbol': "diamond-open"
},
# marker_line_width=1.5, opacity=0.6,
) )
return {
'data': traces,
'layout': dict(
xaxis={ 'title': 'Date',
'showticklabels':True,
'linecolor':'rgb(204, 204, 204)',
'linewidth':2,
'ticks':'outside'
},
yaxis={'title': 'Total Active Products'},
margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
legend={'x': 0, 'y': 1},
#marker=dict(color='#CD5C5C', size=1,symbol="diamond-open"),
hovermode='closest',
transition = {'duration': 500},
title={
'text': "Softwares",
'y':0.9,
'x':0.5,
'xanchor': 'center',
'yanchor': 'top'},
font=dict(
color="#7f7f7f"
)
)
}
Can D3.js visualizations be served using Hugo?
I have some D3.js visualizations I want to server on a Github Pages website I made using Hugo. I'm struggling how to include the visualization (html and js file) within the markdown file. Is this possible? If not, can I just use a standalone html file on Hugo? Edit: I implemented the example #timur suggested but the plot still doesn't show.
It's doable, as long as you can include javascript files for D3 itself and your chart definition:
Consider a slightly cut down version of this example:
/static/example.js
margin = ({top: 20, right: 0, bottom: 30, left: 40})
height = 500
width = 500
data = [
{name: "E", value: 0.12702},
{name: "T", value: 0.09056},
{name: "A", value: 0.08167},
{name: "O", value: 0.07507},
{name: "I", value: 0.06966},
{name: "N", value: 0.06749},
{name: "S", value: 0.06327},
{name: "H", value: 0.06094},
{name: "R", value: 0.05987},
{name: "D", value: 0.04253},
{name: "L", value: 0.04025},
{name: "C", value: 0.02782},
{name: "U", value: 0.02758},
{name: "M", value: 0.02406},
{name: "W", value: 0.0236},
{name: "F", value: 0.02288},
{name: "G", value: 0.02015},
{name: "Y", value: 0.01974},
{name: "P", value: 0.01929},
{name: "B", value: 0.01492}
]
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
.call(g => g.select(".domain").remove())
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top])
x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.padding(0.1)
function zoom(svg) {
const extent = [[margin.left, margin.top], [width - margin.right, height - margin.top]];
svg.call(d3.zoom()
.scaleExtent([1, 8])
.translateExtent(extent)
.extent(extent)
.on("zoom", zoomed));
function zoomed() {
x.range([margin.left, width - margin.right].map(d => d3.event.transform.applyX(d)));
svg.selectAll(".bars rect").attr("x", d => x(d.name)).attr("width", x.bandwidth());
svg.selectAll(".x-axis").call(xAxis);
}
}
const svg = d3.select(".visualisation")
.append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom);
svg.append("g")
.attr("class", "bars")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.name))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.attr("class", "x-axis")
.call(xAxis);
svg.append("g")
.attr("class", "y-axis")
.call(yAxis);
content/posts/my-first-post.md
---
title: "D3.js bars"
date: 2020-03-24T00:00:00Z
draft: false
---
### Hello
<div class="visualisation"> </div> <!-- Hugo supports html in markdown -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.js"></script> <!-- load d3.js from CDN. you could potentially load it from /static folder as well-->
<script src = "/example.js"></script> <!-- this will pick our scipt up and render the chart -->
This structure might not be ideal as you could probably stick javascript references into reusable layout of some sort and potentially parametrise the chart definition so you didn't have to repeat it for every page. Without knowing your specifics it's however a bit hard to make these suggestions. I'm just hoping it gives you a good enough hint to keep going.
UPD I'm pretty sure the code itself is working: see this jsfiddle. Hugo has different file layout, but point I'm trying to make here is it should all be a matter of ensuring both your javascript files get loaded.
UPD2 starting version 0.60.0 Hugo will not by default allow unsafe html content (such as tags). To get it to work you need to enable it:
markup:
goldmark:
renderer:
unsafe: true
Looking To Update/Increase Embedded Array Objects Numeric Value
I have the following item within my Mongo DB Collection
db.teams.insert({
team_id: "spa2",
date_founded: new Date("Nov 04, 1914"),
league: "La Liga",
points: 72,
name: "Real Madrid",
players: [ { p_id: "Ronaldo", goal: 135, caps: 134, age: 28 },
{ p_id: "Bale", goal: 75, caps: 45, age: 27 },
{ p_id: "Marcelo", goal: 11, caps: 25, age: 31 },
{ p_id: "Benzema", goal: 125, caps: 95, age: 22 } ]
});
I want to be able to increase the number of goals scored by 3.
I have tried all morning to find a demo of this, but cant find anything near enough for me to get it to work.
To increase the number you should use $inc operator. To do that for one particular document inside players array you should use positional operator.
So entire operations should look like this:
db.teams.update({_id: ObjectId("5a48d65f3a1e3fc4b06b787f"), "players.p_id": "Ronaldo"}, {$inc: {"players.$.goal": 3}})
This will update only goals for Ronaldo. If you want to update goals for all players you should use the new all positional operator $[]
db.teams.update({_id: ObjectId("5a48d65f3a1e3fc4b06b787f")}, {$inc: {"players.$[].goal": 3}})
jqGrid - Pagination not working properly
As you can see in this image
I have 13 records on my DB but the pager says it has only 1 page (with 10 rows), which is not correct.
Relevant part of the code from my .js
function cria(){
$("#grid").jqGrid({
datatype: 'json',
url: 'json.jsp',
jsonReader: {repeatitems: false},
pager: '#paginado',
rowNum: 10,
rowList: [10,20,30],
emptyrecords: "Não há registros.",
recordtext: "Registros {0} - {1} de {2}",
pgtext: "Página {0} de {1}",
colNames:['Código','Descrição'],
colModel:[
{name:'codigo', width:80, sorttype:"int", sortable: true, editable: false},
{name:'descricao', width:120, sortable: true, editable: true, editrules:{required:true}}
],
viewrecords: true,
editurl:"dadosGrid.jsp?edit=true",
caption: "Grupos",
hiddengrid: true
});
$("#grid").jqGrid('navGrid','#paginado',{},
{edit:true,url:"Adm?aux=edit",closeAfterEdit:true,reloadAfterSubmit:true},
{add:true,url:"Adm?aux=add",closeAfterAdd:true,reloadAfterSubmit:true},
{del:false},
{search:true},
{refresh:true});
};
Relevant part of the code from my .jsp
String json = "[";
for (UserAux user : users ){
json += "{";
json += "\"codigo\":\""+user.getCod()+"\",";
json += "\"descricao\":\""+user.getDescricao()+"\",";
json += "},";
}
json = json.substring(0,json.length()-1);
json += "]";
out.println(json);
%>
Default options of jqGrid means that you implements server side paging. If you want to returns all data at once from the server (which would be good choice if you have 13 records) you should just add loadonce: true option.
Additionally I would recommend you to add gridview: true, autoencode: true and height: "auto" option to your jqGrid. Moreover you should remove edit:true, del:false, search:true and refresh:true which you use inside of options navGrid because you use there on the wrong place. If you want to specify the options you should specify properties of the second parameter (which is {} in your code).