SQLSTATE[42000]: Syntax error or access violation: 1055 'auth.orders.created_at' isn't in GROUP BY - laravel-6

Knowing that I made it strict
            
this is my problem;
SQLSTATE[42000]: Syntax error or access violation: 1055 'auth.orders.created_at' isn't in GROUP BY (SQL: select YEAR(created_at) as year, MONTH(created_at) as month, SUM(item_count) as sum from orders group by month)
public function index()
{
$categories_count = Category::count();
$products_count = Product::count();
$users_count = User::count();
$orders_count = Order::count();
$sales_data = Order::select(
DB::raw('YEAR(created_at) as year'),
DB::raw('MONTH(created_at) as month'),
DB::raw('SUM(grand_total) as sum')
)->groupBy('month')->get();
dd($sales_data);
return view('dashboard.index', compact('categories_count', 'products_count','users_count','orders_count','sales_data'));
}//end of index
}
#push('scripts')
<script>
//line chart
var line = new Morris.Line({
element: 'line-chart',
resize: true,
data: [
#foreach ($sales_data as $data)
{
ym: "{{ $data->year }}-{{ $data->month }}", sum: "{{ $data->sum }}"
},
#endforeach
],
xkey: 'ym',
ykeys: ['sum'],
labels: ['#lang('site.total')'],
lineWidth: 2,
hideHover: 'auto',
gridStrokeWidth: 0.4,
pointSize: 4,
gridTextFamily: 'Open Sans',
gridTextSize: 10
});
</script> #endpush

Related

Adding data to line chart (chart.js with Vue.js) results in 'too much recursion' error

