I am try to create vue barchart & using apexChartData.
Here is my code
export default{
components: {
VueApexCharts
},
data () {
return {
barChart: {
series: [{
data: []
}],
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: []
}
}
}
},
methods: {
myFunction() {
this.$vs.loading();
axios.get("/api/auth/nameofapi").then(response => {
this.barChart.series[0].data = response.data[0]['data'];
this.barChart.chartOptions.xaxis.categories = response.data[1]['categories'];
this.$vs.loading.close();
}).catch(error => {
this.$vs.loading.close()
this.errorResponse(error);
});
}
},
mounted () {
this.myFunction();
}
}
My API Response payload like
[{"data":[4,1]},{"categories":["xyz","abc"]}]
After doing this bar chart is not loading, i am not sure where i am doing mistake, sorry for repeating this post if already exist but i just post what i am facing.
Any Help
Thanks in advance
Related
So it's been a while since I updated my Gatsby blog site, over 2 years and now when I updated all the packages, I noticed the markdown options have changed.
Orginally when I used this code, it would show all my blog post accurately with the correct images etc.
export const query = graphql`
{
allMdx(
filter: { fileAbsolutePath: { regex: "/posts/" } }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
frontmatter {
alt
title
path
slug
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
...GatsbyImageSharpFluid
}
}
}
}
id
}
}
}
`
However, now I tried to choose the options based on what I found from graphql that looks similar to my previous options
Here's the new updated code
export const query = graphql`
{
allMdx(
filter: { body: { regex: "/posts/" } }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
frontmatter {
alt
title
path
slug
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
gatsbyImageData(layout: FULL_WIDTH)
}
}
}
id
}
}
}
`
However, this code only displays 2 post on my home page and doesn't show any of the images when I need all 6 to display and showcase all the images.
When I run the queries in graphql it only displays the 2 blog post data so I don't know which option to choose to reshow the same things I had before I updated my site with the new versions of gatsby
Here's my gatsby-config file
plugins: [
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: "gatsby-plugin-react-svg",
options: {
rule: {
include: /static/,
},
},
},
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
icon: `src/images/fav-1.png`,
icon_options: {
purpose: `any maskable`,
},
},
},
"gatsby-plugin-offline",
`gatsby-plugin-mdx`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
`gatsby-plugin-styled-components`,
`gatsby-plugin-react-helmet`,
{
resolve: `gatsby-plugin-sitemap`,
options: {
query: `
{
site {
siteMetadata {
siteUrl
}
}
allSitePage {
nodes {
path
}
}
}`,
resolveSiteUrl: ({ site }) => {
//Alternatively, you may also pass in an environment variable (or any location) at the beginning of your `gatsby-config.js`.
return site.siteMetadata.siteUrl
},
serialize: ({ site, allSitePage }) =>
allSitePage.nodes.map(node => {
return {
url: `${site.siteMetadata.siteUrl}${node.path}`,
changefreq: `weekly`,
priority: 0.7,
}
}),
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `posts`,
path: `${__dirname}/src/posts`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `resources`,
path: `${__dirname}/src/resources`,
},
},
// {
// resolve: "gatsby-plugin-page-creator",
// options: {
// path: `${__dirname}/src/posts`,
// },
// },
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
gatsbyRemarkPlugins: [{ resolve: "gatsby-remark-images" }],
},
},
{
resolve: `gatsby-plugin-google-fonts`,
options: {
fonts: [`nunito\:400s,700`],
display: "swap",
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-prismjs`,
options: {
classPrefix: "language-",
inlineCodeMarker: null,
aliases: {},
showLineNumbers: false,
noInlineHighlight: false,
languageExtensions: [
{
language: "superscript",
extend: "javascript",
definition: {
superscript_types: /(SuperType)/,
},
insertBefore: {
function: {
superscript_keywords: /(superif|superelse)/,
},
},
},
],
// Customize the prompt used in shell output
// Values below are default
prompt: {
user: "root",
host: "localhost",
global: false,
},
// By default the HTML entities <>&'" are escaped.
// Add additional HTML escapes by providing a mapping
// of HTML entities and their escape value IE: { '}': '{' }
escapeEntities: {},
},
},
],
},
},
],
UPDATE: For index.js when I use this graph ql query I can finally see my images and the last 6 blog post I set, but not sure what I was supposed to input for the frontmatter so I just left it with empty {}
{
allMdx(
filter: { frontmatter: {} }
sort: { order: DESC, fields: frontmatter___date }
limit: 6
) {
nodes {
id
frontmatter {
title
path
slug
alt
date(formatString: "MMMM Do, YYYY")
image {
childImageSharp {
fluid {
src
}
}
}
}
}
}
}
Hi it's my first post on StackOverflow.
I'm working on for translating dynamically a website. I'm using the package vuejs-localization.
How can I switch language directly?
I'm working with the latest version of VueJS and Laravel.
This is my code on my language selector:
export default {
name: "LanguageDropDown",
data() {
return {
languages: [
{
lang: "fr",
text: "Français",
icon: "fr",
},
{
lang: "gb",
text: "English",
icon: "gb",
},
{
lang: "us",
text: "US",
icon: "us"
},
],
};
},
computed: {
getCurrentLang: function() {
return this.$lang.getLang();
},
},
methods: {
setLanguage(lang) {
this.$root.$emit("setLang", lang);
},
setLang(lang, index) {
this.$root.$emit("setLang", this.languages[index].languages[lang], index);
},
},
};
And this is what is in my App.js :
const app = new Vue({
el: '#app',
router,
data() {
return {
lang: 'fr'
};
},
created() {
this.$lang.setLang( this.lang );
},
mounted() {
let _this = this;
this.$root.$on( 'setLang', function( lang ){
_this.lang = lang ;
console.log(_this.lang);
});
},
watch: {
lang :{
handler(val){
this.lang = val;
console.log('changed to :' + this.lang);
},
},
},
})
I expect a translation by changing the variable 'fr' to 'us' or 'gb' but the log says that the lang is switching but nothing happened ...
Thanks for your help.
To make language changes, you need to call this.$lang.setLang. You can do it in watch
watch: {
lang :{
handler(val){
this.lang = val;
this.$lang.setLang(val)
console.log('changed to :' + this.lang);
},
},
},
I'm using Kendo UI for Angular and I am trying to export my grid to Excel. I have implemented a solution like this: https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/
and it does work. It exports all rows in my grid. My problem is that I only want to export selected rows. I haven't been able to successfully filter the allData method to only export selected rows.
It looks to me like the process method called from within the allData method can take a State object that has a filter: component. But for the life of me I can't seem to get it to work. Can anybody point me to a simple example where the selected rows only are exported to Excel?
Thanks,
John B.
I have implemented selected rows and selection key to be entire row so that when I export i can retrieve the selected rows and modified export allData to export selection data if exists.If selection doesnot exists then exports all data.
public mySelectionKey(context: RowArgs): string {
// return context.dataItem.serialNumber + " " + context.index;
return context.dataItem;
}
public allData(): ExcelExportData {
let selInventory: Inventory[] = [];
let result: ExcelExportData;
selInventory = JSON.parse(JSON.stringify(this.mySelection));
if (selInventory.length > 0) {
result = {
data: process(selInventory, {
sort: [{ field: "serialNumber", dir: "asc" }]
}).data
};
} else {
result = {
data: process(this.inventoryData, {
sort: [{ field: "serialNumber", dir: "asc" }]
}).data
};
}
return result;
}
Export selected or all rows
function excelExport() {
var exportAll = $('.selectrow').is(":checked");
var grid = $("#grid");
var rows = [{
cells: [
{ value: "column1" },
{ value: "column2" },
{ value: "column3" },
{ value: "column4" },
{ value: "column5" },
{ value: "column6" },
{ value: "column7" }
]
}];
if (exportAll) {
var dataDource = grid.getKendoGrid();
var trs = $("#grid").find('tr');
for (var i = 0; i < trs.length; i++) {
if ($(trs[i]).find(":checkbox").is(":checked")) {
var dataItem = dataDource.dataItem(trs[i]);
rows.push({
cells: [
{ value: dataItem.column1 },
{ value: dataItem.column2 },
{ value: dataItem.column3 },
{ value: dataItem.column4 },
{ value: dataItem.column5 },
{ value: dataItem.column6 },
{ value: dataItem.column7 }
]
})
}
}
}
else {
var dataSource = grid.data("kendoGrid").dataSource;
var trs = grid.find('tr');
for (var i = 1; i < dataSource._data.length; i++) {
var dataItem = dataSource._data[i];
rows.push({
cells: [
{ value: dataItem.column1 },
{ value: dataItem.column2 },
{ value: dataItem.column3 },
{ value: dataItem.column4 },
{ value: dataItem.column5 },
{ value: dataItem.column6 },
{ value: dataItem.column7 }
]
})
}
}
var workbook = new kendo.ooxml.Workbook({
sheets: [
{
columns: [
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true },
{ autoWidth: true }
],
title: "Exported Result",
rows: rows
}
]
});
kendo.saveAs({ dataURI: workbook.toDataURL(), fileName: "ExportedResult" });
}
I am a student studying vue.
I used Vue-chartjs to draw a graph, and I'd like to display the value on a pie graph.
But I don't know what to do.
Please help me...
the current situation (image) : enter image description here
My wish (image) : enter image description here
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1,
}
}
)
}
},
watch : {
attendanceData : function(){
this.$data._chart.destroy();
this.renderPieChart();
}
}
});
As The dicusstion on tooltip of chart.js at Stackoverflow, uses plugin is one solution.
then as Vue chart.js guide said,
in mounted(), uses this.addPlugin to add your plugin like below demo:
Vue.config.productionTip = false
//below plugin is copied from https://stackoverflow.com/a/37989832/5665870
let pluginConfig = {
id: 'my-plugin',
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
}
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.addPlugin(pluginConfig);
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1
},
showAllTooltips: true
}
)
}
},
watch : {
attendanceData : function(){
//this.$data._chart.destroy();
//this.renderPieChart();
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
<pie-chart></pie-chart>
</div>
I need to load items (menu) via ajax but do not understand how...
trying to do like this:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: 'component',
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});
});
response:
[
{
"text": "test",
"menu": {
"text": "asdf",
"handler":"handleAction.createDelegate(window)"
}
}
]
but handler is not working.
Can anybody give the working example.
I haven't used element loader before so I would make a wild guess that you should specify a renderer function according to http://docs.sencha.com/ext-js/4-0/#/api/-cfg-renderer:
var tb = Ext.create('Ext.toolbar.Toolbar', {
renderTo: 'top-menu',
autoLoad: {
url: '/index/tullbar',
renderer: function(loader, response) {
var menuItems = Ext.decode(response.responseText);
tb.items.add(menuItems);
},
params: {
userId: 1
}
},
layout: {
overflowHandler: 'Menu'
}
});