<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script language="javascript" type="text/javascript" src="http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script type="text/javascript">
function drawChart() {
var s1 = [2, 6, 7];
var s2 = [7, 5, 3];
var s3 = [2, 3, 5];
var s4 = [1, 7, 2];
// chart data
var dataArray = [s1, s2, s3, s4];
// x-axis ticks
var ticks = ['Jan', 'Feb', 'Mar'];
// chart rendering options
var options = {
seriesDefaults: {
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
};
// draw the chart
$.jqplot('chartDivId', dataArray, options);
}
</script>
</head>
<body onload='drawChart()'>
<div id="chartDivId" style="margin-top:20px; margin-left:20px; width:400px; height:300px;"></div>
</tr>
</body>
</html>
This is the jsfiddle(http://jsfiddle.net/JWhmQ/2023/) for the above program which is running successfully.
But it is not displaying any js plot while running on eclipse.
Even if i included the js files still its not showing any plot
Kindly give me some solution..
Include Jquery 1.7 file to the page
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
Related
I have tried to make a table by using datatables with an array, but somehow it doesn't show the table on my html file.
The array is defined in my gs file as you can see in the code below.
It's a simple work but I'm still not sure what it went wrong.
var ssId = 'xxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();//array of 850rows×15cols
valuesFromIndexPage.shift();
function getData() {
$(document).ready(function(){
$("#foo-table").DataTable({
data: valuesFromIndexPage
});
});
}
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>
#ZektorH Here's the console log of running my code.
userCodeAppPanel:9 Uncaught TypeError: Cannot read property 'slice' of null
at initializeTable (userCodeAppPanel:9)
at af (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:67)
at 4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:10
at ng.J (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:94)
at Hd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:42)
at Dd (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:43)
at Bd.b (4105580746-mae_html_user_bin_i18n_mae_html_user__ja.js:39)
I looked again at my data and I found out the data became null on console.log(but it has data when I see it on Logger.log).
I'm posting what I did and got below.
function getData() {
Logger.log(valuesFromIndexPage); //the array is in valuesFromIndexPage
return valuesFromIndexPage;
}
function initializeTable(data) {
console.log(data); //it returns null here...
var aDataSet = data.slice(1);
The log from Logger.log
[19-10-31 09:47:00:116 JST] [[ID, 案件名, .......
#ZektorH These're the whole codes without data.
code.gs
var ssId = 'xxxxxxxxxxxxxxxxxxxxxxxxx';
var ss = SpreadsheetApp.openById(ssId);
var indexPage_sheetName = 'xxxxxxxxxxxxxx';
var valuesFromIndexPage = ss.getSheetByName(indexPage_sheetName).getDataRange().getValues();
function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('index').setTitle('My custom sidebar').setWidth(300))
}
function getData() {
return valuesFromIndexPage;
}
function doGet(e) {
return HtmlService.createTemplateFromFile('index').evaluate().setTitle('title');
}
index.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
console.log("ready!");
google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
});
function initializeTable(data) {
console.log(data)
var aDataSet = data.slice(1); // all except header
var head = []; // headers
data[0].forEach(function(e) {
head.push({
'sTitle': e
});
});
$('#foo-table').dataTable({
"aaData": aDataSet,
"aoColumns": head
});
}
</script>
</head>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</html>
Chage with columns of of key in dataTable for table headers and chage $("#foo-table").DataTable at $("#foo-table").dataTable
var valuesFromIndexPage=[{"free-text-c1":"free-text-r1","c2":"r1","c3":"r1","c4":"r1","c5":"r1","c6":"r1","c7":"r1","c8":"r1","c9":"free-text-r1","c10":"free-text-r1"},{"free-text-c1":"free-text-r2","c2":"r2","c3":"r2","c4":"r2","c5":"r2","c6":"r2","c7":"r2","c8":"r2","c9":"free-text-r2","c10":"free-text-r2"}];
valuesFromIndexPage.shift();
function getData() {
$(document).ready(function(){
$("#foo-table").dataTable({
destroy: true,
scrollX: true,
data: valuesFromIndexPage,
columns: _.keys(valuesFromIndexPage[0]).map((key) => { return { "title": key, "data": key } })
});
});
}
getData()
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css"/>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</head>
</html>
Assuming you are using it on a sidebar, I was able to get it to work like this:
Apps Script
function createSidebar() {
SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile('sidebar').setTitle('My custom sidebar').setWidth(300))
}
function getData() {
return SpreadsheetApp.getActiveSheet().getDataRange().getValues();
}
HTML Page
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
console.log("ready!");
google.script.run.withSuccessHandler(initializeTable).getData(); //calls the getData funciton from Apps Script and returns the results to the initializeTable function
});
function initializeTable(data) {
var aDataSet = data.slice(1); // all except header
var head = []; // headers
data[0].forEach(function(e) {
head.push({
'sTitle': e
});
});
$('#foo-table').dataTable({
"aaData": aDataSet,
"aoColumns": head
});
}
</script>
</head>
<body>
<table id="foo-table" class="display" width="100%"></table>
</body>
</html>
Hope this helps!
I have a non-AngularJS based page - basic.html which works fine as expected.
basic.html
<!doctype html>
<html>
<head>
</head>
<body>
<div class="tab-container" >
<div id="piechart" style="width:1000px;height:470px;"></div>
</div>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Device', 'Hits (in millions)'],
['A', 89],
['B', 13],
['C', 21],
]);
var options = { title: '' };
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</body>
</html>
Then I tried to reorganize the code (a bit naively) to put into AngularJS framework as follows:
basic.html
<!doctype html>
<html ng-app = "Analytics-App" ng-controller="MainController">
<head>
</head>
<body>
<div class="tab-container" >
<div id="piechart" style="width:1000px;height:470px;"></div>
</div>
<script src="scripts/angular.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="scripts/base.js"></script>
</body>
</html>
base.js
var myApp = angular.module('Analytics-App', []);
myApp.controller('MainController', function($scope, $interval) {
var e = document.createElement("script");
e.src = "https://www.google.com/jsapi";
e.type="text/javascript";
document.getElementsByTagName("head")[0].appendChild(e);
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Device', 'Hits (in millions)'],
['A', 89],
['B', 13],
['C', 21],
]);
var options = {
title: ''
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
});
Apparently, when loaded, the page DOM changes completely (when viewed using chrome debugger) as:
<html><head><script src="https://www.google.com/uds/?file=visualization&v=1&packages=corechart" type="text/javascript"></script><link href="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/ui+en.css" type="text/css" rel="stylesheet"><script src="https://www.google.com/uds/api/visualization/1.0/d90be93871e947a274f6a5157bd75fb0/format+en,default+en,ui+en,corechart+en.I.js" type="text/javascript"></script></head></html>
I am trying to understand why controller script failed to add elements into page DOM and why rest of the page elements are removed.
Please use this following.
google.setOnLoadCallback(function () {
angular.bootstrap(document.body, ['Analytics-App']);
});
google.load('visualization', '1', {packages: ['corechart']});
var googleChart = googleChart || angular.module("google-chart",[]);
var myApp = myApp || angular.module("Analytics-App",["google-chart"]);
googleChart.directive("googleChart",function(){
return{
restrict : "A",
link: function($scope, $elem, $attr){
var dt = $scope[$attr.ngModel].dataTable;
var options = {};
if($scope[$attr.ngModel].title)
options.title = $scope[$attr.ngModel].title;
var googleChart = new google.visualization[$attr.googleChart]($elem[0]);
googleChart.draw(dt,options)
}
}
});
myApp.controller("IndexCtrl",function($scope){
$scope.data1 = {};
$scope.data1.dataTable = new google.visualization.DataTable();
$scope.data1.dataTable.addColumn("string","Name")
$scope.data1.dataTable.addColumn("number","Qty")
$scope.data1.dataTable.addRow(["Test",89]);
$scope.data1.dataTable.addRow(["Test2",13]);
$scope.data1.dataTable.addRow(["Test3",21]);
$scope.data1.title="My Pie"
});
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script.js"></script>
<style type="text/css">
.bigGraph {width:500px;height:500px;float:left;}
.mediumGraph {width:400px;height:400px;float:left;}
.smallGraph {width:200px;height:200px;float:left;}
</style>
</head>
<body ng-controller="IndexCtrl">
<div google-chart="PieChart" ng-model="data1" class="bigGraph"></div>
</body>
</html>
Plunker URL http://plnkr.co/edit/5guBqC0upuCVgBtY6076?p=preview
Further help http://gavindraper.com/2013/07/30/google-charts-in-angularjs/
and http://jrrera.github.io/angularjs/2014/04/05/a-better-way-to-integrate-angularjs-and-google-charts/
I am trying to implement JQPLOT Bar chart but it's displaying only few bars ( two bars against tick 'e' with combo value '2 null 2') . Below is my code. Could you please suggest whats wrong here. I have added alert statement to display values in array and result is mentioned as comment:
<%# page language="java" contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
<!--[if lt IE 9]><script type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
<script type="text/javascript" src="js/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="js/jqplot.json2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var DelayFeed = [[]];
var DelayConfirmation = [[]];
var CorruptFeed = [[]];
var FeedName = [[]];
var feedData = $.ajax({
url: "FeedServlet",
dataType : 'json',
async: false
}).responseText;
var arrayData = JSON.parse(feedData);
for (var i = 0; i < arrayData.length; i++) {
DelayFeed[0].push([ arrayData[i].DelayFeed ]);
DelayConfirmation[0].push([ arrayData[i].DelayConfirmation ]);
CorruptFeed[0].push([ arrayData[i].CorruptFeed ]);
FeedName[0].push([ arrayData[i].FeedName ]);
}
alert(DelayFeed[0]); //8,7,4,3,3
alert(DelayConfirmation[0]); //4,4,4,2,2
alert(CorruptFeed[0]); //4,4,4,2,2
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
, { seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'vertical'
},
pointLabels: { show:true }
},
series:[
{label:'Delay - Confirmation'},
{label:'Delay - Feed'},
{label:'Corrupt Feed'}
],
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['a', 'b', 'c', 'd', 'e'];
},
}
});
});
</script>
</head>
<body>
<div class="work-area">
<div id="chart_div" style="width: 800px; height: 400px;"></div>
</div>
</body>
</html>
At a first look, it seems a problem with the format of data passed within $.jqplot() function.
In fact if you replace the three data arguments with these:
var DelayFeed = [8,7,4,3,3];
var DelayConfirmation = [4,4,4,2,2];
var CorruptFeed = [4,4,4,2,2];
$.jqplot('chart_div', [ DelayConfirmation, DelayFeed, CorruptFeed ]
you obtain the following (and correct) barchart
You need to use three simple arrays ( "[ ]" ) and not embedded arrays ( "[[ ]]" ).
Thus, i would try to use
$.jqplot('chart_div', [ DelayConfirmation[0], DelayFeed[0], CorruptFeed[0] ]
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()
I have been trying to create a pie chart using an array that extracts
data from an xml file.
It does display the pie chart but the size of the sectors do not
correspond to the values in the array. Surprisingly, the code works if
I use a static array.
This is the xml file:
<?xml version="1.0" ?>
<A>
<a1>a1</a1>
<a2>a2</a2>
<C>20</C>
<C>30</C>
<C>50</C>
<C>60</C>
<C>70</C>
</A>
This is the javascript file(I have written only the main code):
var x=xmlDoc.getElementsByTagName("A");
var myvalues=new Array();
var staticarray = {5,5,5};
for (i=0;i<x.length;i++)
{
myvalues[i]=x[i].getElementsByTagName("C")[0].childNodes[0].nodeValue;
}
$(document).ready(function(){
$.jqplot.config.enablePlugins=true;
plot1 = $.jqplot('chart1', [myvalues]); // Doesn't work
plot2 = $.jqplot('chart2', [staticarray]); // Works
Use parseInt() to convert the node value to an integer.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="js/plugins/jqplot.pieRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
</head>
<body>
<div class="jqPlot" id="chart1" style="height: 480px; width: 90%;"></div>
<script type="text/javascript">
$.jqplot.config.enablePlugins = true;
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
var x=xmlDoc.getElementsByTagName("C");
var myvalues=new Array();
for (i=0;i<x.length;i++) {
myvalues[i]=parseInt(x[i].childNodes[0].nodeValue);
}
$(document).ready(function(){
$.jqplot.config.enablePlugins=true;
plot1 = $.jqplot('chart1', [myvalues], {
seriesDefaults:{renderer:$.jqplot.PieRenderer}
});
});
</script>
</body>
</html>