Javascript Chart Draw

Javascript Chart Draw - javascript

I am using Google Charts API to integrate into a group project. The project is a visualisation toolkit for social media trends and such.
The problem is though, I have written a PHP program that visualises pie/bar/line charts etc. But I am only able to get them to work by declaring:
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
to visualise the individual charts. However I wish to create individual files for the visualisations. i.e. drawPie, drawLine, drawBar etc. This is so it would be able to work with a rule based data type tool we have created i.e. percentage and location could be drawn onto a pie chart.
Anyway I am having trouble with each individual file. Below is the code for the drawPie.js file:
<html>
<head>
<!-- Load JSAPI -->
<script type="text/javascript" src='https://www.google.com/jsapi?autoload={"modules":[{"name":"visualization","version":"1","packages":["corechart","table"]}]}'></script>
<script type="text/javascript">
//<!-- Load the API Package -->
google.load('visualization', '1.0', {'packages':['controls']});
//<!-- Callback when the Google Visualization API is Loaded -->
google.setOnLoadCallback(drawDashboard);
function drawPie() {
//<!-- Create the Table -->
var data = new google.visualization.DataTable();
data.addColumn('string', 'location');
data.addColumn('number', 'crimes');
data.addRows([ <?php echo $data_for_chart; ?> ]);
//<!-- Pass Options -->
var options = {
'legend': 'left',
'title': 'Crimes (per day)',
'is3D': 'True',
'width':700,
'height':300
};
//<!-- Instantiate and Draw Chart -->
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
</script>
</head>
<body>
<style> pie_chart {margin: 0 auto; }</style>
<div id="pie_chart"></div>
<style>
#left { margin-left: 15%; float: left; }
#right { margin-right: 15%; float: right; }
img { width: 200; height: 200;}
</style>
</body>
The code doesn't show the chart. Does anyone know what I'm doing wrong?
Thanks in advance.

You are loading the wrong package.
Change google.load('visualization', '1.0', {'packages':['controls']}); to google.load('visualization', '1.0', {'packages':['corechart']}); and it should work. If it doesn't, you have another problem beyond this (relatively simple) one.

Related

How add Html code with script in Indesign?

I managed to add this working code in indesign :
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable
([['X', '1'],
['Bien', 900000],
['Honoraires notariés', 67500],
['Travaux', 300000],
['Mobilier', 67500],
['Honoraires Hikin\'Vest', 100500]
]);
var options = {
is3D: true,
colors: ['#4c96d7', '#cf1717', '#168200', '#f7e031', '#c49a6c'],
chartArea: {width: '86%', height: '86%', left:'40', bottom:'04'},
legend: {position: 'in'},
slices: { 4: {offset: 0.2},
1: {offset: 0.2},
2: {offset: 0.2},
3: {offset: 0.2},
theme: 'maximized',
},
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="piechart_3d" style="width: 350px; height: 350px;"></div>
</body>
</html>
But this one doesn't work, can you help me ?
This code was generated on https://www.publicalbum.org/blog/embedding-google-photos-albums.
If it's not possible can you tell me how embed a slideshow with google Drive or Google photos in InDesign.
I use "Publish Online" in InDesign.
Thank you very much.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/publicalbum#latest/embed-ui.min.js" async></script>
</head>
<body>
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="https://photos.google.com/share/AF1QipM8qglM9SYDwhbTlTsBwzMFNnUy3ae_MhZ6G0MrT2R3M208j2EeB6EOiSj7Q6BUgg?key=aGZmTThnOHZIS0NzSlZaaWwtZEtJZkRnUjlXVjBn"
data-title="Bondy"
data-description="8 new photos added to shared album"
data-background-color="#ffffff">
<object data="https://lh3.googleusercontent.com/lpIrmwAAeI-p6U3aI4dsEfGTBAGIFueRj5B-s-5MiDT85gHXGYYgEh-JDDs2Ctdor2wj-JHJYmTbhBT9sqDlcfOwOseTPFrVsZWqdWqMss7ddUhAzFfeytr0M12MUX9GPGK9bekgiA=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/6kQS6AXg7Lu0u1GgfcZU7WwAhVcjkctwjChyJ4QgpVRp9pssLWMGcOoXfu7iaEr32P6GhS1ePayrHJeJEPcZTKCf_FeQMkx5j2bcBL-rT79fR1HOff8RmuV1vF-e-3mkdWyDu8mnpQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/OVm-Eja_ulFg2RW-JjDmhmOZH7qx343wTfqP4WAHyLSvgJsGhtSBW1Og8VG7pFa-WPDqvW1xKKb4PHK_WoPpXq9MhNTtzT2ITH7oe0mkRMO3C6zHjRbedZNY2w8VpAZUVeuEG47qqA=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/HO9K0UCj1VUhDe9bJEomkVt6So2rKnwT_V6Il9Nx734bONRRi1QU34aCxPM-SJPXi3Lfp_K5zQcu5CcHFws4bwq6yQKvROEO7KISdewHfYBvud-GY22tm4kC3yGmxbC21l0nIr4O_g=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/nayFhxGXP6pCAstQlKYGbd662JjpBoeA15xyF5rVoXhefkeuYeAQrB-Pq0AkPBbiFOgdeGcbCOSdeV2RCe-tQrA5ufJ1muw5oHUr01CtCRNx-9B5tI_h1lzUkC0z3tWOrfMQvp4SqA=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/dmQ4e_p0Z5kDRNw5R2RuH1XMQDPuEaUThXGp3rPiroV6nYwhIktZe5Zlc1olbZywP0YLJBDZJSoyL76zNTbGJIvpXyUE4GFhanvAP_MCrL_ZLv9ayNX47yYba4iPlK_glqkui_KGVw=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/LVHXYLdL3kcDIT8TBIC7jfwsKCZKVYpdAaa49PhTG8wgziuC36N1OoFaQEC_R4GHZp-YJ-VO8fLU5P6zarsatwbikOVrqlqxDMKh6y-_2-rlIzGpb6bxbm4LFUDS3pUJKPKG-TVVWw=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/2Um38iEfoYKBoe6l4_YDiYNNsnnz_4sBm4FF-ogxveFxNJOkMIA-7kcHk8c5WA3-9yUc3670lh_v2ZoFBkh84r4_nitdyg9kJ3tuUUJ1hdFk8D5cvLBBdHcX2jIa-ia_rAjLr-Y3ug=w1920-h1080"></object>
</div>
</body>
</html>

I may be wrong, but it looks for me as the task that can not be accomplished this way at all. I think you have to download all these photos on your HDD first. Then you can place them in your InDesign document (manually of via some script). This online generated HTML code has nothing to do with InDesign and its ExtedScript.
InDesing has a tool to publish documents online, but all these documents (and all linked images) should be stored locally first. As far as I know.

How do I set up this jquery-based US map using jquery?

I am trying to incorporate the clickable jquery United States map from this site https://newsignature.github.io/us-map/ into a page I'm building in Sharepoint. I'm using a content editor web part, and embedding this code into it, but the map isn't showing up. As you can see from my code below, I have linked the javascript files that were included in the us-map-1.0.1.zip file that I downloaded from the site. I also uploaded the 2 svg maps from that zip package to the folder of the page I'm working on. I'm not sure how I am supposed to connect to those svg files, and how I can get this map to display. Is there anything I should do to modify this code?
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <!--this version works with IE-->
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/raphael.js"></script>
<script type="text/javascript" src="https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/color.jquery.js"></script>
<script>
$(document).ready(function() {
$('#map').usmap({
// The click action
click: function(event, data) {
$('#clicked-state')
.text('You clicked: '+data.name)
.parent().effect('highlight', {color: '#C7F464'}, 2000);
}
});
});
</script>
<style>
$('#map').usmap({
stateStyles: {fill: 'blue'}
});
</style>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>

OK, let´s start.
First of all, it seems that your links are outdated or broken.
https://epwork.ep.corp/wg/ProdPayroll/SiteAssets/jquery.usmap.js
is not working.
The files must be reachable.
Next point s that you are using javascript inside of style tags.
That won't work.
After your links are fixed, try it like this:
$(document).ready(function() {
/** FIRST YOU HAVE TO INITIALIZE THE MAP **/
$('#map').usmap({
stateStyles: {fill: 'blue'},
'click': function(event, data) {
$('#clicked-state').text('You clicked:'+data.name );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.0.0/raphael-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-color/2.1.2/jquery.color.min.js"></script>
<script src="https://cdn.rawgit.com/NewSignature/us-map/0677afad/jquery.usmap.js"></script>
<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>

DIV to onclick event

How can I make the second DIV into an on click event? I have both of them displaying right now. I want to display one then when you click it displays the second one and back and forth.
I have never used HTML or JavaScript before so bear with me.
<html>
<head>
<DIV class="container"><HGROUP>
<H1>University of Illinois Hospital and Health Sciences</H1>
<H2>Storage Availability Charts and Graphs</H2></HGROUP><NAV
class="navbar"></div>
<DIV class="container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Storage', 'Terabytes'],
['Raw', 95],
['Usable', 34],
]);
var options = {
legend: 'none',
pieSliceText: 'label',
title: 'EEI VNX5700',
pieStartAngle: 100,
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
}
</script>
</div>
<DIV class="container">
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Unallocated', 'Used', 'Free'],
['Cerner fast pool', 1000, 400],
['General fast pool', 1170, 460],
['Raid', 970, 644]
]);
var options = {
title: 'Unallocated',
vAxis: {title: 'Pools', titleTextStyle: {color: 'red'}}
};
var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</div>
<body>
<div id="piechart" style="width: 700px; height: 400px;"></div>
</body>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</head>
</html>

If you want them to switch visibilities you should give them each a seperate id.
Then you will need to use javascript (jquery is an easy way to work with javascript)
The jquery code would look something like this
$('#div1').click(function(){
$('#div2').show();
$('#div1').hide();
});
$('#div2').click(function(){
$('#div1').show();
$('#div2').hide();
});
To use jquery get the library here: http://jquery.com/
If you don't want to use jquery here are simple show/hide functions:
<script>
function show(id) {
if(document.getElementById(id).style.display=='none') {
document.getElementById(id).style.display='block';
}
return false;
}
function hide(id) {
if(document.getElementById(id).style.display=='block') {
document.getElementById(id).style.display='none';
}
return false;
}
</script>
then just add those to your div onclick: <div id='div1' onclick='show("div2");hide("div1")'></div>

Ok if you want a div to be hidden when the page loads you can do (in jquery) $('#idOfDiv').hide() then to get the div to toggle you can do a $('#idOfDiv').toggle() Now if you want something to be an onClick even all you have to do is put it all in a
$("#secondDiv").hide();
$( "#firstDiv" ).click(function() {
$('#secondDiv').toggle();
});
$( "#secondDiv" ).click(function() {
$('#firstDiv').toggle();
});
example: http://jsfiddle.net/AFPT2/1/

Dygraph - window size and lin/log option

I am trying to make my Dygraphs graph resizable, and to add to the page a button where one can choose if the graph has to be linear or logarithmic. The examples are both described in the Dygraphs documentation page (respectively here and here), but I don't know how to implement the changes in my html code. Do you know how could I do it? Javascript illiterate here.
<html>
<head>
<script type="text/javascript"
src="dygraph-combined.js"></script>
</head>
<body>
<div id="graphdiv"
style="width:1000px; height:600px;"></div><br>
<script type="text/javascript">
g2 = new Dygraph(
document.getElementById("graphdiv"),
"combined_file.csv", // path to CSV file
{ title: 'Title',
xlabel: 'Time',
ylabel: 'Space',
legend: 'always',
labelsDivStyles: {'textAlign': 'right'},
});
</script>
</body>
</html>

google pie chart not showing up on a modal popup

I am trying to Display a google chart on a Modal Popup. It works just fine on a normal page, But it does not appear on the Modal.
This is the code I am using. I am not sure what is going wrong.
this is the HTML and JS code that lives on a url, /polls/
<!--Div that will hold the pie chart-->
<h3 style="text-align:center;">Test</h3>
<hr>
<div id="chart_div" style="height: 500px;">
</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Options', 'Votes'],
['1', 11],
['2', 2],
['3', 2],
['4', 2],
['5', 7],
['6', 21],
]);
// Set chart options
var options = {
'backgroundColor': 'transparent',
'is3D': 'True',
'legend':'bottom',
'width':'100%',
'height':'100%',
chartArea:{left:0,top:0,width:"100%",height:"80%"}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
This is the html button that lives on page /home/
<a class="open-newmodal" href="/poll/">show poll</a>
So the idea is, that using a modal and jquery's .load() function, I should be able to load the chart that lives on /poll/ page to my /home/ page in the modal that I made.
This is the modal I am using
Modal Css
.newmodal-container {
display: none;
overflow-y: scroll;
position: fixed;
top: 0; right: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.3);
}
.newmodal {
min-height: 100%;
height: auto;
width: 60%;
margin: 0px auto;
background-color: white;
padding: 20px;
border:1px solid #D3D3D3;
box-shadow: 0px 0px 5px #D3D3D3;
}
.dp-none {
display: none !important;
}
.dp-block {
display: block !important;
}
Modal JS
// New Modal
var body = $('body'),
main = $('.main'),
open_modal = $('.open-newmodal'),
close_modal = $('.close-newmodal'),
modal_container = $('.newmodal-container');
open_modal.live('click', function(event){
event.preventDefault();
body.addClass('body-locked');
modal_container.addClass('dp-block');
var href = $(this).attr('href');
modal = $('.data-load');
modal.load(href);
modal.attr("title",href);
});
close_modal.live('click', function(event){
event.preventDefault();
body.removeClass('body-locked');
modal_container.removeClass('dp-block');
modal.empty();
});
$(document).keyup(function(e) {
if (e.keyCode == 27){
event.preventDefault();
body.removeClass('body-locked');
modal_container.removeClass('dp-block');
modal.empty();
}
});

Okay, seeing as how you want to load another page as a modal graph, I have the following solution.
Initialize your google lib on the parent page as in http://jsbin.com/abucet/3, then make sure your child page doesn't re-initialize or re-include the libs that are loaded in the parent page, see child # http://jsbin.com/ajerol/5/edit
So basically the child page # http://jsbin.com/ajerol/5
Parent Page accessing child # http://jsbin.com/abucet/3
Parent Page
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='headerDiv' style='background-color:#FF0000'>
Test Load
</div>
<div id='modalDiv' style='background-color:#FFAA00'>
Close this and click the button to load
Graph will be in a modal JQuery Dialog. Some of the google visualization initialization will be done in this page, not the page we're loading.
</div>
<button id='getIt'>Get the Graph</button>
</body>
</html>
Javascript
$('#getIt').click( function() {
$.get( "http://jsbin.com/ajerol/4",
function(data) {
var newGraph= "<div id='graphModal'>"+data+"</div>";
//clean up html
newGraph.replace('<body>','');
newGraph.replace('</body>','');
// we have the libs on this page, no need for that other cruft
newGraph.replace('<head.*head>','');
// debug:
//alert(newGraph);
// append to the current modal
$('body').append(newGraph);
// the graph page in modal
$('#graphModal').dialog({modal:true,width:300});
$('#getIt').parent().append('<button onclick="$(\'#graphModal\'\).dialog(\);">showGraph</button>');
}
);
});
// initial note
$('#modalDiv').dialog({modal:true});
// load this on the parent page, not the one we're calling
google.load("visualization", "1", {packages:["corechart"]});
Child Page
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="modal_chart" class="modal">
<!--Div that will hold the pie chart-->
<div id="chart_div" style="height: 300px; width: 300px;">
</div>
</div>
Child Javascript (on load)
drawChart();

Here's some code that might explain a little of what I meant from my comments.
Basically when the button is clicked to show the chart, that's when you'll do the loading for the pie chart.
Hope this puts you on the right track.
<button onclick="displayModal">Show Chart <\button>
<div id="modal_chart" class="modal">
<!--Div that will hold the pie chart-->
<h3 style="text-align:center;">Test</h3>
<hr>
<div id="chart_div" style="height: 500px;">
</div>
</div>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function displayModal() {
$("#modal_chart").fadeIn(fast, function() {
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
});
}
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Options', 'Votes'],
['1', 11],
['2', 2],
['3', 2],
['4', 2],
['5', 7],
['6', 21],
]);
// Set chart options
var options = {
'backgroundColor': 'transparent',
'is3D': 'True',
'legend':'bottom',
'width':'100%',
'height':'100%',
chartArea:{left:0,top:0,width:"100%",height:"80%"}
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

I don't think there should be any explicit issues with loading the chart and then applying the modal code. Here's an example using some of the CSS you mentioned and JQueryUI alternatives http://jsbin.com/ajerol/3 (you can also actively edit the code here http://jsbin.com/ajerol/3/edit ).
<!DOCTYPE html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities'
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function displayModal() {
$("#modal_chart").show();
}
function hideModal() {
$("#modal_chart").hide();
}
function makeModal() {
$("#modal_chart").addClass('newmodal-container');
modal_container = $('.newmodal-container');
$("#modal_chart").show();
}
function jqueryModal() {
$("#modal_chart").dialog({ modal: true });
}
</script>
</head>
<body>
<button onclick="displayModal()">Show Chart </button>
<button onclick="hideModal()">Hide Chart </button>
<button onclick="makeModal()">Attach modal CSS </button>
<button onclick="jqueryModal()">jQuery modal </button>
<div id="modal_chart" class="modal">
<!--Div that will hold the pie chart-->
<h3 style="text-align:center;">Test</h3>
<hr>
<div id="chart_div" style="height: 300px; width: 300px;">
</div>
</div>
</body>
One question about your code, are you calling the following code prior to the html loading?
open_modal = $('.open-newmodal'),
close_modal = $('.close-newmodal'),
modal_container = $('.newmodal-container');

You can use google charts from remote url with modal like this:
On remote url you need to load google link in this way :
enter code here
$.getScript(
"https://www.google.com/jsapi",
function() {
google.load('visualization', '1', {'packages':['corechart'],"callback": drawChart});
});
Worked for me.

We Keep Coding

JavaScript is the programming language of the Web.

Javascript Chart Draw - javascript

You are loading the wrong package. Change google.load('visualization', '1.0', {'packages':['controls']}); to google.load('visualization', '1.0', {'packages':['corechart']}); and it should work. If it doesn't, you have another problem beyond this (relatively simple) one.

Related

How add Html code with script in Indesign?

How do I set up this jquery-based US map using jquery?

DIV to onclick event

Dygraph - window size and lin/log option

google pie chart not showing up on a modal popup

Categories

Resources