Develop Reference

Pie chart export to CSV / XLSX with amCharts.js

I can't find a way to export my data from a pie chart to CSV or XLSX. I checked this link from amCharts.js but I can manage to adapt it to my need.
Here's my code:
function getDataProviderForEventsByFlow(){
$.ajax({
url: restURI,
success: function(data) {
am4core.useTheme(am4themes_kelly);
chartEventsByFLow = am4core.create("events-by-flow", am4charts.PieChart);
chartEventsByFLow.hiddenState.properties.opacity = 0;
chartEventsByFLow.legend = new am4charts.Legend();
var marker = chartEventsByFLow.legend.markers.template.children.getIndex(0);
marker.cornerRadius(12, 12, 12, 12);
marker.strokeWidth = 2;
marker.strokeOpacity = 1;
marker.stroke = am4core.color("#ccc");
chartEventsByFLow.data = data;
var series = chartEventsByFLow.series.push(new am4charts.PieSeries());
series.dataFields.value = "number";
series.dataFields.category = "category";
series.dataFields.color = "color";
series.labels.template.disabled = true;
series.ticks.template.disabled = true;
series.slices.template.tooltipText = "";
}
});
}
And the export functions :
function exportCSVbyFlow() {
chartEventsByFLow.export.toCSV({}, function(data) {
this.download(data, this.defaults.formats.CSV.mimeType, "exportCSVvolumetryByFlow.csv");
});
}
function exportXLSXbyFlow() {
chartEventsByFLow.export.toXLSX({}, function(data) {
this.download(data, this.defaults.formats.XLSX.mimeType, "exportXLSXvolumetryByFlow.xlsx");
});
}
This is the output in console:
Cannot read property 'toCSV' of undefined
Cannot read property 'toXLSX' of undefined
Thank you !

The code you give is using v4 but the link you're trying to use as an example is using v3.
Have you seen this page? It shows a way to add a menu to a chart with different export options. It also talks about programatically exporting using code like:
chart.exporting.export("csv");

MediaInfoLib JavaScript with MVC 5 .NET C#

