I am getting an error when using fusioncharts in Vuejs

I am getting an error when using fusioncharts in Vuejs - javascript

I'm getting this error Uncaught RuntimeException: #03091456 chartobject-1.render() Error >> Unable to find the container DOM element. Using vue2
I'm trying to work with fusioncharts in vuejs Here are the docs
https://www.fusioncharts.com/dev/getting-started/vue/your-first-chart-using-vuejs
I have used the Boilerplate code from this website
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
// STEP 2: Prepare the data
const chartData = [
{
label: "Venezuela",
value: "290"
},
{
label: "Saudi",
value: "260"
},
{
label: "Canada",
value: "180"
},
{
label: "Iran",
value: "140"
},
{
label: "Russia",
value: "115"
},
{
label: "UAE",
value: "100"
},
{
label: "US",
value: "30"
},
{
label: "China",
value: "30"
}
];
// STEP 3: Configure your chart
const dataSource = {
chart: {
caption: "Countries With Most Oil Reserves [2017-18]",
subcaption: "In MMbbl = One Million barrels",
xaxisname: "Country",
yaxisname: "Reserves (MMbbl)",
numbersuffix: "K",
theme: "fusion"
},
data: chartData
};
export default {
name: 'app',
data() {
return {
"type": "column2d",
"renderAt": "chart-container",
"width": "550",
"height": "350",
"dataFormat": "json",
dataSource
}
}
}
</script>
//STEP 4: Render the chart
<template>
<div id="app">
<div id="chart-container">
<fusioncharts
:type="type"
:width="width"
:height="height"
:dataformat="dataFormat"
:dataSource="dataSource"
>
</fusioncharts>
</div>
</div>
</template>

Related

I am trying to save the values form the DataGridPro MUI, a TreeData ... How can i save Values of the Cells after i edit them

I am novice at this. I am trying to save the values form the DataGridPro MUI, I am using a TreeData. How can i save Values of the Cells after i edit them. I watched a video online in by which i was able to understand how it will work on a Single DataTable, But for the Parent one, i dont know how i will be able to save it. I have looked up but i found no method which could be helpful. I am getting the values from the GridColumn and GridRowsProp.
Basically i want to save the values of the children. how can i save them?
Thanks.
import * as React from "react";
import { DataGridPro, GridColumns, GridRowsProp, DataGridProProps } from "#mui/x-data-grid-
pro";
import {
GridCellEditCommitParams,
GridCellEditStopParams,
GridCellEditStopReasons,
GridRowModel,
MuiEvent,
} from "#mui/x-data-grid";
import { applyInitialState } from "#mui/x-data-grid/hooks/features/columns/gridColumnsUtils";
const rows: GridRowsProp = [
{
hierarchy: ["Documents"],
rubrics: "Head of Human Resources",
totalMarks: "",
id: 0,
},
{
hierarchy: ["Scope"],
rubrics: "Head of Sales",
totalMarks: "15",
id: 1,
},
{
hierarchy: ["Scope", "Rubric item 1"],
rubrics: "Sales Person",
totalMarks: "2",
id: 2,
},
{
hierarchy: ["Scope", "Rubric item 2"],
rubrics: "Sales Person",
totalMarks: "5",
id: 3,
},
{
hierarchy: ["Scope", "Rubric item 3"],
rubrics: "Sales Person",
totalMarks: "8",
id: 4,
},
];
const columns: GridColumns = [
{ field: "rubrics", headerName: "Rubric Type", width: 200, editable: true },
{
field: "totalMarks",
headerName: "Total Marks",
width: 150,
editable: true,
},
];
const getTreeDataPath: DataGridProProps["getTreeDataPath"] = (row) => row.hierarchy;
export default function TreeDataSimple() {
const [state, setState] = React.useState<GridRowModel[]>(applyInitialState); //i was seeing online for this how can i add the array here but no luck.
const handleCommit = (e: GridCellEditCommitParams) => {
const array = state.map((r) => {
if (r.id === e.id) {
return { ...r, [e.field]: e.value };
} else {
return { ...r };
}
});
setState(array);
};
return (
<div style={{ height: 400, width: "100%" }}>
<DataGridPro
treeData
rows={rows}
columns={columns}
getTreeDataPath={getTreeDataPath}
onCellEditCommit={handleCommit}
experimentalFeatures={{ newEditingApi: true }}
onCellEditStop={(params: GridCellEditStopParams, event: MuiEvent) => {
if (params.reason === GridCellEditStopReasons.cellFocusOut) {
event.defaultMuiPrevented = true;
}
}}
/>
</div>
);
}}

