I want to display a graph on my web interface. I want to implement the web interface with vue js. For this I pass data from my backend to my frontend with axios. I can display an empty graph on my rsurface. But the data I pass is not displayed. What is wrong with my code that my data is not displayed on the graph.
In the following you can see my implemented code.
<b-container class="ml-auto">
<b-row>
<b-col>
<vue-plotly :data="dataA" :layout="layout" :options="options"/>
</b-col>
</b-row>
</b-container>
export default {
components: {
VuePlotly,
},
data() {
return {
dataA: [{
x: [],
y: [],
}],
layout: {
title: 'ScreePlot',
bargap: 0.05,
xaxis: {
range: [0, 9],
title: 'x',
tick0: 0,
dtick: 1,
},
yaxis: {
range: [0, 2000],
title: 'y',
tick0: 0,
dtick: 1,
},
},
options: {
displayModeBar: false,
responsive: true,
watchShallow: true,
autoResize: true,
},
};
},
mounted() {
this.getScreePlot();
},
methods: {
getScreePlot() {
const path = 'http://localhost:5000/Diagramm';
axios.get(path)
.then((res) => {
this.dataA.x = res.data.x;
this.dataA.y = res.data.y;
})
.catch((error) => {
// eslint-disable-next-line
console.error(error);
});
},
},
};
In case this definition
dataA: [{
x: [],
y: [],
}],
You should fill like this:
.then((res) => {
this.dataA.push(
{
x: res.data.x,
y: res.data.y
}) ;
})
Related
How can I fetch data from a JSON API using the following code:
var options = {
chart: {
type: "bar",
},
series: [
{
name: "Bitcoin",
data: [],
},
],
xaxis: {
categories: [5, 30, 60],
},
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
I want data() to return the following amountList array, which contains numbers inside:
function data() {
return {
apiEndPoint: "https://api.coinbase.com/v2/prices/spot?currency=",
apiData: [],
amountList: [],
};
};
What is the quickest and easiest way to implement an editable tree grid in Angular 7 (and above) ? I have tried to use ng angular-tree-grid, but got stuck, at the below code i implemented so far.
Template:
<db-angular-tree-grid #angularGrid [data]="data"
[configs]="configs"
(rowdelete)="onRowDelete($event)"
(rowsave)="onRowSave($event)"
(rowadd)="onRowAdd($event)">
</db-angular-tree-grid>
I have been unable to get the onRowAdd() and onRowDelete() methods to work. I need to call a POST endpoint on my c# webApi, within onRowAdd().
Typescript:
export class GridComponent {
#ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;
data: any = [
{ id: 1, planName: 'Functional Test',parent: 0},
{ id: 2, planName: 'Non Functional Test', parent: 0},
{ id: 3, planName: 'Component', parent: 1}
];
configs: any = {
id_field: 'id',
parent_id_field: 'parent',
parent_display_field: 'planName',
actions: {
add: true,
edit: true,
delete: true,
edit_parent: true,
add_parent: true,
delete_parent: true,
resolve_add: true,
resolve_delete: true,
resolve_edit: true
},
css: { // Optional
expand_class: 'fa fa-caret-right',
collapse_class: 'fa fa-caret-down',
add_class: 'fa fa-plus',
edit_class: 'fa fa-pencil',
delete_class: 'fa fa-trash',
save_class: 'fa fa-save',
cancel_class: 'fa fa-remove',
},
columns: [
{
name: 'planName',
header: 'PlanName',
editable: true
}
]
};
onRowAdd($e) {
const data = $e.data;
setTimeout(() => {
$e.resolve();
}, 1000);
}
onRowSave($e) {
const data = $e.data;
setTimeout(() => {
$e.resolve();
}, 1000);
}
onRowDelete($e) {
setTimeout(() => {
$e.resolve();
}, 1000);
}
}
my json data
[ { "status": 200, "values": [ { "total_transaction": 7, "total_deposit": 4, "total_withdrawal": 3, "total_request": 4, "accepted_request": 1, "pending_request": 0 } ] } ]
my axios script
<script>
import axios from 'axios';
import dashboardData from '#/services/dashboard.service'
var dataValue = []
export default {
name: 'DashboardInfo',
data () {
return {
infoTiles: [{
color: 'success',
value: dataValue,
text: 'Total Transaction',
icon: '',
}, {
color: 'danger',
value: dataValue,
text: 'Deposit',
icon: '',
}, {
color: 'info',
value: dataValue,
text: 'Withdrawal',
icon: '',
}],
}
},
created(){
axios
.get('/dashboard')
.then(response => (response.data))
.then(result => {
dataValue.push(result)
document.getElementByName('total_transaction')
})
}
}
</script>
expectation outcome :
value : 7
text : total transaction
value : 4
text : total deposit
and so on...
for now my actual output is the json raw data with the status, values etc.
what should i code so i only get the number 7 for example instead of all of the data.
i know what iam doing is wrong since im really a beginner in this matter and its my first app i made using axios-vue.
As I assumed, your json data is always like this.
[ { "status": 200, "values": [ { "total_transaction": 7, "total_deposit": 4, "total_withdrawal": 3, "total_request": 4, "accepted_request": 1, "pending_request": 0 } ] } ]
you have to modify your code on axios response. The code may solve your problem.
import axios from 'axios';
import dashboardData from '#/services/dashboard.service'
var dataValue = []
export default {
name: 'DashboardInfo',
data () {
return {
infoTiles: [{
color: 'success',
value: 0,
text: 'Total Transaction',
icon: '',
}, {
color: 'danger',
value: 0,
text: 'Total Deposit',
icon: '',
}, {
color: 'info',
value: 0,
text: 'Total Withdrawal',
icon: '',
}, {
color: 'info',
value: 0,
text: 'Total Request',
icon: '',
}, {
color: 'info',
value: 0,
text: 'Accepted Request',
icon: '',
}, {
color: 'info',
value: 0,
text: 'Pending Request',
icon: '',
}],
}
},
created(){
var that = this;
axios
.get('/dashboard')
.then(response => (response.data))
.then(result => {
var values = result.data.values;
var infoTiles = that.infoTiles;
infoTiles[0].value = values['total_transaction'] ? values['total_transaction'] : 0;
infoTiles[1].value = values['total_deposit'] ? values['total_deposit'] : 0;
infoTiles[2].value = values['total_withdrawal'] ? values['total_withdrawal'] : 0;
infoTiles[3].value = values['total_request'] ? values['total_request'] : 0;
infoTiles[4].value = values['accepted_request'] ? values['accepted_request'] : 0;
infoTiles[5].value = values['pending_request'] ? values['pending_request'] : 0;
that.$set(that, 'infoTiles', infoTiles);
})
}
}
Alright i kinda found a way around this.
this is what i did
mounted(){
axios
.get('/dashboard')
.then(response => (response.data.values[0].total_transaction))
.then(result => {
dataValue.push(result)
})
output i get
[7]
total transaction
i just have to push every response to a single var dedicated for each object.
i know its not the most effective way to do it, but it works
I am building a form, that needs to get data dynamically via a JSON request that needs to be made while loading the form. I don't see a way to load this data. Anybody out here who can help?
JSON calls are being done via vue-resource, and the forms are being generated via vue-form-generator.
export default Vue.extend({
template,
data() {
return {
model: {
id: 1,
password: 'J0hnD03!x4',
skills: ['Javascript', 'VueJS'],
email: 'john.doe#gmail.com',
status: true
},
schema: {
fields: [
{
type: 'input',
inputType: 'text',
label: 'Website',
model: 'name',
maxlength: 50,
required: true,
placeholder: companyList
},
]
},
formOptions: {
validateAfterLoad: true,
validateAfterChanged: true
},
companies: []
};
},
created(){
this.fetchCompanyData();
},
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
let companyList = response.data.company; // Use this var above
}, (response) => {
console.log(response);
});
}
}
});
You can just assign this.schema.fields.placeholder to the value returned by the API like following:
methods: {
fetchCompanyData(){
this.$http.get('http://echo.jsontest.com/key/value/load/dynamicly').then((response) => {
console.log(response.data.company);
this.schema.fields.placeholder = response.data.company
}, (response) => {
console.log(response);
});
}
}
I have a highcharts bargraph whose values are received from json whose format is as follows:
"bargraph":
[
{
"categories": "['S', 'M', 'T', 'W', 'T', 'F']",
"series1": "[800, 1100, 80, 1800, 1600, 2000]",
"series2": "[800, 1100, 80, 1800, 1200, 800]"
}
]
How can i embed those values for my bargraph in angularJS
HTML Code:
<div id="bargraph" bargraph={{bargraph}}><\div>
Directive:
angular.module('example').directive('bargraph', function () {
element.highcharts({
xAxis: [
{
categories: [] //embed categories value here
},
series: [
{
name: 'series1',
data: [] //Embed series1 data here
},
{
name: 'series2',
data: [] //Embed series2 data here
}
]
})
})
Please provide a suitable way to embed the data from json.
Here is a directive i copied and pasted from my webapp it is how i render highcharts using a directive NOTE: not all of this directive is applicable to you and some of it is specific to what i needed but you get the idea.
lrApp.directive('chart', function () {
return {
restrict: 'E',
template: '<div></div>',
transclude: true,
replace: true,
link: function (scope, element, attrs) {
var chart = null;
var chartsDefaults = {
chart: {
renderTo: element[0],
type: attrs.type || null,
height: attrs.height || null,
width: attrs.width || null,
},
colors: scope.$eval(attrs.colors) || null,
title: {
style: {
display: 'none'
}
},
xAxis: {
//categories: ['{"-7 days"|date_format}','{"-6 days"|date_format}','{"-5 days"|date_format}','{"-4 days"|date_format}', '{"-3 days"|date_format}', '{"-2 days"|date_format}', '{"-1 day"|date_format}', '{$smarty.now|date_format}'],
categories: scope.$eval(attrs.dates) || null,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1,
labels: {
y: 27
}
},
yAxis: {
title: {
text: null
},
min: 0,
gridLineDashStyle: 'ShortDot',
gridLineColor: "#C0C0C0",
gridLineWidth: 1
},
credits: {
enabled: false
},
legend: {
enabled: false
},
plotOptions: {
series: {
shadow: false,
lineWidth: 3
}
},
tooltip: {
formatter: function () {
return '<b>' + this.series.name + '</b><br/>' +
this.x + ': ' + this.y + '</b>';
}
}
};
//Update when charts data changes
scope.$watch(attrs.value, function (newVal, oldVal) {
if (!newVal.length) return;
// We need deep copy in order to NOT override original chart object.
// This allows us to override chart data member and still the keep
// our original renderTo will be the same
var deepCopy = true;
var newSettings = {};
chartsDefaults.series = newVal;
chartsDefaults.colors = scope.$eval(attrs.colors);
chartsDefaults.xAxis.categories = scope.$eval(attrs.dates);
console.log(chartsDefaults);
chart = new Highcharts.Chart(chartsDefaults);
});
}
}
});
and this is how it used it obviously you would change "line" to bar:
<chart value="stats.sets" dates="stats.days" colors="stats.colors" type="line"></chart>