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>
Related
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.
I appreciate any and all help as I am very new to JS. I am trying to make a chart with 2 lines that have independent y-axes ranges so that one line doesn't look so flat. The data is from a CSV. The graphs are here: http://achouman-com.stackstaging.com/tester2-highcharts.html
This is my code:
<!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>Stock Data - Highcharts</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="/Highstock-6.1.0/code/js/highcharts.js"></script>
<script src="/Highstock-6.1.0/code/js/modules/stock.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on DOM loaded -->
<script>
document.addEventListener('DOMContentLoaded', function () {
Highcharts.chart('container', {
chart: {
type: 'line'
},
data: {
csvURL: 'http://achouman-com.stackstaging.com/example.csv'
},
rangeSelector: {
selected: 1
},
title: {
text: 'Stock Price'
},
yAxis: {
max: 800,
title: {
text: 'Price (Dollars)'
}
}
});
});
</script>
</head>
<body>
<!-- 3. Add the container -->
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The CSV looks like this. It's example data. The real data is millions of rows, so I can't hardcode the data in the code.
Index (xaxis),Dollars,Algorithm out
1,3,300
2,4.3,257
3,2.1,357
4,4.8,368
5,3.4,469
6,2.3,464
7,3.2,358
8,2.5,357
9,2.4,678
10,2.8,457
11,3.7,468
12,3.6,236
13,3.5,347
I've checked the other similar questions, but still can't track down the source of this problem.
Here's the code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/jquery/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="resources/jquery/jquery.jqplot.css" />
</head>
<body>
<div id="chart2" style="height:300px;width:500px; "></div>
</body>
<script type='text/javascript'>
$(document).ready(function() {
var line1 = [['Nissan', 4],['Porche', 6],['Acura', 2],['Aston Martin', 5],['Rolls Royce', 6]];
$('#chart2').jqplot([line1], {
title:'Bar Chart with Varying Colors',
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: true
}
},
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
</html>
The problem is, nothing displays other than the chart canvas. There are no errors logged in the console, and the source files were loaded. I moved the call the .jqplot to below the chart2 div because a user believed this was necessary, though I don't believe that to be the case since we're using $(document).ready(function()...
Any idea where the problem lies?
Resolved.
Needed to include the additional renderers which had been specified in the call the .jqplot.
<script type="text/javascript" src="resources/jquery/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="resources/jquery/plugins/jqplot.categoryAxisRenderer.js"></script>
Please advise me why I can't create this example in my home html file?
Here is an example from the site and my html file:
<head>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<script>
g = new Dygraph(document.getElementById("graph"),
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"8,14,3\n",
{
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template'
});
</script>
<style>
.dygraph-title {
color: gray;
}
</style>
</head>
<body>
<div id="graph"></div>
</body>
what am I doing wrong?
javascript script must be after div or you need to use document ready to load body first and then script
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://dygraphs.com/dygraph-dev.js"></script>
<style>
.dygraph-title {
color: gray;
}
</style>
</head>
<body>
<div id="graph"></div>
<script>
g = new Dygraph(document.getElementById("graph"),
"X,Y,Z\n" +
"1,0,3\n" +
"2,2,6\n" +
"8,14,3\n",
{
legend: 'always',
animatedZooms: true,
title: 'dygraphs chart template'
});
</script>
</body>
</html>
Because your getElementById call will return null because the element doesn't exist yet when you run the Javascript code.
Put the code in the load event so that it runs after the page has been parsed:
window.onload = function(){
g = new Dygraph(document.getElementById("graph"),
...
};
One main issue is that your code is running too early. You are trying to operate on DOM elements before they have even been loaded. Code running in the <head> section cannot yet access elements in the DOM because it has not yet been loaded.
You can move your second <script> tag to right before the </body> tag and that problem should go away.
I am trying to render the Y-axis label rotated 90 degree. Quoting the jqplot example
By including the "jqplot.canvasTextRenderer.min.js" and "jqplot.canvasAxisLabelRenderer.min.js" plugins, you can render label text directly onto canvas elements.
Here is the error i get from Firebug
TypeError: a.jqplot.CanvasFontRenderer is not a constructor
Here is my whole code
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />
<!--Jquery Base Library 2.0.3 -->
<script src="jquery-2.0.3.min.js"></script>
<!-- jqPlot Libraro -->
<script src="jquery.jqplot.min.js"></script>
<!-- More jqplot file -->
<script src="jqplot.canvasTextRenderer.min.js"></script>
<script src="jqplot.canvasAxisLabelRenderer.min.js"></script>
<!-- example jqplot file -->
<script src="test.js"></script>
</head>
<body style="margin:0px; padding-left:50px; padding-right:50px;" >
<div style="padding-left: 20px; padding-right:20px; background-color:#FF7519;">
<div id="chart" style="height:300px;width:800px; "></div>
</div>
</body>
</html>
here is test.js
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var cosPoints = [];
for (var i=0; i<2*Math.PI; i+=0.1){
cosPoints.push([i, Math.cos(i)]);
}
var plot1 = $.jqplot('chart', [cosPoints], {
series:[{showMarker:false}],
axes:{
xaxis:{
label:'Some X Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
yaxis:{
label:'Some Y Label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
}
});
});
I am clueless, I don't understand what I am doing wrong since I am following the basic tutorial of this API. Thank you for your time
match your text renderer file with the file from this link: jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.js
I think this is the correct file and it has the jqplot.CanvasFontRenderer inside it. Maybe your file doesn't have that