Develop Reference

Processing my image for submission (CANVAS) not working

One quick question. I want to process my canvas into the JotForm Api.
I tried doing it by chart only and it is working. But when doing it on the canvas itself it do not show any data in my JotForm.
This is my code
//Listen for Jotform to get ready
JFCustomWidget.subscribe('ready', function (data) {
//listen for button click
var snapBtn = document.getElementById('snap')
snapBtn.addEventListener('click', () => {
screenshot();
})
// prep data
function prepData(dataURL) {
return {
valid: true,
value: JFCustomWidgetUtils.buildMetadata('imagelinks', [{
'name': "Data from table",
'base64': dataURL
}])
}
}
//process image for form submission
var resultChart, imageData;
var submissionData = {
valid: false,
value: ''
};
// function screenshot() {
// document.querySelectorAll('.chartjs-render-monitor').forEach( chart => { chart.style.display !== 'none' ? resultChart = chart : ''} );
// if(resultChart){
// imageData = resultChart.toDataURL();
// submissionData = prepData( imageData );
// JFCustomWidget.sendData( submissionData );
// }
// }
function screenshot() {
html2canvas(document.body, {
scrollY: -window.scrollY,
crossOrigin: 'Anonymous',
allowTaint: true,
foreignObjectRendering: true,
}).then(function (canvas) {
document.body.appendChild(canvas);
$data0101 = document.body.appendChild(canvas).toDataURL();
document.body.removeChild(canvas);
})
document.querySelectorAll($data0101).forEach
// document.querySelectorAll('.chartjs-render-monitor').forEach( chart => { chart.style.display !== 'none' ? resultChart = chart : ''} );
if (resultChart) {
imageData = $data0101;
submissionData = prepData(imageData);
JFCustomWidget.sendData(submissionData);
}
}
//listen for submit event
JFCustomWidget.subscribe('submit', function () {
JFCustomWidget.sendSubmit(submissionData);
});
});
The working code here is on the part where I commented it.
// function screenshot() {
// document.querySelectorAll('.chartjs-render-monitor').forEach( chart => { chart.style.display !== 'none' ? resultChart = chart : ''} );
// if(resultChart){
// imageData = resultChart.toDataURL();
// submissionData = prepData( imageData );
// JFCustomWidget.sendData( submissionData );
// }
// }
and here,
// document.querySelectorAll('.chartjs-render-monitor').forEach( chart => { chart.style.display !== 'none' ? resultChart = chart : ''} );
I need to get the canvas or the whole HTML itself that is on the actual monitor instead of just the chart I made.
Is there a way I can get my canvas to be inserted inside not the chart. I am lost at this area. Thanks

Is there a way to use NumberFormat() formatter (Google Charts) in vue-google-charts vue.js wrapper