how to give descriptor element (Types.Array) default value Fabric API Interface

how to give it default value how to give descriptor element (Types.Array) default value Fabric API Interface i try in many ways
import { Types } from "#teamfabric/xpm";
export default Types.Component({
id: "SERCH_VIEW",
label: "Serch View",
description: "Serch page ",
attributes: {
sort_by_values: Types.Array({
label: "please enter type of sorting",
default: [
{ option: "Most relevant" },
{ option: "Recently added" },
{ option: "Price (highest to lowest)" },
{ option: "Price (lowest to highest)" },
{ option: "A - Z" },
{ option: "Z - A" },
];,
children: Types.Shape({
children: {
option: Types.String({ label: "Type" }),
},
}),
}),
},
});

Paypal Smart Buttons sales tax by state

Have to charge sales tax if the order is in Texas, but do not know the address until after customer has entered it. The only event that seemed reasonable was onShippingChange, but after the customer clicks continue, PayPal sends back an error page saying this are not working as expected. I can not be the only person that needs to charge sales tax with these new "Smart" buttons.
<script>
const baseOrderAmount = 20.00;
function initPayPalButton() {
paypal.Buttons({
style: {
shape: 'pill',
color: 'blue',
layout: 'vertical',
label: 'paypal',
},
createOrder: function(data, actions) {
return actions.order.create({
purchase_units: [
{
"description": "Add product to buy",
"custom_id": "xxx-yyy-zzz",
"amount": {
"currency_code": "USD",
"value": baseOrderAmount,
"breakdown": {
"item_total": {
"currency_code": "USD",
"value": baseOrderAmount
},
"tax_total": {
"currency_code": "USD",
"value": 0
}
}
}
}]
});
},
onShippingChange: function (data, actions) {
const taxAmount = (data.shipping_address.state === 'TX' || data.shipping_address.state === 'Texas') ? baseOrderAmount * 0.0825 : '0.00';
return actions.order.patch([
{
op: 'replace',
path: "/purchase_units/##referenceId='default'/amount",
value: {
currency_code: 'USD',
value: (parseFloat(baseOrderAmount) + parseFloat(taxAmount)).toFixed(2),
breakdown: {
item_total: {
currency_code: 'USD',
value: baseOrderAmount
},
tax_total: {
currency_code: 'USD',
value: taxAmount
}
}
}
}
]);
},
onApprove: function(data, actions) {
return actions.order.capture().then(function(orderData) {
const element = document.getElementById('paypal-button-container');
element.innerHTML = '';
element.innerHTML = '<h3>Thank you for your payment!</h3>';
});
},
onError: function(err) {
console.log(err);
}
}).render('#paypal-button-container');
}
initPayPalButton();
</script>

In the browser developer tools Network tab, you can see a 422 or 400 response from the patch operation.
{
"debug_id": "8ff787b4dd2c7",
"details": [
{
"description": "Path should be a valid JSON Pointer https://tools.ietf.org/html/rfc6901 that references a location within the request where the operation is performed.",
"field": "path",
"issue": "INVALID_JSON_POINTER_FORMAT",
"location": "body",
"value": "/purchase_units/##referenceId=default/amount"
}
],
"links": [
{
"href": "https://developer.paypal.com/docs/api/orders/v2/#error-INVALID_JSON_POINTER_FORMAT",
"method": "GET",
"rel": "information_link"
}
],
"message": "The requested action could not be performed, semantically incorrect, or failed business validation.",
"name": "UNPROCESSABLE_ENTITY"
}
Apparently you have an extra at sign (#) in your path, and it has the wrong format...see the SDK reference: https://developer.paypal.com/sdk/js/reference/#onshippingchange
What's given there works:
path: "/purchase_units/#reference_id==\'default\'/amount",

For anyone else trying to implement, you have to modify the script url to add the commit=false as shown below:
<script src="https://www.paypal.com/sdk/js?client-id=<Insert your client Id>&enable-funding=venmo&currency=USD&commit=false" data-sdk-integration-source="button-factory"></script>
Placed a code block above the paypal script blocks.
#{
var url = #"/purchase_units/#reference_id==\'default\'/amount";
}
and then change with path in the patch
path: "#Html.Raw(url)",