I have a website developed in C# MVC5 .NET and I need to use de MediaInfolib DLL javascript version. I am not able to load the .wasm file.
This is my .cshtml code:
<script type="text/javascript">
// Load the WebAssembly MediaInfo module if the browser supports it,
// otherwise load the asmjs module
var wasm_path ="#Url.Content("~/")" + "lib/MediaInfo_DLL/";
var MediaInfoJs = document.createElement('script');
if ('WebAssembly' in window) {
MediaInfoJs.src = wasm_path + "MediaInfoWasm.js";
} else {
MediaInfoJs.src = wasm_path + "MediaInfo.js";
}
document.body.appendChild(MediaInfoJs);
// Continue initialization
MediaInfoJs.onload = function () {
var MediaInfoModule, MI, processing = false, CHUNK_SIZE = 1024 * 1024;
var finish = function() {
MI.Close();
MI.delete();
processing = false;
}
...
MediaInfoModule = MediaInfoLib(
{'locateFile': function(path, prefix) {return wasm_path + path; }},
{ 'postRun': function () {
console.debug('MediaInfo ready');
// Information about MediaInfo
document.getElementById('result').innerText = 'Info_Parameters:\n';
document.getElementById('result').innerText += MediaInfoModule.MediaInfo.Option_Static('Info_Parameters') + '\n\n';
document.getElementById('result').innerText += 'Info_Codecs:\n';
document.getElementById('result').innerText += MediaInfoModule.MediaInfo.Option_Static('Info_Codecs') + '\n';
// Get selected file
var input = document.getElementById('input');
input.onchange = function() {
if(input.files.length > 0) {
document.getElementById('result').innerText = "Processing...";
parseFile(input.files[0], showResult);
}
}
}
});
};
</script>
I have these warnings in the MediaInfoWasm.js and the page doesn`t work:
MediaInfoWasm.js:19 failed to asynchronously prepare wasm: failed to
load wasm binary file at '/lib/MediaInfo_DLL/MediaInfoWasm.wasm'
Module.c.printErr.c.printErr # MediaInfoWasm.js:19 MediaInfoWasm.js:19
failed to load wasm binary file at
'/lib/MediaInfo_DLL/MediaInfoWasm.wasm' Module.c.printErr.c.printErr #
MediaInfoWasm.js:19
Has somebody used this MediaInfolib javascript version with MVC5?
Thanks in advance.
María José.

Loop JS object data in multiple arrays

I have some data in a Google Spreadsheet, which I'm pulling with Tabletop.js. I'm able to display my data as well in my showInfo() function. All good.
Now I try to achieve to display this data in a default Google Chart. In this case I use their map package to display my data on a map. They provided me some sample code, see here.
At the moment I'm struggling with the following function, whole code in my Fiddle:
mapdata.addRows([
// PREFERRED DATA TO COLLECT:
// [data.geoloc, data.GM_NAAM, 'blue' ],
// THE HARDCODED WAY:
['Kerkbrink 2 ANLOO', 'ANLOO', 'green'],
['Grote Kerkstraat 32 WIJK EN AALBURG', 'WIJK EN AALBURG', 'blue']
]);
How do I approach? I managed to display all data with a forEach in the showInfo function, but this does not work in this array.
I'm pretty new in JS-land, so I appreciate every help on achieving this.
Thanks in advance!

please find the updated fiddle here
is this what you are looking for ?
updated js code:
/* 1: tabletop shizzle */
var publicSpreadsheetUrl = 'https://docs.google.com/spreadsheets/d/1cpSdKrQK0DfRoC9_xgmAqwVaDqw8BKMOL7drA_QFIn0/edit?usp=sharing';
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
alert('Successfully processed!')
var chartdiv = document.querySelector(".chart_div");
console.log("data: ", data);
data.forEach( function(data) {
// card
var card = document.createElement('div');
card.classList.add("card");
//content
var content = document.createElement('div');
content.classList.add('content');
content.innerHTML = data.GM_NAAM + ' ' + data.geoloc;
// append
chartdiv.appendChild(card);
card.appendChild(content);
});
// trigger the google charts drapMap function and send the data to it
drawMap(data);
}
window.addEventListener('DOMContentLoaded', init);
/* 2: google chart shizzle */
google.charts.load('current', {
'packages': ['map'],
// DEFAULT GOOGLE API KEY
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap(data) {
var mapdata = new google.visualization.DataTable();
mapdata.addColumn('string', 'Address');
mapdata.addColumn('string', 'Location');
mapdata.addColumn('string', 'Marker')
console.log(data);
data = data ? data : [];
var rows = [];
data.forEach(function(item){
rows.push([item.GM_NAAM, item.geoloc, 'green'])
})
// THIS IS THE PART I NEED THE DATA.
mapdata.addRows(rows);
// SOME OPTIONS
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 7,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(mapdata, options);
}

Ionic problems with conection with database, and with input handleing

I made an App on android, using Ionic. Everything was working fine on my computer, but there are to things that did not work once the app was on on my phone.
The first one is maybe more difficult.
I have a data on Mysql database, and fetch that data using php echoing it as json. Then i retrieve it with angular using jsonp. it works fine on my computer, but nothing happens on my phone.
Here is my JS file:
$(function(){
var App = angular.module("App");
App.controller('companySearchController',function($scope,GetAPI){
$scope.groups = [];
$scope.message = "Fyrirtækja Leit";
$scope.showOrNot = false;
$scope.search2 = function(searchText){
GetAPI.getCompany2(searchText).then(onCompanyComplete);
};
var onCompanyComplete = function(data){
console.log(data['data']);
for(var x = 0; x<data['data'].length;x++){
var tempArray = [];
for(var i = 0; i<5; i++){
tempArray.push(data['data'][x][i]);
}
$scope.groups.push(tempArray);
console.log(tempArray);
}
};
$scope.toggleGroup = function(group) {
if ($scope.isGroupShown(group)) {
$scope.shownGroup = null;
} else {
$scope.shownGroup = group;
}
};
$scope.isGroupShown = function(group) {
return $scope.shownGroup === group;
};
});
}());
And the PHP file:
$<?php
$fname = $_GET['firstname'];
$pdo = require_once('dbconfig.php');
$sth=$PDO->prepare("SELECT * FROM company WHERE name LIKE '$fname%' LIMIT 200");
$sth->execute();
$result = $sth ->fetchAll();
$jsonData = json_encode($result);
echo $_GET['callback'] . '('.$jsonData.')';
Like i said, there is nothing that gets displayed on my phone, but when i run it in a browser on my computer, everything works fine.
And then there is the Input problem. I have some inputs that are all linked, and all change when the other changes. When i'm typing in the input, after i have typed the second number it auto fills in a number after that one. Everything works fine on my computer.
Here is the JS file:
$(function(){
var App = angular.module("App");
App.controller('currencyController',function($scope,GetAPI){
//$scope.run = false;
$scope.search = function(){
GetAPI.getCurrency().then(onCarComplete);
};
var onCurrencyComplete = function(data){
$scope.currencyData = data;
starter(1000);
};
var starter = function (price) {
for(var i = 0; i<$scope.currencyData.length;i++){
$scope.currencyData[i]['forApp'] = parseFloat(price/$scope.currencyData[i]['askValue']).toFixed(2);
$scope.currencyData[i]['forAppReal'] = price/$scope.currencyData[i]['askValue'];
}
};
$scope.changeCurrency = function(changed){
var isk = changed['forApp']*changed['askValue'];
console.log(isk);
//console.log(changed['shortName'] + " " + changed['forApp']+ " is: "+ isk);
calculate(isk);
changed['forApp'] = parseFloat(changed['forApp']).toFixed(0);
};
var calculate = function(isk){
for(var i = 0; i<$scope.currencyData.length;i++) {
var stuff = isk/$scope.currencyData[i]['askValue'];
stuff = parseFloat(stuff).toFixed(2);
$scope.currencyData[i]['forApp'] = (stuff);
}
};
$scope.clicked = function(item){
item['forApp'] = parseInt(item['forApp']).toFixed(0);
};
GetAPI.getCurrency().then(onCurrencyComplete);
});
}());
And the HTML file:
$<ion-view title="companys" class="fullIon">
<div class="list currencyList col-80 col-offset-10">
<label class="item item-input item-floating-label" data-ng-repeat="item in currencyData" data-ng-click="clicked(item)">
<input type="text" value="{{item.forApp}}" ng-model="item.forApp" ng-change="changeCurrency(item)"><p class="longNameText">{{item.longName}}</p>
</label>
</div>
</ion-view>

I had this same experience when I started making an ionic app.
Try adding cordova plugin named "cordova-plugin-whitelist"
cordova plugin add cordova-plugin-whitelist
Once installed, it will work.

The second problem, with the input was fixed by changing the input type from type="text" to type="number". but i still have the first problem :(

Javascript - parse XML document to create array

I am working on a web-based application which contains 'divs' that I use for clickable buttons. Currently, my code calls a handleClick function for each 'div' button that needs to be handled. I would like to parse an xml document to get the inputs required for my handleClick function. I have tried implementing solutions from this thread: Parsing XML with Javascript and create array, but I haven't had any luck. I have also been trying to use this information: http://www.w3schools.com/xml/dom_intro.asp, but I'm confused as to what is really needed. The w3schools code uses the XMLHttpRequest function, but the stackoverflow code does not. Here's what I have so far:
//Change background image when Login button clicked.
handleClick("#btnLogin", "SideMenu.png", "LoginButton", "SideMenuButton");
function handleClick (inputButton, inputImage, inputIndexOFF, inputIndexON) {
$(inputButton).click(function() {
$("body").css("background-image", "url(" + inputImage + ")");
//This is how I remove the highlight from the buttons.
zIndexON(inputIndexON);
//This is how I apply the highlight to buttons.
zIndexOFF(inputIndexOFF);
});
}
function zIndexOFF (inputClass) {
var x = document.getElementsByClassName(inputClass);
for (i = 0; i < x.length; i++) {
x[i].style.zIndex = "-1"
}
}
function zIndexON (inputClass) {
var x = document.getElementsByClassName(inputClass);
for (i = 0; i < x.length; i++) {
x[i].style.zIndex = "1"
}
}
//XML
<buttons>
<button>
<inputButton>#btnLogin</inputButton>
<inputImage>SideMenu.png</inputImage>
<inputIndexOFF>LoginButton</inputIndexOFF>
<inputIndexON>SideMenuButton</inputIndexON>
</button>
</buttons>
My initial idea was to create a function to load the xml doc per the information from the w3schools page, then use a for loop to parse the xml elements, and create an array containing the necessary inputs for the handleClick function, then loop through the array to call the handleClick function to process all of the clicks, rather than repeat the same call to handleClick for each button. If there is a simpler way, I'm all ears.
EDIT: I have created a handleClicks function trying to implement the thread from the post I linked above. I also edited my XML doc to resemble the XML from the same thread.
function handleClicks () {
//Get all buttons from XML
var btns = jQuery(buttons).find("button");
//Get input fields for each button in XML
for (var i = 0; i < btns.length; i++) {
var ret = [];
var tot = [];
ret[0] = jQuery(btns[i]).find('inputButton').text();
ret[1] = jQuery(btns[i]).find('inputImage').text();
ret[2] = jQuery(btns[i]).find('inputIndexOFF').text();
ret[3] = jQuery(btns[i]).find('inputIndexON').text();
tot.push(ret);
}
//Call handleClick function for each button from XML doc, and pass in inputs to handleClick function
for (var j = 0; j < button.length; i++) {
handleClick(tot[0].text, tot[1].text, tot[2].text, tot[3].text);
}
}
The buttons still highlight on hover, but nothing happens when I click.

Regarding XML parsing your example is correct. The only place that is not clear is your buttons variable in jQuery(buttons).find("button");. The following example correctly parses the sample xml and calls handleClick with needed data:
var xml_text = "<buttons>" +
"<button>" +
" <inputButton>#btnLogin</inputButton>" +
" <inputImage>SideMenu.png</inputImage>" +
" <inputIndexOFF>LoginButton</inputIndexOFF>" +
" <inputIndexON>SideMenuButton</inputIndexON>" +
"</button>" +
"</buttons>"
var xml = $.parseXML(xml_text);
function handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON) {
console.log(inputButton +' ' + inputImage +' ' + inputIndexOFF +' ' + inputIndexON);
}
function parseXml(xml) {
jQuery(xml).find("button").each(function() {
var inputButton = jQuery(this).find("inputButton").text();
var inputImage = jQuery(this).find("inputImage").text();
var inputIndexOFF = jQuery(this).find("inputIndexOFF").text();
var inputIndexON = jQuery(this).find("inputIndexON").text();
handleClick(inputButton, inputImage, inputIndexOFF, inputIndexON);
});
}
The XML document can be downloaded from the Web using jQuery GET or POST request:
$.ajax({
type: "POST",
url: "/echo/xml/",
dataType: "xml",
data: {
xml: xml_text
},
success: function(xml) {
console.log(xml);
parseXml(xml);
},
error: function(data) {
console.log(data);
}
})
In this example https://jsfiddle.net/t406v94t/ the XML is downloaded using POST request. The sample xml_text is posted to the jsfiddle server to receive it back as Web data. The document is parsed once the download is successfully finished.