I'm using chart.js with vue.js. I have a line-chart and I want to add data (later automatically by SSE). I modified another sample, but the error remains the same. It 'crashes' in the call to this.moonData.push (or this.testData.datasets[0].data.push). It must have to do with the ref() of moonData. When I use just the non-ref version, the push succeeds, but the chart isn't updated. BTW, pushing labels succeeds
I'm using chart.js#3.7.0, vue#3.2.29
In Firefox:
Uncaught InternalError: too much recursion
get reactivity.esm-bundler.js:406
toRaw reactivity.esm-bundler.js:927
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
key reactivity.esm-bundler.js:398
value helpers.segment.js:1554
in chrome:
runtime-core.esm-bundler.js?5c40:218 Uncaught RangeError: Maximum call stack size exceeded
at Object.get (reactivity.esm-bundler.js?a1e9:406:1)
at toRaw (reactivity.esm-bundler.js?a1e9:927:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
at Proxy.instrumentations.<computed> (reactivity.esm-bundler.js?a1e9:398:1)
at Proxy.value (helpers.segment.js?dd3d:1554:1)
export default defineComponent({
// name: "PlanetChart",
setup() {
let moonData = ref<number[]>([]);
const testData = computed<ChartData<"line">>(() => ({
labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
datasets: [
{
label: "Number of Moons",
data: moonData.value,
backgroundColor: "rgba(54,73,93,.5)",
borderColor: "#36495d",
borderWidth: 3,
},
{
label: "Planetary Mass (relative to the Sun x 10^-6)",
data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
backgroundColor: "rgba(71, 183,132,.5)",
borderColor: "#47b784",
borderWidth: 3,
},
],
}));
const options = ref<ChartOptions<"line">>({
elements: {
line: {
tension: 0,
fill: false,
},
},
scales: {
yAxes: {
ticks: {
padding: 25,
stepSize: 50,
},
},
},
});
return {
testData,
options,
moonData,
};
},
mounted() {
const ctx = document.getElementById("my-planet-chart") as HTMLCanvasElement;
console.log("Found context: ", ctx);
let c = new Chart(ctx, {
type: "line",
data: this.testData,
options: this.options,
});
console.log("Created chart: ", c);
},
methods: {
AddData() {
console.log("Appending data...");
this.moonData.push(Math.round(Math.random() * 1000));
console.log("moonData: ", this.moonData.length);
// this.testData.datasets[0].data.push(Math.round(Math.random() * 1000));
console.log("moonData: ", this.testData.datasets[0].data);
},
},
});
Any ideas?
I had exactly the same problem yesterday. Got it working using a shallowRef instead of a ref.

Vue computed property functions are never called

I trying to do my own Google Science Journal, but web version with MQTT protocol, but my code have so many bugs.
Some clarification about my code:
google.charts.load is calling in the parent component, then callback make a call for the child component
time props is an interval, change between true and false every second for collect data.
I need to watch changes of a data with multiple dependencies.
How my code works?
When a new instance is created, appear an empty google chart
The chart start to show data every second.
The tittle for the chart change when a new tab is selected and the chart data is erased.
This code has a problem, is the order in which the functions are called (generate some problems with google chart), but I fixed it, moving functions from computed to methods and calling in order.
I just want to know why this computed functions don't work, I mean, they aren't never call.
<template>
<v-card>
<v-tabs
v-model="active_tab"
background-color="red lighten-2"
dark
show-arrows
>
<v-tab
v-for="(n) in tabs"
:key="n.id"
>
{{n.text}}
<v-icon>{{n.icon}}</v-icon>
</v-tab>
</v-tabs>
<div ref="char_div"></div>
</v-card>
</template>
<script>
import debounce from 'debounce'
export default {
name: 'charts',
props:{
time: {
type: Boolean,
default: false
}
},
data(){
return {
chart: null,
options: null,
value: 0,
previus: null,
data: null,
tabs: [
{id: 0, text: "Aceleración lineal", unit: "(m/s²)", icon: ""},
{id: 1, text: "Aceleración en x", unit: "(m/s²)", icon: ""},
{id: 2, text: "Aceleración en y", unit: "(m/s²)", icon: ""},
{id: 3, text: "Aceleración en z", unit: "(m/s²)", icon: ""},
{id: 4, text: "Velocidad lineal", unit: "(m/s)", icon: ""},
{id: 5, text: "Luz ambiental", unit: "(lux)", icon: ""},
{id: 6, text: "Intensidad sonora", unit: "(dB)", icon: ""},
{id: 7, text: "Tono", unit: "(Hz)", icon: ""},
{id: 8, text: "Barómetro", unit: "(hPa)", icon: ""},
{id: 9, text: "Brujula", unit: "grados", icon: ""},
{id: 10, text: "Magnetómetro", unit: "µT", icon: ""},
{id: 11, text: "Humedad", unit: "%", icon: ""},
{id: 12, text: "Temperatura ambiente", unit: "°C", icon: ""}
],
active_tab: 0
}
},
computed: {
newData: function(){
switch (this.active_tab) {
case 0:
this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
break
case 1:
this.value = this.$state.lin_acel.x
break
case 2:
this.value = this.$state.lin_acel.y
break
case 3:
this.value = this.$state.lin_acel.z
break
case 4:
if (this.previus != null){
//var cons = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
var ax = this.$state.lin_acel.x,
ay = this.$state.lin_acel.y,
az = this.$state.lin_acel.z
var nuevo = Date.now()
var vx = ax * ((nuevo - this.previus)/1000),
vy = ay * ((nuevo - this.previus)/1000),
vz = az * ((nuevo - this.previus)/1000)
//this.value += (cons)*((nuevo - this.previus)/1000)
this.value += Math.sqrt(vx^2 + vy^2 + vz^2)
this.previus = nuevo
}else{
this.value = Math.sqrt(this.$state.lin_acel.x^2 + this.$state.lin_acel.y^2 + this.$state.lin_acel.z^2)
this.previus = Date.now()
}
case 5:
this.value = this.$state.lux
break
case 6:
this.value = this.$state.noise
break
case 7:
this.value = this.$state.noise
break
case 8:
this.value = this.$state.presion
break
case 9:
var vector = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
break
case 10:
this.value = Math.sqrt(this.$state.magneto.x^2 + this.$state.magneto.y^2 + this.$state.magneto.z^2)
break
default:
this.value = 0
break
}
},
newOptions(){
console.log("new options")
this.options = {
tittle: this.tabs[this.active_tab].text,
crosshair: {orientation: 'vertical', trigger: 'both'},
legend: 'none',
hAxis: {
format:'mm:ss'
}
}
},
drawchart(){
console.log("chart is drawing")
this.chart.draw(this.data, google.charts.Line.convertOptions(this.options));
},
},
watch: {
time: {
immediate: false,
handler(){
this.addData()
}
},
active_tab: {
inmediate: false,
handler(){
this.updatetable()
}
}
},
methods: {
addData(){
this.data.addRows([[new Date(Date.now()),0]])
},
updatetable(){
this.data = null
this.data = new google.visualization.DataTable(
{cols:
[{label: 'tiempo', id: 'x', type: 'date'},
{label: String(this.tabs[this.active_tab].text), id: 'y', type: 'number'}]})
}
},
mounted() {
this.chart = new google.charts.Line(this.$refs.char_div)
this.newOptions
this.updatetable()
this.drawchart
}
}
</script>
<style>
</style>
As Phil says, "Computed property functions are not meant to alter any data properties and are supposed to return a value". Is because computed watchs changes only in return, for example:
//Computed watch this
return this.a + this.b
//{...}
//Not this
this.c = this.a + this.b
I found here and in Vue forums ways to improve this code:
If you need to watch a data with multiple dependencies, you can do the next:
computed: {
multi(){
return [this.a, this.b].join()
}
},
watch: {
multi: {
handler(): {
this.c = this.a + this.b
}
}
}
I thing the best I can find solution was:
created(){
this.$watch(
(this) => (vm.x, vm.y, vm.z, Date.now()),
function () {
// Executes if `x`, `y`, or `z` have changed.
}
)
}
This last also return the function unwatch(), it stop the watcher property, if I do this.watcher = this.$watch(/*data and callback here*/), then I can do this.watcher() stop watcher and make new one, perfect for improve performance of this code.

Dynamic Flot graph - show hide series by clicking on legend text or box on graph

I am working on dynamic flot graph with 3 series. My need is to hide/show series when clicked on legend. I have seen different examples that will work fine for static graphs but for dynamic graph, even it works first time but when graph is updated with new data values then everything is displaying with default options. once I hide the series, I want it to be hided until I click again to show it.
Here is my code. Basically, I am fetching data from JSON and updating the flot graph dynamically in 10 sec intervals. so new data will be shown every 10 sec and this is where the series is showing back again.
<div id="placeholder4" style="width:1000px;height:300px;background:#C89175"></div>
<script type="text/javascript">
$(function() {
somePlot = null;
togglePlot = function(seriesIdx)
{
var someData = somePlot.getData();
someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
somePlot.setData(someData);
somePlot.draw();
}
// Initilizaiton of Series and Counter
var i = 0;
var data_Total = [[], [], []];
// data_Total[0] : Stip Data
// data_Total[1] : Decline Data
// data_Total[2] : Volume Data
//Setting Options for Graph Display
var options = {
points: { show: true },
//legend: {toggle: true },
series: {
lines: { show: true }
},
legend: {
labelFormatter: function(label, series){
return ''+label+'';
}
},
grid: {backgroundColor: "#FCFCFC", labelMargin:12,hoverable: true,tickColor:"#AD5C5C" },
xaxis: { mode: "categories", show:true,color:"white",axisLabel:'Time Series' },
yaxis:{show:true,color:"white",min:0,max:10000,axisLabel:'Total/ Stip/ Decline'}
}
//Function that will be called recursively with specified Time Interval
function fetchData() {
//Function that will push data in to Series1 thru an ajax call
function getDPSStipData(series) {
var stipItem = [series.data[i][0], series.data[i][1]];
data_Total[0].push(stipItem);
}
$.ajax({
url: "./JSon/stipdpssec.json",
method: 'GET',
dataType: 'json',
success: getDPSStipData
});
//Function that will push data in to Series2 thru an ajax call
function getDPSDeclineData(series) {
var declineItem = [series.data[i][0], series.data[i][1]];
data_Total[1].push(declineItem);
}
$.ajax({
url: "./JSon/declinedpssec.json",
method: 'GET',
dataType: 'json',
success: getDPSDeclineData
});
//Function that will push data in to Series3 thru an ajax call
function getDPSTotalVolumeData(series) {
var totalVolItem = [series.data[i][0], series.data[i][1]];
data_Total[2].push(totalVolItem);
}
$.ajax({
url: "./JSon/totaldpssec.json",
method: 'GET',
dataType: 'json',
success: getDPSTotalVolumeData
});
//Moving forward the ticks if size > 10
if (data_Total[0].length > 10)
{
data_Total[0] = data_Total[0].splice(1,10);
data_Total[1] = data_Total[1].splice(1,10);
data_Total[2] = data_Total[2].splice(1,10);
}
// Plotting of Graph
//$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume"},{ data: data_Total[0], label: "Stip",yaxis:2 }, { data: data_Total[1], label: "Decline",yaxis:2 }], options);
somePlot=$.plot($("#placeholder4"), [{ data: data_Total[2], label: "TotalVolume",idx:0},{ data: data_Total[0], label: "Stip",color: "green",idx:1 }, { data: data_Total[1], label: "Decline",color:"red",idx:2 }], options);
i++;
}
//fetchData
setInterval(fetchData, 10000);
});
</script>
Here's a quick example I put together for you.
somePlot = null;
togglePlot = function(seriesIdx)
{
var someData = somePlot.getData();
someData[seriesIdx].lines.show = !someData[seriesIdx].lines.show;
somePlot.setData(someData);
somePlot.draw();
}
var data = [
{
label: 'foo',
color: 'red',
data: [[1, 300], [2, 300], [3, 300], [4, 300], [5, 300]],
idx: 0},
{
label: 'bar',
color: 'blue',
data: [[1, 800], [2, 600], [3, 400], [4, 200], [5, 0]],
idx: 1},
{
label: 'baz',
color: 'yellow',
data: [[1, 100], [2, 200], [3, 300], [4, 400], [5, 500]],
idx: 2},
{
label: 'dart',
color: 'green',
data: [[1, 500], [2, 350], [3, 400], [4, 700], [5, 50]],
idx: 3}
];
somePlot = $.plot($("#placeholder"), data, {
series: {
lines: {
show: true
}
},
legend: {
labelFormatter: function(label, series){
return ''+label+'';
}
}
});
You can provide legend clicks in a way that survives rerendering the graph like so:
HTML:
<div id=graph></div>
JS:
$('#graph').on('click', 'div.legend tr', function() {
var tr = $(this);
var index = tr.parent().find('tr').index(tr);
// Do something with the fact they clicked item (index)
});
There's nothing stored in the legend marking what each row represents, so you'll need to bring that info in from someplace else - all the above code does is get you the index of the legend item clicked.
For usability you should tell the user this is clickable:
CSS:
#graph div.legend tr {
cursor: pointer;
}