Finding an element in an array and adding it to another javascript

Below is a snippet of the JSON file that I'm working with and in the array "target_indices" you'll see the indices of the data that I want to extract. I seem to be stuck in matching up if the field_index has my target index in it, I want to add it to the const schools. Any help here would be appreciated!
"fields": [{"type":"int","id":"_id"},{"type":"text","id":"Centre Code"},{"type":"text","id":"Centre Name"},{"info":{"notes":"","type_override":"","label":""},"type":"text","id":"Centre Type"},{"type":"text","id":"Centre Status"},{"type":"text","id":"Host Centre Code"},{"type":"text","id":"Host Centre Name"},{"type":"text","id":"Official Low Year Level"},{"type":"text","id":"Official High Year Level"},{"type":"text","id":"Officer In Charge Title"},{"type":"numeric","id":"School Band"},{"type":"timestamp","id":"Show Holiday Date"},{"type":"text","id":"Internet Site"},{"type":"text","id":"Phone Number"},{"type":"text","id":"Restrict Contact Outside Teaching Hours"},{"type":"text","id":"Fax Number"},{"type":"text","id":"Actual Address Line 1"},{"type":"text","id":"Actual Address Line 2"},{"type":"text","id":"Actual Address Line 3"},{"type":"numeric","id":"Actual Address Post Code"},{"type":"text","id":"Postal Address Line 1"},{"type":"text","id":"Postal Address Line 2"},{"type":"text","id":"Postal Address Line 3"},{"type":"numeric","id":"Postal Address Post Code"},{"type":"text","id":"Education Geographic Region"},{"type":"text","id":"Federal Electorate"},{"type":"text","id":"State Electorate"},{"type":"text","id":"Local Government Area"},{"type":"text","id":"Statistical Area Level2"},{"type":"numeric","id":"Statistical Area Level2 Code"},{"type":"text","id":"Remoteness Area"},{"type":"text","id":"Enrolment Effective Date"},{"type":"numeric","id":"All Student Count"},{"type":"text","id":"Campus All Student Count"},{"type":"numeric","id":"ABN"},{"info":{"notes":"","type_override":"","label":""},"type":"text","id":"Sector"},{"type":"text","id":"Non-State Sector"},{"type":"numeric","id":"Longitude"},{"type":"numeric","id":"Latitude"}],
"records":
[2,"0591","Abercorn State School","State School","Open","","","Prep Year","Year 6","Principal",5,"2020-08-10T00:00:00","www.abercornss.eq.edu.au","(07) 4167 5190","Y","(07) 4167 5135","","957 Wuruma Dam Road","Abercorn",4627,"957 Wuruma Dam Road","Abercorn","",4627,"Central Queensland","Flynn","Callide","North Burnett (R)","Monto - Eidsvold",319021508,"Outer Regional Australia","2019 July",18,"",22101246877,"State","",151.127031,-25.135955],
[3,"1275","Abergowrie State School","State School","Open","","","Prep Year","Year 6","Principal",5,"2020-07-03T00:00:00","www.abergowriess.eq.edu.au","(07) 4777 4672","N","(07) 4777 4686","","5 Venables Road","Abergowrie",4850,"5 Venables Road","Abergowrie","",4850,"North Queensland","Kennedy","Hinchinbrook","Hinchinbrook (S)","Ingham Region",318011465,"Remote Australia","2019 July",4,"",87244066343,"State","",145.88351,-18.474697],
fetch('./qldopendata-json/school_locations.json')
.then(response => {
return response.json();
})
.then(schoolData => {
const schools = [];
const target_indices = [2,7,8,12,13,17,18,19,37,38];
schoolData.records.forEach((school_value) => {
const tidied_school = {};
schoolData.fields.forEach((field_name, field_index) => {
tidied_school[field_index] = school_value[field_index]
if (field_index in target_indices){ //this is where i need help
schools.push(tidied_school);
}
})
console.log(schools);
})
})

