Am trying to load Zingchart using JSON data retrieved from Webapi.
The sample data is like this
$scope.testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];
But ZingChart is expecting the values to be..
[{"text":"Sample1","values":[465]},{"text":"Sample2","values":[288]}];
(Without quotes in the values*)
and because of this am getting a different output in UI as the chart is showing 2 or 3 times
Can you please let me know how to bind a JSON data from webapi to chart dynamically ?
This is simply a matter of of how you data is formatted. You can see the values array is string quoted like "[458]" which I assume is coming from php?
It doesn't really matter where its coming from, this is not a valid type for an array. Its a string with brackets inside so of course its showing up as NAN.
There are probably better ways to approach a solution, but this will work
1) Test it out:
console.log(JSON.parse(JSON.stringify($scope.testValues)))
2) $scope.testValues = JSON.parse(JSON.stringify($scope.testValues))
You have to replace the quotes before and after the brackets[] using:
var eventlist = JSON.stringify(testValues);
var eventstring = new String();
eventstring = eventlist.replace(/"\[/g, '[');
eventstring = eventstring.replace(/\]"/g, ']');
So your final code is:
var testValues = [{"text":"Sample1","values":"[465]"},{"text":"Sample2","values":"[288]"}];
var eventlist = JSON.stringify(testValues);
var eventstring = new String();
eventstring = eventlist.replace(/"\[/g, '[');
eventstring = eventstring.replace(/\]"/g, ']');
var myConfig = {
type: 'pie',
series: JSON.parse(eventstring)
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>
Related
I'm actually using node js and html-pdf lib to generate a pdf on the server which is return as a blob to the client. When I did it on my local machine everything is fine but when I upload it to the server and test it out. The text size increases when in production.
I've created a function that takes an object as a parameter:
async function generatePDF(object) {
let htmlContent = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body,
html {
font-family: arial, sans-serif;
color: rgb(46, 46, 46);
}
</style>
</head>
<body>
<br />
Date: ${object.todayDate}
<div style="margin-top: 60px">
<h3 style="border-top: 1px solid black">Dr. ${object.name} ${object.firstname}</h3>
</div>
</html>
`;
Down below is the code to generate PDF from the HTML file created:
let sideMargin = "1.5cm";
var options = {
format: "A5",
border: {
top: "1.5cm", // default is 0, units: mm, cm, in, px
right: sideMargin,
bottom: "3.0cm",
left: sideMargin,
},
};
console.log(options);
var path = require("path");
var appDir = path.dirname(require.main.filename);
let date = Date.now();
let newPDF = `${appDir}/files/${date}new.pdf`;
let newHTML = `${appDir}/files/${date}new.html`;
htmlData["fileName"] = newHTML;
console.log(`Generating new PDF '${newPDF}`);
await generatePDF(htmlData);
var html = fs.readFileSync(`${newHTML}`, "utf8");
pdf.create(html, options).toFile(`${newPDF}`, function (err, res) {
if (err) return console.log(err);
console.log(res);
r.sendFile(`${newPDF}`, (error) => {
if (!error) {
fs.unlinkSync(`${newPDF}`);
fs.unlinkSync(`${newHTML}`);
}
});
});
The problem is that locally on my machine everything is fine, but online the text size of the PDF is way bigger, and instead of returning one page it's returning back two pages (of course the content I've set here in the HTML is not the result I want, it is just an example).
Hey i've found what was the problem,
there is no solution to this problem yet. The work around is to add
html {
zoom: 0.55;
}
to the CSS file/code
There's actually an open issue for this.
I'm trying to get a pie chart. However, it isn't working too well. The page is completely blank.
I'm using node.js. I have chart.js installed though npm. I run this html on my ejs file, and it is just a blank page.
<code>
<html>
<head>
<script src="../node_modules/chart.js/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart" width="600" height="400"></canvas>
<script>
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Red"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1",
label: "Green"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870",
label: "Yellow"
}
]
var pieOptions = {
segmentShowStroke : false,
animateScale : true
}
var ctx = document.getElementById("myChart").getContext("2d");
new Chart(ctx).Pie(data, pieOptions);
</script>
</body>
</html>
</code>
I didn't read too deeply into your code but I noticed that you have your node.js code in the head of the file. Unfortunately, node.js cannot be executed in the browser, but is used for server side implementation of code. What does your console say?
Here is what I had to do.
I copied the Charts.min.js file from the node_modules to the public folder.
Other than that, I have the canvas at the top. Also, I had to change the:
var ctx = document.getElementById("myChart").getContext("2d");
to
var ctx = document.getElementById('myChart').getContext('2d');
How can I display two Infowindow on my map.
in my code I can open only one InfoWindow, but I will display at same time twoo InfoWindow on my map what can I do. my code is:
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng( 38.736946, 35.310059), 6);
map.openInfoWindow(new GLatLng( 38.582526, 42.846680),
document.createTextNode("Van Gölü"));
}
}
The Google Maps API v2 native InfoWindow only supports one per map. The Google Maps API v3 removes that limitation.
Either use a custom InfoWindow or migrate your application to the Google Maps API v3.
As #duncan observed, that Google Maps API v2 has been officially deprecated as of May 19, 2010 and will not be supported after May 19, 2013. New development in that API is strongly discouraged.
this code is working :
<!DOCTYPE html>
<html>
<head>
<META http-equiv=content-type content=text/html;charset=x-mac-turkish>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script src="js/jquery.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=false">
</script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(39.078908,35.244141),
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
infoWindow = new google.maps.InfoWindow();
var windowLatLng = new google.maps.LatLng(38.668356,33.376465);
infoWindow.setOptions({
content: "Tuz Golu",
position: windowLatLng,
});
infoWindow.open(map);
infoWindow2 = new google.maps.InfoWindow();
var windowLatLng2 = new google.maps.LatLng(38.565348,42.868652);
infoWindow2.setOptions({
content: "Van Golu",
position: windowLatLng2,
});
infoWindow2.open(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:65%; height:40%"></div>
</body>
</html>
Due to the limit of 5 fusion table layers and 5 styles of one fusion table layer, I have to try it as: use 5 fusion table layers and each one use two styles, then I can get to my purpose: show 10 different styles in a map.
But after I implemented, I found it only show the first fusion table layer.
Then I wrote a testing case to check why. And found:
If we set styles in two layers, only the first layer can be displayed and the second one is gone. If I set style for one layer, it works well.
Below is my code, can someone help on it? Now only one layer is displayed. If we comment the style setting for them or one of them, both layers can be displayed.
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#top-box {padding: 10px; background-color:#336699;}
.para-line {font-weight:bold;}
#map_canvas { height: 100% }
</style>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"));
map.setMapTypeId('roadmap');
map.setCenter(new google.maps.LatLng(38.4985464, -98.3834298));
map.setZoom(4);
var tableid1 = 4436842;
var style = [{
where: "State in('IL','PA')",
polygonOptions:
{
fillColor: "#rrggbb",
fillOpacity: 0.7
}
},{
where: "State in('AL')",
polygonOptions:
{
fillColor: "#006400",
fillOpacity: 0.7
}
}
];
var query1 = {
select: ['geometry','name'],
from: tableid1,
where: "State in('IL','PA')"
}
var query2 = {
select: ['geometry','name'],
from: tableid1,
where: "State in('AL')"
}
var layer1 = new google.maps.FusionTablesLayer({
query:query1,
styles: style,
suppressInfoWindows: false,
clickable:true
});
layer1.setMap(map);
var layer2 = new google.maps.FusionTablesLayer({
query:query2,
styles:style,
suppressInfoWindows: false,
clickable:true
});
layer2.setMap(map);
return;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
The limit is (from the documentation "You can use the Maps API to add up to five Fusion Tables layers to a map, one of which can be styled with up to five styling rules."
You can style the layers using the FusionTable User Interface, but only one can be styled dynamically and that one can only have 5 styling rules.
Is it possible using the spotify apps API to create one of these widgets filled with my data of choice?
Yes, by using import/scripts/pager. Here's an example, extracted and simplified from the "What's New" app. Your pager.js:
"use strict";
sp = getSpotifyApi(1);
var p = sp.require('sp://import/scripts/pager');
var dom = sp.require('sp://import/scripts/dom');
exports.init = init;
function init() {
var pagerSection = dom.queryOne('#pager');
var datasource = new DataSource([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
var options = {
perPage: 5,
hidePartials: true,
orientation: 'vertical', // 'vertical', 'horizontal'
pagingLocation: 'top', // 'top', 'bottom'
bullets: false,
listType: 'list', // 'table', 'list'
context: 'aToplist' // some string unique for each pager
};
var pager = new p.Pager(datasource, options);
pager.h2.innerHTML = "Example Pager";
dom.adopt(pagerSection, pager.node);
}
function DataSource(data) {
var data = data;
this.count = function() {
return data.length;
};
this.makeNode = function(index) {
var dataItem = data[index];
var li = new dom.Element('li');
var nameColumn = new dom.Element('div', {
className: 'nameColumn',
html: '<div class="nameColumn">'+
'Name' + dataItem + ''+
'Creator' + dataItem +''+
'</div>'
});
dom.adopt(li, nameColumn);
return li;
};
}
Your index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="pager.css">
</head>
<body onload="sp = getSpotifyApi(1); sp.require('pager').init();">
<div id="wrapper">
<section class="toplists" id="bottomToplists">
<section id="pager" class="playlists playlistsTable toplist"></section>
</section>
</div>
</body>
</html>
And lastly, copy the whatsnew.css into your project and rename it to pager.css. You will of course need to clean up the css and modify the elements in your index.html to fit with your app but this is a good starting point.
The "What's New" app also has an example of a horizontal pager with album artwork. Take a look at this question and answer to figure out how to extract the source of the app.
Also note that I am not sure whether the pager.js will be part of the public API. If not then you can of course extract it into your own pager widget and use it anyway.