I am trying to parse some XML data into JSON using Javascript/Jquery for use in a Highcharts project. Unfortunately, I can't figure out what is wrong with my code as it will not even read the XML. So far I have:
xml:
<Row>
<Category>data</Category>
<actual>data</actual>
</row>
....
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
<div id="container" style="height: 400px; width: 500px"></div>
<script type = "text/javascript" src = "jquery-1.11.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type = "text/javascript" src = "test.js"></script>
</body>
</html>
Javascript:
$(document).ready(function(){
var globalData = new Array();
// $("h1").click(function(){
// Load the data from the XML file
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml', function(xml) {
alert("it works");
// Split the lines
var $xml = $(xml);
// push series
$xml.find('Row').each(function(i, row) {
var seriesOptions = {
Category: $(series).find('Category').text(),
Actual: $(series).find('Actual').text(),
};
// add it to the options
globalData.push(seriesOptions);
});
});
// });
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'pie'
},
plotOptions: {
pie: {
borderColor: '#000000',
innerSize: '60%'
}
},
series: [{
data: globalData
}]
},
// using
function(chart) { // on complete
var xpos = '50%';
var ypos = '53%';
var circleradius = 102;
// Render the circle
chart.renderer.circle(xpos, ypos, circleradius).attr({
fill: '#ddd',
}).add();
// Render the text
chart.renderer.text('THIS TEXT <span style="color: red">should be in the center of the donut</span>', 155, 215).css({
width: circleradius*2,
color: '#4572A7',
fontSize: '16px',
textAlign: 'center'
}).attr({
// why doesn't zIndex get the text in front of the chart?
zIndex: 999
}).add();
});
});
});
I believe my actual problem may be that my xml-parsing syntax is incorrect but running this on the development console in Firefox reveals no errors. Hopefully the experts here can spot the issue(s)
Thanks for your time.
One imediate problem that I can see is using local path
$.get('C:\\Users\\xxxxxx\\Desktop\\xmloutput.xml',
$.get first parameter is url that is location on network it could be something like $.get('http://localhost/xmls/xmloutput.xml,...
Related
The chart appears but it'completely empty when I change the type to bar, and completely black when I keep horizontalBar.
If I try to cut my data leaving jest few rows the horizontalBar chart appears empty too
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</head>
<style>
#wrapper {
height: 1000px;
}
</style>
<body>
<div id="wrapper">
<canvas id="chart"></canvas>
</div>
<SCRIPT LANGUAGE=javascript>
function makeChart(products)
var Counter = products.map(function(d) {
return d.Counter;
});
var CumVol = products.map(function(d) {
return +d.CumVol;
});
var chart = new Chart('chart', {
type: "horizontalBar",
options: {
maintainAspectRatio: true,
legend: {
display: false
}
},
data: {
labels: Counter,
datasets: [
{
data: CumVol
}
]
}
});
}
// Request data using D3
d3
.csv("http://localhost:8080/cumvol.csv")
.then(makeChart);
</SCRIPT>
</body></html>
Counter;CumVol
1;0.009999999776482582
2;0.029999999329447746
3;0.06999999843537807
4;0.12999999709427357
5;0.13999999687075615
6;0.14999999664723873
7;0.1599999964237213
Here few rows of my csv file cumvol
Trying with another file everything is showed properly (I mean changing the name of the columns):
Name,Weeks,Gender
Steffi Graf,377,Female
Martina Navratilova,332,Female
Serena Williams,319,Female
Roger Federer,308,Male
Pete Sampras,286,Male
Ivan Lendl,270,Male
Jimmy Connors,268,Male
Chris Evert,260,Female
Novak Djokovic,223,Male
The reason is that in the two CSV files, the fields are not separated by the same character (comma vs. semicolon).
You may consider using d3-csv instead of d3.csv.
Please also take a look at this answer: https://stackoverflow.com/a/27432751/2358409
My intention is to develop a pie chart from a csv file. The perspectives are the headers. My code takes the csv file. The headers are to be stored as options in the drop down menu. When a drop down menu item is selected a visualisation of the selected perspective is to be shown. A sample of the csv file is as follows:
,org_title,role_title,continent,country,updated_at_date
1,Startup,Founder,Oceania,Australia,27/06/2016
2,SME,C-Level / Owner,Oceania,Australia,27/06/2016
3,School / University,Student,Oceania,Australia,27/06/2016
4,School / University,Student,South America,Brazil,27/06/2016
5,Government Department,other,Asia,Philippines,28/06/2016
6,other,other,Asia,Singapore,27/06/2016
7,Non Profit Organisation,other,Asia,Malaysia,27/06/2016
8,Non Profit Organisation,other,Asia,Mongolia,27/06/2016
My code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file"/>
<div id='container'/>
<select id='options'/>
<script>
$('#options').change(function () {
var v =this.value;
var res=[];
Object.keys(CSVARRAY[v]).forEach(function(k) {
res.push({'name':k,'y':CSVARRAY[v][k]});
});
console.log(JSON.stringify(res));
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
data: res
}]
});
});
//Selecting file and converting it to tabular form
var file = document.getElementById('file');
var CSVARRAY;
file.addEventListener('change', function() {
var reader = new FileReader();
var f = file.files[0];
reader.onload = function(e) {
CSVARRAY = parseResult(e.target.result); //this is where the csv array will be
};
reader.readAsText(f);
});
function parseResult(result) {
var res = result.split("\n");
var headers = res[0].split(',');
headers.shift();
res.shift();
var d = {};
var prev={};
headers.forEach(function(h) {
d[h] = {};
prev[h] = [];
});
res.forEach(function(row) {
var i=0;
var r = row.split(",");
r.shift();
r.forEach(function(cell) {
if (cell !== prev[headers[i]])
{
d[headers[i]][cell]=[];
d[headers[i]][cell]=[];
d[headers[i]][cell]=1;
}
else
{
d[headers[i]][cell]+=1;
}
prev[headers[i]]=cell;
i += 1;
});
});
//return resultArray;
var options = $("#options");
headers.forEach(function(h) {
options.append($("<option />").val(h).text(h));
});
return d;
}
</script>
</body>
</html>
It is almost correct. However, the drop down menu dissappears after I click on any item.
The reason is actually because your div with the id "container" is not closed correctly. This means that the browser is interpreting that the select tag is actually within the container div. The same container div which is being overwritten with your chart.
If you change the following from:
<div id='container'/>
// javascript references are here
<select id='options'/>
To:
<input type="file" id="file" name="file"/>
<div id='container'>
</div>
// javascript references are here
<select id='options'/>
On an aside, your JavaScript code is very hard to follow, mostly because there is a lot of strange indenting going on. Take a look at airBnB's JavaScript style guide for information on making your code easier for others to read.
I am using jsPDF to convert html to pdf. In some cases, where html has svg charts, some of the data is duplicated in the generated pdf.
e.g. If the charts have legends, they are getting duplicated. See the screenshot below. City names and the percentages are repeated.
Below is the code to create pdf.
pdf.addHTML($("#page1"), options, function(){
pdf.addPage();
pdf.addHTML($("#page2"), options, function(){
pdf.addPage();
pdf.output('dataurlnewwindow');
});
});
EDIT 1:
This is what I have figured so far.
<div id="outerDiv">
<div id="pieChart"></div>
</div>
When I do this, pdf.addHTML($("#pieChart"), no issues here.
But, when I do this, pdf.addHTML($("#outerDiv"), then labels get repeated.
and this is how I generate my c3js charts
var pieChart = c3.generate({
bindto: '#pieChart',
EDIT 2:-
Below is my entire code.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/rgbcolor.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/StackBlur.js"></script>
<script type="text/javascript" src="http://gabelerner.github.io/canvg/canvg.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
<script type='text/javascript'>
function replaceAllSVGsWithTempCanvas(elemSelector) {
var svgElements = $(elemSelector).find('svg');
//replace all svgs with a temp canvas
svgElements.each(function() {
var canvas, xml;
// canvg doesn't cope very well with em font sizes so find the calculated size in pixels and replace it in the element.
$.each($(this).find('[style*=em]'), function(index, el) {
$(this).css('font-size', getStyle(el, 'font-size'));
});
canvas = document.createElement("canvas");
canvas.className = "screenShotTempCanvas";
//convert SVG into a XML string
xml = (new XMLSerializer()).serializeToString(this);
// Removing the name space as IE throws an error
xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');
//draw the SVG onto a canvas
canvg(canvas, xml);
$(canvas).insertAfter(this);
//hide the SVG element
$(this).attr('class', 'tempHide');
$(this).hide();
});
}
jQuery(document).ready(function($) {
genChart();
});
function genPDF() {
var options = {
background: '#fff'
};
var pdf = new jsPDF('p', 'pt', 'a4');
replaceAllSVGsWithTempCanvas(".content");
pdf.addHTML($("#chartOuter"), options, function() {
pdf.output('dataurlnewwindow');
$(".content").find('.screenShotTempCanvas').remove();
$(".content").find('.tempHide').show().removeClass('tempHide');
});
}
function genChart() {
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type: 'pie'
}
});
}
</script>
</head>
<body class="content">
<table width="100%">
<tr>
<td width="50%">
<div id="chartOuter">
<div id="chart"></div>
</div>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<input type="button" onclick="genPDF();" value="Generate PDF" />
</td>
</tr>
</table>
</body>
</html>
EDIT 3:-
I tried just converting html to canvas using html2canvas. It is also giving the same issue.
Edit 4:
I could fix the duplicate issue now. But the charts and the text written to pdf are little bit blurry. Basically, I added function replaceAllSVGsWithTempCanvas and then use that while writing to pdf. But it seems this function does smething to the html that makes content written to pdf blurry. In fact pie charts etc, are no more circles but looks like oval shape.
Edited the question with modified js.
Looks like it is a bug in html2canvas. You should add the bottom code after html2canvas is loaded to fix that (Credits goes to this guy):
NodeParser.prototype.getChildren = function(parentContainer) {
return flatten([].filter.call(parentContainer.node.childNodes, renderableNode).map(function(node) {
var container = [node.nodeType === Node.TEXT_NODE && node.parentElement.tagName !== "text" ? new TextContainer(node, parentContainer) : new NodeContainer(node, parentContainer)].filter(nonIgnoredElement);
return node.nodeType === Node.ELEMENT_NODE && container.length && node.tagName !== "TEXTAREA" ? (container[0].isElementVisible() ? container.concat(this.getChildren(container[0])) : []) : container;
}, this));
};
Fiddle
Since html2canvas loads as a module, you should directly find NodeParser.prototype.getChildren in the source code and edit it to match above. That means you can't load it from CDN.
I think made it work correctly in two steps.
First, I commented out the "addhtml plugin" because I had this error in my console:
Refused to execute script from 'https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled.
Second, I changed the pdf source from #chartOuter to #chart.
pdf.addHTML($("#chart"), options, function () {
var string = pdf.output('datauristring');
$('.preview-pane').attr('src', string)
});
And there is no more dedoubling.
-----
EDIT (since I misunderstood the question at first)
It is needed to use the outer div... And maybe the full page.
Okay... To be honest, I don't know why this text issue happens.
But I noticed that the duplicate text has serif even if it is specified "sans-serif".
So I focused on this.
I tried to change the font-size... It affected the duplicate, but the text didn't follow the css rule. Okay.
Then I tried to just remove the text before the pdf creation part... And magic!
;)
$(".c3 svg").css({"font-size":"0px"});
Here is the complete script, I didn't touch the rest of your original code.
jQuery(document).ready(function ($) {
genChart();
});
function genPDF() {
var options = { background: '#fff'};
var pdf = new jsPDF('p', 'pt', 'a4');
$(".c3 svg").css({"font-size":"0px"}); // <-- This does the trick !
pdf.addHTML($("#chartOuter"), options, function () {
var string = pdf.output('datauristring');
$('.preview-pane').attr('src', string)
});
}
function genChart() {
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie'
}
});
}
You can try using ChartJS instead of C3.
I've adapted your code and tried it with success.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-alpha1/html2canvas.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/MrRio/jsPDF/master/plugins/addhtml.js"></script>
<script type='text/javascript'>
jQuery(document).ready(function ($) {
genChart();
});
function genPDF() {
var options = { background: '#fff'};
var pdf = new jsPDF('p', 'pt', 'a4');
pdf.addHTML($("#chartOuter"), options, function () {
var string = pdf.output('datauristring');
$('.preview-pane').attr('src', string)
});
}
function genChart () {
var ctx = $("#chart");
var options = {};
var myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
"data1",
"data2"
],
datasets: [{
data: [30, 120],
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
]
}]
},
options: options
});
}
</script>
</head>
<body>
<table width="100%">
<tr>
<td width="50%">
<div id="chartOuter">
<!-- <div id="chart"></div> -->
<canvas id="chart" width="400" height="400"></canvas>
</div>
</td>
<td>
<iframe height="550px" class="preview-pane" type="application/pdf" width="100%" frameborder="0" style="position:relative;z-index:999"></iframe>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<input type="button" onclick="genPDF();" value="Generate PDF"/>
</td>
</tr>
</table>
</body>
</html>
Dynamically loading pdf blurry, the same file official demo is very clear. I can't locate the problem?
Use the chrome browser. Version 73.0.3683.86 (official version) (64-bit)
Here is my codeļ¼
async process(buffer, index) {
// Processing the decrypted data stream
let uint8Array = new Uint8Array(buffer);
var word = await this.Uint8ToBase64(uint8Array);
var decryptedData = CryptoJS.AES.decrypt(word, this.authorKey, {
mode: CryptoJS.mode.ECB,
padding: CryptoJS.pad.Pkcs7
});
// Then turn wordArray to uint8Array
let getUint8Array = await this.wordArrayToU8(decryptedData);
// decryption ends
this.loadingPdf(getUint8Array, index);
},
async loadingPdf(getUint8Array, index) {
// render canvas
let pdf = await pdfjsLib.getDocument({ data: getUint8Array, cMapUrl: cMapUrl, cMapPacked: cMapPacked });
let page = await pdf.getPage(1).then(page => {
return page;
});
let canvas = document.getElementById("the-canvas" + index);
const CSS_UNITS = 96.0 / 72.0;
const DEFAULT_SCALE = 1.7;
const UNKNOWN_SCALE = 0;
let viewport = page.getViewport( DEFAULT_SCALE * CSS_UNITS);
if (canvas.dataset.runed) return;
canvas.width = viewport.width*CSS_UNITS;
canvas.height = viewport.height*CSS_UNITS;
this.canvasW =
this.canvasW > (1000 / viewport.height) * viewport.width
? this.canvasW
: (1000 / viewport.height) * viewport.width;
canvas.style.width = (1000 / viewport.height) * viewport.width;
canvas.dataset.runed = true;
var context = canvas.getContext('2d');
// [Important] Turn off anti-aliasing
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
await page.render({
//enableWebGL: true,
// canvasContext: context,
transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
// transform: [1, 0, 0, 1, 0, 0],
canvasContext: canvas.getContext("2d"),
viewport: viewport
});
this.loadedPages.push(index)
},
I have already gone through this link
Chart.js - Doughnut show tooltips always?
I have implemented the code in the same way on my machine but the chart is not appearing.
The following is my code:
HTML:
<!doctype html>
<html>
<head>
<title>Doughnut Chart</title>
<script src="Chart.js"></script>
</head>
<body>
<div>
<canvas id="chart" width="200" height="200"/>
</div>
</body>
JS:
var data = [
{
value: 300,
color:"#F7464A",
highlight: "#FF5A5E"
},
{
value: 50,
color: "#46BFBD",
highlight: "#5AD3D1"
},
{
value: 100,
color: "#FDB45C",
highlight: "#FFC870"
}
]
var options =
{
tooltipTemplate: "<%= value %>",
onAnimationComplete: function()
{
this.showTooltip(this.segments, true);
},
tooltipEvents: [],
showTooltips: true
}
var context = $('#chart').get(0).getContext('2d');
var chart = new Chart(context).Pie(data, options);
Please can anybody help me out with this trouble?
Or you could forget about jquery leave the <head></head as was in the code you posted and substitute
var context = $('#chart').get(0).getContext('2d');
with
var context = document.getElementById("chart").getContext("2d");
You just have to include this line in your html file to include jquery
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
In the code above seems to miss the ref to jquery between <head></head> tags
I want to update my cvs file through a mouse click on a graph, like I create a graph by reading a data from the same cvs file and when I get a graph what I want is that whenever I click on a point it make that point equal to zero on y-axis and update the corresponding value in a cvs file equal to 0.
Please can someone help. Here is my code which can take values from cvs file but is not updating but the same code works fine if I take hard coded series of an array.
Don't understand why isn't these plot options working.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'},
title: { text: 'Output'},
xAxis: { categories: []},
yAxis: {
title: { text: 'Units'} },
plotOptions: {
series: { cursor: 'pointer',
point: {
events: { click: function() {
var y = this.item(y);
var x = this.x;
chart.series[0].data[x].update(y -= y);} } } },
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series); });
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
You can catch click point action http://api.highcharts.com/highcharts#plotOptions.series.point.events.click and then use get new value from csv by ajax and use update() function http://api.highcharts.com/highcharts#Point.update()