I have successfully made my Puppeteer script work with Highcharts, but
only when I goto a page that has the highcharts library script
included. I'm trying to figure out how to eliminate the html page
requirement for the Puppeteer script. The following highcharts3.html works
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts Test 3</title>
</head>
<body>
<script src="/lib/highcharts/highcharts.js"></script>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
Here is the script highcharts3.js
const puppeteer = require('puppeteer')
const fs = require('fs')
console.log('main fs W_OK=' + fs.W_OK)
async function run() {
console.log('run fs W_OK=' + fs.W_OK)
// const browser = await puppeteer.launch({
// headless: true
// })
const browser = await puppeteer.launch({
headless: false,
slowMo: 2000,
devtools: true })
const page = await browser.newPage()
page.on("console", msg => console.log(`Page Console: ${msg.text()}`));
await page.goto('http://localhost:7890/highcharts3.html', {
waitUntil: "domcontentloaded"
})
async function loadChart() {
console.log('loadChart fs W_OK=' + fs.W_OK)
await page.evaluate(async (fs) => {
console.log('page.evaluate fs W_OK=' + fs.W_OK)
console.log('Highcharts.version='
+ Highcharts.version)
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
}, fs)
}
await loadChart()
await browser.close()
}
run()
Now, I want to adapt the above to pull in the highcharts.js file, not
via a script include in the html page, but somehow in the puppeteer
script itself. Here is my attempt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts Test 4</title>
</head>
<body>
<!-- Let's try to do this in the script -->
<!--<script src="/lib/highcharts/highcharts.js"></script>-->
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>
const puppeteer = require('puppeteer')
const fs = require('fs')
const Highcharts = require('highcharts')
console.log('main fs W_OK=' + fs.W_OK)
console.log('main Highcharts.version=' +
Highcharts().version) //Works
async function run() {
console.log('run fs W_OK=' + fs.W_OK)
console.log('run Highcharts.version=' + Highcharts().version) //Works
// const browser = await puppeteer.launch({
// headless: true
// })
const browser = await puppeteer.launch({
headless: false,
slowMo: 2000,
devtools: true
})
const page = await browser.newPage()
page.on("console", msg => console.log(`Page Console: ${msg.text()}`));
await page.goto('http://localhost:7890/highcharts4.html', {
waitUntil: "domcontentloaded"
})
async function loadChart() {
console.log('loadChart fs W_OK=' + fs.W_OK)
console.log('loadChart Highcharts.version=' +
Highcharts().version) //Works
await page.evaluate(async (Highcharts, fs) => {
//fs is defined because we passed it to page.evaluate
console.log('page.evaluate fs W_OK=' + fs.W_OK)
//The following statement fails with:
//(node:3580) UnhandledPromiseRejectionWarning:
// Error: Evaluation failed:
// TypeError: Highcharts is not a function
console.log('page.evaluate Highcharts.version=' +
Highcharts().version)
//When uncommented in place of the above, fails with:
//Highcharts is undefined
//console.log('page.evaluate Highcharts.version='
// + Highcharts.version)
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
}, Highcharts, fs)
}
await loadChart()
await browser.close()
}
run()
This fails in the loadChart function. I can't figure out how to
require Highcharts so that it is seen in the scope of the page.
I finally figured it out, posting in case it will help others. The key
was using fs.readFileSync to read in my highcharts.js in the context
of the page.
const puppeteer = require('puppeteer')
const fs = require('fs')
async function run() {
// const browser = await puppeteer.launch({
// headless: true
// })
const browser = await puppeteer.launch({
headless: false,
slowMo: 2000,
devtools: true
})
const page = await browser.newPage()
page.on("console", msg => console.log(`Page Console: ${msg.text()}`));
await page.goto('http://localhost:7890/highcharts4.html', {
waitUntil: "domcontentloaded"
})
async function loadChart() {
//THIS DID THE TRICK!
page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));
await page.evaluate(async (fs) => {
console.log('page.evaluate Highcharts.version='
+ Highcharts.version)
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
}, fs)
}
await loadChart()
await browser.close()
}
run()
Now, here is the final version that eliminates the .html page
/**
* This file creates a highchart,
* no html page is required. The html is crafted
* within this script.
*/
const puppeteer = require('puppeteer')
const fs = require('fs')
async function run() {
const browser = await puppeteer.launch({
headless: true
})
// const browser = await puppeteer.launch({
// headless: false,
// slowMo: 2000,
// devtools: true
// })
const page = await browser.newPage()
page.on("console", msg => console.log(`Page Console: ${msg.text()}`));
const loaded = page.waitForNavigation({
waitUntil: 'load'
})
const html =
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highcharts Test 4</title>
</head>
<body>
<div id="container" style="width:100%; height:400px;"></div>
</body>
</html>`
await page.setContent(html)
await loaded
async function loadChart() {
page.evaluate(fs.readFileSync('./lib/highcharts/highcharts.js', 'utf8'));
await page.evaluate(async (fs) => {
console.log('page.evaluate Highcharts.version='
+ Highcharts.version)
var myChart = Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
}, fs)
}
await loadChart()
await browser.close()
}
run()
Related
i am working on a php page that includes an export button to export the a div containing Arabic text labels and divs and highcharts divs, my issue is that jspdf can't export Arabic characters and using html2canvas didn't export the highcharts divs
function saveaspdf(){
html2canvas(document.getElementById(\"chart-container\"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL('image/png');
var imgWidth = 295;
var pageHeight = 210;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
var doc = new jsPDF('l', 'mm');
var position = 0;
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');
heightLeft -= pageHeight;
while (heightLeft >= 0) {
position = heightLeft - imgHeight;
doc.addPage();
doc.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight,'','FAST');
heightLeft -= pageHeight;
}
doc.save('file.pdf');
}
});
}
the result of this code is a pdf file with no highchart and arabic characters are not showing properly
To create a pdf with Highcharts chart with additional content (using jspdf) you can follow these steps:
send AJAX to Highcharts server with chart options.
The return will be an URL to the image on the server.
convert the chart image from Highcharts server into a base64 format. (You can
use these approaches: https://stackoverflow.com/a/20285053/10077925)
Add chart image and your additional content to pdf using jspdf library and save
the result.
Example:
$(function() {
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
var chartOptions = {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
subtitle: {
text: 'Source: thesolarfoundation.com'
},
yAxis: {
title: {
text: 'Number of Employees'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
};
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#cmd').click(function() {
var obj = {
options: JSON.stringify(chartOptions),
type: 'image/png',
async: true
},
exportUrl = 'https://export.highcharts.com/',
imgContainer = $("#container"),
doc = new jsPDF(),
chartsLen = 1,
imgUrl;
var calls = [];
for (var i = 0; i < chartsLen; i++) {
calls.push({
type: 'post',
url: exportUrl,
data: obj,
});
}
$.when(
$.ajax(calls[0])
).done(function(c1) {
imgUrl = exportUrl + c1;
toDataURL(imgUrl)
.then(dataUrl => {
doc.setFontSize(30);
doc.text(35, 25, 'Your text here...');
doc.addImage(dataUrl, 'PNG', 15, 40);
doc.save('sample-file.pdf');
})
});
});
var chart1 = Highcharts.chart('container', chartOptions);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0-beta.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
<button id="cmd">generate PDF</button>
Demo:
https://jsfiddle.net/BlackLabel/r58m6h4z/
![
this is the project structure I am using. On adding a local URL like this below code is not working. url:'data/showStudentInfo.html']3I am using Ext Js version 4.1.1
In my application , I am having a grid, which uses a store.
On clicking "click me" button I want to redirect to the server, for test purpose I am using a basic google url,
But the class Ext.Ajax.Request is not working I think
Please help , as I am new to Ext js, I am not aware of the mistake I am making.
I am trying this in notepad++, as well as in eclipse ide (indigo version).
both with same output, Ext.Ajax.Request part not working.
It will of great help if anyone have suggestion as if I want to send
Thanking in advance
Below is my html and js file
practiseCellEditEx.js
Ext.require([
'Ext.data.*',
'Ext.Ajax.',
'Ext.grid.*'
]);
function getRandomDate() {
var from = new Date(1900, 0, 1).getTime();
var to = new Date().getTime();
var date = new Date(from + Math.random() * (to - from));
return Ext.Date.clearTime(date);
}
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe'];
var lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias'];
var data = [];
for (var i = 0; i < count ; i++) {
var dob = getRandomDate();
var firstNameId = Math.floor(Math.random() * firstNames.length);
var lastNameId = Math.floor(Math.random() * lastNames.length);
var name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push([name, dob]);
}
return data;
}
Ext.onReady(function(){
Ext.define('Person',{
extend: 'Ext.data.Model',
fields: ['Name', 'dob']
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
autoLoad: true,
proxy: {
type: 'memory',
data: createFakeData(10),
reader: {type: 'array'}
},
sorters: [{
direction:'ASC'
}]
});
Ext.create('Ext.grid.Panel', {
store: store,
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
})
],
columns: [
{
text: "Name",
width:120,
dataIndex: 'Name',
editor : {
xtype: 'textfield',
allowBlank:false
}
},
{
text: "DOB",
width: 120,
dataIndex: 'dob',
renderer: Ext.util.Format.dateRenderer('M d, Y'),
editor: {
xtype: 'datefield',
format: 'M d, Y',
minValue: '01/01/1900',
maxValue: new Date()
}
},
{
xtype: 'actioncolumn',
width: 30,
sortable: false,
menuDisabled: true,
items: [{
icon: 'http://etf-prod-projects-1415177589.us-east-1.elb.amazonaws.com/trac/docasu/export/2/trunk/client/extjs/shared/icons/fam/delete.gif',
handler: function(grid, rowIndex, colIndex) {
store.removeAt(rowIndex);
}
}]
}
],
renderTo:'example-grid',
width: 280,
height: 280
});
Ext.create('Ext.Button', {
text: 'Click me',
// renderTo: Ext.getBody(),
renderTo:'myBtn',
handler: getName
});
function getName (btn)
{
alert("hello");
var records = store.getAt(1);
alert('the name at index 1 is:'+records.get('Name'));
Ext.Ajax.request({
url : 'https://www.google.co.in/'
});
};
/*
function buttonClicked() {
Ext.MessageBox.confirm( 'Delete this part ? :' );
}*/
});
practiseCellEditEx.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ExtJS Samples</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="practiseCellEditEx.js"></script>
</head>
<body>
<h2> <b>Helllo , today's Date is 02.12.2015 </b></h2>
<div id="example-grid"></div>
<!--<button id="myBtn"></button>-->
<div id="myBtn"></div>
</body>
</html>
The problems seems to be simply the request going to google.com. In my browser it is blocked because it is a cross-origin request (an ajax request to another domain), see also here for further information: https://en.wikipedia.org/wiki/Same-origin_policy.
The same code with a request to a local URL works fine.
I am attempting to write a function to add a highchart to a page and a function that can update the data for that chart based on a streaming API. I added a setInterval to simulate the streaming api.
The issue occurs on line 80. I believe it is because I have not set the series array with the chart object properly. When I need to add new data via 'addPoint', the prototype is not there. What am I missing in my AddChart function that wires the series up to highcharts?
FIDDLE:
http://jsfiddle.net/puto3Lg0/2/
$(function () {
$(document).ready(function () {
var metrics = [];
Highcharts.setOptions({
global: {
useUTC: false
}
});
function AddChart(metric) {
$("#divMain").append('<div id="' + metric.key + '" style="min-width: 310px; height: 200px; margin: 0 auto"></div>');
$('#' + metric.key).highcharts({
chart: {
type: 'spline',
animation: Highcharts.svg, // don't animate in old IE
marginRight: 10,
},
title: {
text: metric.Title
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
},
yAxis: {
title: {
text: 'Messages'
},
plotLines: [
{
value: 0,
width: 1,
color: '#808080'
}
]
},
tooltip: {
formatter: function() {
return '<b>' + this.series.name + '</b><br/>' +
Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
Highcharts.numberFormat(this.y, 2);
}
},
legend: {
enabled: false
},
exporting: {
enabled: false
},
series: metric.series
});
};
function ParseData(message) {
var jsonObj = JSON.parse(message);
$.each(jsonObj.Metrics, function(index, value) {
var metricName = value.Metric.Name.replace(' ', '');
if (metrics[metricName] == undefined) {
metrics[metricName] = {
"title": value.Metric.Name,
"key": metricName,
"series": [
{
name: value.Metric.Name,
data: []
}
],
}
AddChart(metrics[metricName]);
}
metrics[metricName].series.addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
});
};
setInterval(function () {
var m = "{\"Metrics\": [{\"Metric\":{\"Name\":\"Queue 01\",\"CurrentValue\":\"0\",\"TimeStamp\":\"\\\x2FDate(1415826323291)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 02\",\"CurrentValue\":\"3\",\"TimeStamp\":\"\\\x2FDate(1415826323344)\\\x2F\"}},{\"Metric\":{\"Name\":\"Queue 03\",\"CurrentValue\":\"9\",\"TimeStamp\":\"\\\x2FDate(1415826323405)\\\x2F\"}}]}";
ParseData(m);
}, 1000);
});
});
First, you have metrics declared as an array. Should be an empty object:
var metrics = {};
Second, the data structure you've created, metrics[metricName].series is not a Highcharts series object. It's an object you created and used to supply Highcharts data. To get the real series object, you'll have to get it back from the chart.
// getting the chart from the DOM, then the first series...
$("#"+metricName).highcharts().series[0].addPoint([new Date().getTime(), parseInt(value.Metric.CurrentValue)], true, false);
Updated fiddle.
Previous help here has got me to the current stage with my Highcharts project, however I am still hitting a major stumbling block. Highcharts chart is not loading data retrieved using .getJSON. I am at a loss as to why the html is not rendering the chart and load the data from data.php. All code below, does anyone have any ideas? #PawełFus
php
<?php
$con = mysql_connect("ip_address","root","");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("test", $con);
$result = array();
$sql = mysql_query("SELECT unix_timestamp(DATETIMES), TEST FROM PR");
$result['name'] = 'TEST';
while($r = mysql_fetch_array($sql)) {
$datetime = $r[0]*1000;
$result['category'][] = $datetime;
$result['data'][] = round($r[1],2) ;
}
$json = array();
array_push($json,$result);
print json_encode($json);
?>
php return
[{"name":"CCGT","category":[1387791900000,1387792200000,1387792500000,1387792800000],"data":[8389,8478,8761,8980,9050]}]
html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'test',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'test'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Your series array (in options) has no object, so you cannot use series[0].name. Secondly your json is not used correct, but try to replace this lines:
options.xAxis.categories = json['category'];
options.series[0].name = json['name'];
options.series[0].data = json['data'];
with
options.xAxis.categories = json[0]['category'];
options.series[0] = {};
options.series[0].name = json[0]['name'];
options.series[0].data = json[0]['data'];
I want to create a custom grid on My Dashboard of User Stories under a portfolio item without child stories.
A custom grid on My Dashboard with Object: PortfolioIetm Feature and query UserStories.DirectChildrenCount = 0
it will produce this error:
Could not parse: Attribute "UserStories" on type PortfolioItems is not allowed in query expressions.
Here is a custom App SDK 2 app that builds a grid of Features with user stories where DirectChildrenCount = 0. It accesses the collection of stories on every feature
var stories = feature.getCollection('UserStories');
but populates the grid only with those stories that have no children. Here is the full App.html code that can be pasted into a custom tab:
<!DOCTYPE html>
<html>
<head>
<title>GridExample</title>
<script type="text/javascript" src="/apps/2.0rc1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});
Rally.launchApp('CustomApp', {
name:"GridExample"
//parentRepos:""
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>