You can use reduce().
Example below:
const schoolData = { fields: [ { type: "int", id: "_id" }, { type: "text", id: "Centre Code" }, { type: "text", id: "Centre Name" }, { info: { notes: "", type_override: "", label: "" }, type: "text", id: "Centre Type", }, { type: "text", id: "Centre Status" }, { type: "text", id: "Host Centre Code" }, { type: "text", id: "Host Centre Name" }, { type: "text", id: "Official Low Year Level" }, { type: "text", id: "Official High Year Level" }, { type: "text", id: "Officer In Charge Title" }, { type: "numeric", id: "School Band" }, { type: "timestamp", id: "Show Holiday Date" }, { type: "text", id: "Internet Site" }, { type: "text", id: "Phone Number" }, { type: "text", id: "Restrict Contact Outside Teaching Hours" }, { type: "text", id: "Fax Number" }, { type: "text", id: "Actual Address Line 1" }, { type: "text", id: "Actual Address Line 2" }, { type: "text", id: "Actual Address Line 3" }, { type: "numeric", id: "Actual Address Post Code" }, { type: "text", id: "Postal Address Line 1" }, { type: "text", id: "Postal Address Line 2" }, { type: "text", id: "Postal Address Line 3" }, { type: "numeric", id: "Postal Address Post Code" }, { type: "text", id: "Education Geographic Region" }, { type: "text", id: "Federal Electorate" }, { type: "text", id: "State Electorate" }, { type: "text", id: "Local Government Area" }, { type: "text", id: "Statistical Area Level2" }, { type: "numeric", id: "Statistical Area Level2 Code" }, { type: "text", id: "Remoteness Area" }, { type: "text", id: "Enrolment Effective Date" }, { type: "numeric", id: "All Student Count" }, { type: "text", id: "Campus All Student Count" }, { type: "numeric", id: "ABN" }, { info: { notes: "", type_override: "", label: "" }, type: "text", id: "Sector", }, { type: "text", id: "Non-State Sector" }, { type: "numeric", id: "Longitude" }, { type: "numeric", id: "Latitude" }, ], records: [ [ 2, "0591", "Abercorn State School", "State School", "Open", "", "", "Prep Year", "Year 6", "Principal", 5, "2020-08-10T00:00:00", "www.abercornss.eq.edu.au", "(07) 4167 5190", "Y", "(07) 4167 5135", "", "957 Wuruma Dam Road", "Abercorn", 4627, "957 Wuruma Dam Road", "Abercorn", "", 4627, "Central Queensland", "Flynn", "Callide", "North Burnett (R)", "Monto - Eidsvold", 319021508, "Outer Regional Australia", "2019 July", 18, "", 22101246877, "State", "", 151.127031, -25.135955, ], [ 3, "1275", "Abergowrie State School", "State School", "Open", "", "", "Prep Year", "Year 6", "Principal", 5, "2020-07-03T00:00:00", "www.abergowriess.eq.edu.au", "(07) 4777 4672", "N", "(07) 4777 4686", "", "5 Venables Road", "Abergowrie", 4850, "5 Venables Road", "Abergowrie", "", 4850, "North Queensland", "Kennedy", "Hinchinbrook", "Hinchinbrook (S)", "Ingham Region", 318011465, "Remote Australia", "2019 July", 4, "", 87244066343, "State", "", 145.88351, -18.474697, ], ], };
const targetIndices = [2, 7, 8, 12, 13, 17, 18, 19, 37, 38];
const schools = schoolData.records.reduce((a, b) => {
const requiredObject = targetIndices.reduce((acc, t) => {
acc.push(b[t]);
return acc;
}, []);
a.push(requiredObject);
return a;
}, []);
console.log(schools);