JavaScript InfoVis Toolkit Error loading JSON from external file using AJAX

I have the code snippet shown below in my application . What I am trying to accomplish is this: anytime a checkbox is clicked, the bar chart should be updated.
In my error console I'm getting:
"Error: TypeError: values is undefined Source file:hit.js Line: 11017.
I tried assigning the JSON directly in the function (var json = ...) and it works as it should but I can't get it to work by loading the JSON from the file. What am I doing wrong?
$(':checkbox').click(function () {
init();
function init()
{
var request = new XMLHttpRequest( );
request.open("GET", "GetGenes.php", false);
request.send(null);
var json = request.response;
console.log(request.response);
var barChart = new $jit.BarChart({
//id of the visualization container
injectInto: 'infovis',
//whether to add animations
animate: true,
//horizontal or vertical barcharts
orientation: 'horizontal',
//bars separation
barsOffset: 0.5,
//visualization offset
Margin: {
top: 5,
left: 5,
right: 5,
bottom: 5
},
//labels offset position
labelOffset:5,
//bars style
type:'stacked',
//whether to show the aggregation of the values
showAggregates:true,
//whether to show the labels for the bars
showLabels:true,
//label styles
Label: {
type: 'HTML', //Native or HTML
size: 9,
family: 'Arial',
color: 'black'
},
//tooltip options
Tips: {
enable: true,
onShow: function(tip, elem) {
tip.innerHTML = "<b>" + elem.name + "</b>: " + elem.value;
}
}
});
barChart.loadJSON(json);
}
})
genes.php contains:
echo "{'label': ['label 1', 'label 2', 'label 3', 'label 4'],'values': [{'label': 'date A','values': [20, 40, 15, 5]}, {'label': 'date B','values': [30, 10, 45, 10]}, {'label': 'date E','values': [38, 20, 35, 17]}, {'label': 'date F','values': [58, 10, 35, 32]}, {'label''date D','values': [55, 60, 34, 38]}, {'label': 'date C','values': [26, 40, 25, 40]}]};";
There is an error in your returned JSON :
'label''date D'
There is a missing colon there. Don´t know if that solves anything.