I have been tasked with formatting some columns in charts using vue-google-charts, a vue.js wrapper for Google Charts and I am not sure that 'NumberFormat()' is even supported in vue-google-charts.
First, if somebody knows if it is or isn't, I would like to know so I don't waste much time pursuing something that isn't possible. But if it is, I sure would love an example of how to do it.
What we are doing is returning our chart data from the database and passing it into this vue.js wrapper. We are creating several charts but there are columns that have commas in them we want to remove.
Please review the existing code. I am trying to implement this using #ready as documented in the docs for vue-google-charts.
vue-google-charts docs -> https://www.npmjs.com/package/vue-google-charts
Here is our existing code with a little framework of the onChartReady method already in place.
<GChart
v-if="chart.data"
id="gchart"
:key="index"
:options="{
pieSliceText: chart.dropDownPie,
allowHtml: true
}"
:type="chart.ChartType"
:data="filtered(chart.data, chart.query, chart.query_type)"
:class="[
{'pieChart': chart.ChartType == 'PieChart'},
{'tableChart': chart.ChartType == 'Table'}
]"
#ready = "onChartReady"
/>
And then ...
<script>
import { GChart } from 'vue-google-charts';
import fuzzy from 'fuzzy';
import 'vue-awesome/icons';
import Icon from 'vue-awesome/components/Icon';
export default {
components: {
GChart,
Icon
},
props: {
},
data() {
return {
charts: window.template_data,
selected: 'null',
selects: [],
chartToSearch: false,
directDownloads: {
'Inactive Phones' : {
'slug' : 'phones_by_status',
'search_by' : 2,
'search' : '/Inactive/'
},
'Active Phones' : {
'slug' : 'phones_by_status',
'search_by' : 2,
'search' : '/Active/'
},
}
}
},
created(){
for (let i in this.charts){
if( !this.charts[i].slug ) continue;
$.post(ajaxurl, {
action: 'insights_' + this.charts[i].slug,
}, (res) => {
console.log(res.data);
if (res.success) {
this.$set(this.charts[i], 'data', res.data);
}
});
}
// console.log(this.charts);
},
methods: {
onChartReady(chart,google) {
let formatter = new.target.visualization.NumberFormat({
pattern: '0'
});
formatter.format(data, 0);
chart.draw(data)
},
toggleChart(chart) {
jQuery.post(ajaxurl, {
'action': 'update_insight_chart_type',
'chartType': chart.ChartType,
'chartSlug': chart.slug
}, (res) => {
chart.ChartType = res.data
})
},
csvHREF(chart) {
return window.location.href + '&rr_download_csv=' + chart.slug + '&rr_download_csv_search_by=' + chart.query_type + '&rr_download_csv_search=' + chart.query.trim()
},
filtered(data, query, column) {
query = query.trim();
if (query){
let localData = JSON.parse(JSON.stringify(data));
let column_Headers = localData.shift();
localData = localData.filter((row)=>{
if( query.endsWith('/') && query.startsWith('/') ){
return new RegExp(query.replace(/\//g, '')).test(String(row[column]));
}
return String(row[column]).toLowerCase().indexOf(query.toLowerCase()) > -1;
});
localData.unshift(column_Headers);
return localData;
}
return data;
},
filterIcon(chart) {
chart.searchVisible = !chart.searchVisible;
chart.query = "";
setTimeout(()=>{
document.querySelector(`#chart-${chart.slug} .insightSearch`).focus();
}, 1);
}
}
}
document.getElementsByClassName('google-visualization-table')
If anybody can help in ANY way, I am all ears.
Thanks!

not familiar with vue or the wrapper,
but in google charts, you can use object notation in your data,
to provide the formatted values.
all chart types will display the formatted values by default.
google's formatters just simply do this for you.
so, in your data, replace your number values with objects,
where v: is the value and f: is the formatted value...
{v: 2000, f: '$2,000.00'}
see following working snippet...
google.charts.load('current', {
packages: ['table']
}).then(function () {
var chartData = [
['col 0', 'col 1'],
['test', {v: 2000, f: '$2,000.00'}],
];
var dataTable = google.visualization.arrayToDataTable(chartData);
var table = new google.visualization.Table(document.getElementById('chart_div'));
table.draw(dataTable);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Convert document.querySelector() into Reactjs

I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.
var playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);
player.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
player.addEventListener('sourcechange', function() {
player.removeEventListener('playing', firstplay);
player.addEventListener('playing', firstplay);
});

You could simple write a react component and add your custom event listeners in componentDidMount method
const playerConfig = {
"libraryLocation": "//cdn.theoplayer.com/dash/theoplayer/",
ui: {
fluid: true
},
};
class App extends React.Component {
componentDidMount() {
const player = this.player;
player.addEventListener('sourcechange',() => {
player.removeEventListener('playing', this.firstplay);
player.addEventListener('playing', this.firstplay);
});
this.playerSrc = new THEOplayer.Player(player, playerConfig);
this.playerSrc.source = {
sources : [{
src : '//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source // //cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8
type : 'application/x-mpegurl' // sets type to HLS
}],
textTracks : [{
default: true, //optional
kind : 'subtitles',
src : 'example.srt',
srclang : 'en'
}]
};
}
render() {
return <div className={video-container} ref={(ref) => this.player = ref}/>
}
}

ZingChart X-axis labels showing as numbers instead of strings

I am using the ZingChart library to graph results from an API call. When I pass in a normal array for the "values" field of the chart data object, everything works fine. However, when I pass in an array made from Object.keys(titleSet) (where titleSet is a normal Javascript object), the graph displays as follows:
Example Chart
As you can see, the x-axis is now labeled with numbers instead of the array of strings. But when I print out the the result of Object.keys(titleSet) vs. passing in a normal array, they both appear to be the same in the console. Can anyone help me figure out what I'm doing wrong?
//List of movies inputted by the user
var movieList = [];
var movieSet = {};
var IMDBData = {
"values": [],
"text": "IMDB",
};
var metascoreData = {
"values": [],
"text": "Metascore"
};
var RTMData = {
"values": [],
"text": "Rotten Tomatoes Meter"
};
var RTUData = {
"values": [],
"text": "Rotten Tomatoes User"
};
var chartData = {
"type":"bar",
"legend":{
"adjust-layout": true
},
"plotarea": {
"adjust-layout":true
},
"plot":{
"stacked": true,
"border-radius": "1px",
"tooltip": {
"text": "Rated %v by %plot-text"
},
"animation":{
"effect":"11",
"method":"3",
"sequence":"ANIMATION_BY_PLOT_AND_NODE",
"speed":10
}
},
"scale-x": {
"label":{ /* Scale Title */
"text":"Movie Title",
},
"values": Object.keys(movieSet) /* Needs to be list of movie titles */
},
"scale-y": {
"label":{ /* Scale Title */
"text":"Total Score",
}
},
"series":[metascoreData, IMDBData, RTUData, RTMData]
};
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};

Full Disclosure, I'm a member of the ZingChart team.
Thank you for updating your question. The problem is you have defined your variable movieSet before the variablechartData. When parsing the page, top down, it is executing Object.keys({}) on an empty object when creating the variable chartData. You should just directly assign it into your config later on chartData['scale-x']['values'] = Object.keys(moviSet).
var callback = function(data)
{
var resp = JSON.parse(data);
movieSet[resp.Title] = true;
//Render
zingchart.render({
id:'chartDiv',
data:chartData,
});
};
There is a problem with the above code as well. It seems you are calling render on the chart every time you call this API. You should have one initial zingchart.render() and then from there on out use our API. I would suggest setdata method as it replaces a whole new JSON packet or modify method.
I am making some assumptions on how you are handling data. Regardless, check out the following demo
var movieValues = {};
var myConfig = {
type: "bar",
scaleX:{
values:[]
},
series : [
{
values : [35,42,67,89,25,34,67,85]
}
]
};
zingchart.render({
id : 'myChart',
data : myConfig,
height: 300,
width: '100%'
});
var callback = function(data) {
movieValues[data.title] = true;
myConfig.scaleX.values = Object.keys(movieValues);
zingchart.exec('myChart', 'setdata', {
data:myConfig
})
}
var index = 0;
var movieNamesFromDB = ['Sausage Party', 'Animal House', 'Hot Rod', 'Blazing Saddles'];
setInterval(function() {
if (index < 4) {
callback({title:movieNamesFromDB[index++]});
}
},1000)
<!DOCTYPE html>
<html>
<head>
<!--Assets will be injected here on compile. Use the assets button above-->
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
<script> zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
</script>
<!--Inject End-->
</head>
<body>
<div id='myChart'></div>
</body>
</html>
If you noticed in the demo, the length of scaleX.values determines how many nodes are shown on the graph. If you change values to labels this wont happen.

Creating a ajava script array in given format with carousel?

Creating a ajava script array in given format with carousel ?
Iam using carousel.js & carousel.css, its working fine with static data, but when im trying to put dynamic data its hot happening. Im not able to create the value array in given format.
<script>
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : [
{
"image" : "images/banner/big_banner_01.jpg",
},
{
"image" : "images/banner/big_banner_02.jpg",
},
{
"image" : "images/banner/big_banner_03.jpg",
},
{
"image" : "images/banner/big_banner_04.jpg",
},
{
"image" : "images/banner/big_banner_05.jpg",
}
]
} );
</script>
I need to pass the value for "value" key dynamically. How can i form this dynamically .IM TRYING WITH THE BELOW ONE
<repeat index="index.value" ref="DATA">
<repeat ref="VAL">
<choose ref="LANGUAGE">
<when value="${lang}">hiii
<script>
val[index.value] = "{"+"'image' :" +${IMAGE}+"}";</script>
</when>
<otherwise/>
</choose>
</repeat>
</repeat>
This is not working.

<script>
var generateCaroseul = {
getData: function(){
//loop through html to create an object with the data.
var dataObj = null;
$('li').each(function(index) {
var imgUrl = $(this).attr("src");
dataObj.add("image", imgUrl);
});
return dataObj;
}
};
var carousel2 = new widgets.Carousel( {
uuid : "carousel2",
widgetDir : "carousel/",
args : { "theme" : "gray", "scrollCarousel" : true, },
value : generateCaroseul.getData()
} );
</script>