Hope this helps you out. You will need to create the target_indices_names manually with this, there is probably another way to do it dynamically, but since it is only 10 properties.
var schoolData = '[[2,"0591","Abercorn State School","State School","Open","","","Prep Year","Year 6","Principal",5,"2020-08-10T00:00:00","www.abercornss.eq.edu.au","(07) 4167 5190","Y","(07) 4167 5135","","957 Wuruma Dam Road","Abercorn",4627,"957 Wuruma Dam Road","Abercorn","",4627,"Central Queensland","Flynn","Callide","North Burnett (R)","Monto - Eidsvold",319021508,"Outer Regional Australia","2019 July",18,"",22101246877,"State","",151.127031,-25.135955],'+
'[3,"1275","Abergowrie State School","State School","Open","","","Prep Year","Year 6","Principal",5,"2020-07-03T00:00:00","www.abergowriess.eq.edu.au","(07) 4777 4672","N","(07) 4777 4686","","5 Venables Road","Abergowrie",4850,"5 Venables Road","Abergowrie","",4850,"North Queensland","Kennedy","Hinchinbrook","Hinchinbrook (S)","Ingham Region",318011465,"Remote Australia","2019 July",4,"",87244066343,"State","",145.88351,-18.474697]]'
var parsedSchoolData = JSON.parse(schoolData);
const schools = [];
const target_indices_names = ['one','two','three','four','five','six','seven','eight', 'nine', 'ten'];
const target_indices = [2,7,8,12,13,17,18,19,37,38];
parsedSchoolData.forEach(element => {
// New Object
var obj = new Object();
// Pass through all Target Indices
target_indices.forEach(neededIndex => {
console.log(neededIndex);
var propertyName = target_indices_names[target_indices.indexOf(neededIndex)];
// Set Property to Value
obj[propertyName] = element[neededIndex];
});
// Push/Add the created Object to the list
schools.push(obj);
});
console.log(schools[0]);

Jspdf-autotable Rowspan Fix

I have been generating PDF using Jspdf and Jspdf-autotable plugin. Check this code that I am using to make my customized pdf -
import React, { Component } from 'react';
import jsPDF from "jspdf";
import autotable from "jspdf-autotable";
var getColumns = function () {
return [
{ title: "Student", dataKey: "studentName" },
{ title: "Gender", dataKey: "studentGender" },
{ title: "Mother Name", dataKey: "motherName" },
{ title: "Father Name", dataKey: "fatherName" }
]
};
var getData = function () {
return rows
};
var rows;
class FeaturePage extends Component {
constructor() {
super();
this.exportpdf = this.exportpdf.bind(this);
this.state = {
sales: [
{
"studentId": "100122000116",
"name": "hasan",
"customStudentId": "1510020",
"studentName": "Tasnim Tabassum",
"studentGender": "Female",
"studentDOB": "2012-07-27",
"studentReligion": "Islam",
"motherName": "Sb",
"fatherName": "Md. Mamunar Rashid"
},
{
"studentId": "100122000116",
"name": "hasan",
"customStudentId": "1510020",
"studentName": "Star",
"studentGender": "Female",
"studentDOB": "2012-07-27",
"studentReligion": "Islam",
"motherName": "Sd",
"fatherName": "Md. Mamunar Rashid"
},
{
"studentId": "100122000116",
"name": "arif",
"customStudentId": "1510020",
"studentName": "Tasnim Tabassum",
"studentGender": "Female",
"studentDOB": "2012-07-27",
"studentReligion": "Islam",
"motherName": "safd",
"fatherName": "Md. Mamunar Rashid"
},
{
"studentId": "100122000216",
"name": "arif",
"customStudentId": "1510000",
"studentName": "Star2",
"studentGender": "Female",
"studentDOB": "2012-06-30",
"studentReligion": "Islam",
"motherName": "Mst. Fawalia Akter",
"fatherName": "Md. Azaharul Islam"
}
]
};
}
exportpdf() {
var doc = new jsPDF('p', 'pt');
doc.autoTable(getColumns(), getData(), {
theme: 'grid',
startY: 60,
drawRow: function (row, data) {
if (data.row.raw.name) {
doc.autoTableText(data.row.raw.name, data.settings.margin.left + data.table.width / 2, row.y + row.height / 2, {
halign: 'center',
valign: 'middle'
}
);
data.cursor.y += 20;
}
},
});
doc.save('Student List.pdf');
}
render() {
rows = this.state.sales;
return (
<div>
<button onClick={this.exportpdf} className="exportPDF">Export to PDF</button>
</div>
);
}
}
export default FeaturePage;
And it is generating this pdf
But I want to generate something like this one
How can I do that. I have tried out all the hooks that i Read in the documentation , but nonetheless couldn't make it work the way i want it.

Develop Reference

JavaScript is the programming language of the Web.

I am getting an error when using fusioncharts in Vuejs - javascript

Related

I am trying to save the values form the DataGridPro MUI, a TreeData ... How can i save Values of the Cells after i edit them

how to give descriptor element (Types.Array) default value Fabric API Interface

Paypal Smart Buttons sales tax by state

Finding an element in an array and adding it to another javascript

Jspdf-autotable Rowspan Fix

Categories

Resources