Get ID value of a dojo combobox selected item

var xhrArgs = {
url: "../Person/GetAll",
handleAs: "json",
preventCache: true,
load: function (data, ioargs) {
var jsonString = dojo.toJson(data)
var dataStore = new dojo.store.Memory({ data:
dojo.fromJson(jsonString) });
var personCmb = dijit.byId('cmbSingers');
if (personCmb == null)
{
var cobox = new dijit.form.ComboBox({ id: "cmbSingers", name: "Name", store: dataStore, searchAttr: "Name" }, "cmbSingers");
cobox.startup();
}
function cmbSingers_OnSelected() {
alert(dijit.byId('cmbSingers').get('value')); **this return the Text, But I want to get Id of Select value**
}
For anyone looking for a solution to this in 2016+...
I ran into the same situation and found a way to get the value of selected options from Dojo ComboBox. Instead of just using .value or .get('value'), use .item.value:
dijit.byId('someComboBox').item.value
.item will return an Object like this for you to use:
Object {id: "1", value: "1", name: "One"}
To elaborate... say you define the options for your ComboBox by using a select like so:
<select dojoType="dijit.form.ComboBox" id="someComboBox" maxlength="30">
<option value=""></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Say you select the "One" option.
Calling dijit.byId('someComboBox').value will return "One",
but calling dijit.byId('someComboBox').item.value will return "1"
Mkay, json is like so?
{ identifier: 'Id', items: [ { Id: '1', name:'foo', age: 12 }, { Id: '2', name:'bar', age: 30 } ] }
And you have dijit.form.ComboBox in variable cobox, your dojo.data.ItemFileReadStore in variable store.
dojo.connect(cobox, "onChange", function() {
var val = this.get("value"),
id = "",
matcher = new RegExp("^" + val + "$");
dojo.some(store._arrayOfAllItems, function(item, idx) {
if(matcher.test(store.getValue(item, "name")) {
id = store.getValue(item, "Id");
return true; // breaks .some loop
}
});
});