I'm new in Dart language but I still working on ! I got this problem, I want to calculate the table of multiplication of : 14.
So basicly, i want to get this results:
14,28,42,56,70,84,98,112,126, etc etc to 1400
My function work, when I print my result. But I can't paste the results in a div.
There is my .dart :
main() {
var numero2 = 14;
var multiplication = 0;
var element02 = query('#exercice02');
for (var i = 1; i < 101; i++) {
multiplication = numero2 * i;
print(multiplication);
}
//element02.text = multiplication;
}
And in my html i got :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<link rel="stylesheet" href="HelloWorld.css">
</head>
<body>
<div id="container">
<p class="question">Exercice 02 : 100 x 14 : <span id="exercice02"></span></p>
</div>
<script type="application/dart" src="web/HelloWorld.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Actually, I dont know how to concatane the results, I try as you can see the : element02.text = multiplication; in FOR, but it destroy it, and then I try the += and they are multiplicating together and I only have 1 result at the end.
Some one can help me ?
How do you want the results to be displayed? Like: 14, 28, 42?
test.dart
import 'dart:html';
void main() {
var results = [];
for (var i = 14; i <= 1400; i += 14) {
results.add(i.toString());
}
var element = query('#container');
element.text = Strings.join(results, ', ');
}
test.html
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script type="application/dart" src="test.dart"></script>
<script src="https://dart.googlecode.com/svn/branches/bleeding_edge/dart/client/dart.js"></script>
</body>
</html>
Output:
14, 28, 42, 56, 70, 84, 98, 112, 126, 140, 154, 168, 182, 196, 210,
224, 238, 252, 266, 280, 294, 308, 322, 336, 350, 364, 378, 392, 406,
420, 434, 448, 462, 476, 490, 504, 518, 532, 546, 560, 574, 588, 602,
616, 630, 644, 658, 672, 686, 700, 714, 728, 742, 756, 770, 784, 798,
812, 826, 840, 854, 868, 882, 896, 910, 924, 938, 952, 966, 980, 994,
1008, 1022, 1036, 1050, 1064, 1078, 1092, 1106, 1120, 1134, 1148,
1162, 1176, 1190, 1204, 1218, 1232, 1246, 1260, 1274, 1288, 1302,
1316, 1330, 1344, 1358, 1372, 1386, 1400
Related
I'm trying to add tooltips to a chart I made with Layer Cake, the graphics framework for Svelte. I looked at the Map example on the Layer Cake site, as that one has tooltips, but I can't figure out how to adapt for my bar chart.
I can't even get a string to show up, much less any data. Any help would be greatly appreciated. I think I must be missing something pretty obvious.
Below is a minimal example with dummy data.
You can see the code working in this REPL:
https://svelte.dev/repl/e8bb579754e6405ea19363b5d13d7f54?version=3.55.1
Thanks!
App.svelte:
<script>
import { LayerCake, Svg, Html } from "layercake";
import Bar from "./Bar.svelte";
import AxisX from "./AxisX.svelte";
import AxisY from "./AxisY.svelte";
import Tooltip from "./Tooltip.html.svelte";
import { scaleBand } from "d3-scale";
let data = [
{
fruit: "Apple",
number: 364,
},
{
fruit: "Banana",
number: 263,
},
{
fruit: "Mango",
number: 872,
},
{
fruit: "Pear",
number: 156,
},
]
data.forEach((d) => {
d[xKey] = +d[xKey];
});
const xKey = "number";
const yKey = "fruit";
let evt;
let hideTooltip = false;
</script>
<div class="chart-container">
<LayerCake
padding={{ top: 20, bottom: 80, left: 60, right:40 }}
x={xKey}
y={yKey}
yScale={scaleBand().paddingInner([0.15])}
xDomain={[0, null]}
data={data}
>
<Svg>
<AxisX gridlines={true} baseline={true} snapTicks={true} ticks="4" />
<AxisY gridlines={false} />
<Bar
/>
</Svg>
<Html
pointerEvents={false}
>
{#if hideTooltip !== true}
<Tooltip
{evt}
>
{#const tooltipData = {data}}
{#each Object.entries(tooltipData) as [key, value]}
{console.log('tooltipData',tooltipData)}
<div class="row">hi is this showing up?</div>
{/each}
</Tooltip>
{/if}
</Html>
</LayerCake>
</div>
<style>
.chart-container {
width: 600px;
height: 300px;
}
</style>
The other components are taken directly from the LayerCake framework.
I figured it out. Most important thing was to add a dispatch event in the Bar component, and create mouseover, movemove, focus events for the rects there.
Updated REPL: https://svelte.dev/repl/09725c92e4104d0cad53d0387a762269?version=3.55.1
App.svelte:
<script>
import { LayerCake, Svg, Html } from "layercake";
import Bar from "./Bar.svelte";
import AxisX from "./AxisX.svelte";
import AxisY from "./AxisY.svelte";
import Tooltip from "./Tooltip.html.svelte";
import { scaleBand } from "d3-scale";
let data = [
{
fruit: "Apple",
number: 364,
},
{
fruit: "Banana",
number: 263,
},
{
fruit: "Mango",
number: 872,
},
{
fruit: "Pear",
number: 156,
},
]
data.forEach((d) => {
d[xKey] = +d[xKey];
});
const xKey = "number";
const yKey = "fruit";
let evt;
let hideTooltip = false;
</script>
<div id="chart-container">
<LayerCake
padding={{ top: 20, bottom: 80, left: 60, right:40 }}
x={xKey}
y={yKey}
yScale={scaleBand().paddingInner([0.15])}
xDomain={[0, null]}
data={data}
>
<Svg>
<AxisX gridlines={true} baseline={true} snapTicks={true} ticks="4" />
<AxisY gridlines={false} />
<Bar
on:mousemove={event => evt = hideTooltip = event}
on:mouseout={() => (hideTooltip = true)}
/>
</Svg>
<Html
pointerEvents={false}
>
{#if hideTooltip !== true}
<Tooltip
{evt}
let:detail
>
{#const tooltipData = { ...detail.props }}
<div class="row">{tooltipData.fruit}: {tooltipData.number}</div>
</Tooltip>
{/if}
</Html>
</LayerCake>
</div>
<style>
#chart-container {
width: 600px;
height: 300px;
}
</style>
Bar.svelte:
<script>
import { getContext, createEventDispatcher } from "svelte";
const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
export let fill = '#ef4136';
let hideTooltip = false;
const dispatch = createEventDispatcher();
function handleMousemove(feature) {
return function handleMousemoveFn(e) {
raise(this);
// When the element gets raised, it flashes 0,0 for a second so skip that
if (e.layerX !== 0 && e.layerY !== 0) {
dispatch("mousemove", { e });
}
};
}
</script>
<g
class="bar-group"
on:mouseout={(e) => dispatch("mouseout")}
on:blur={(e) => dispatch("mouseout")}
>
{#each $data as d, i}
<rect
class='group-rect'
data-id="{i}"
x="{$xScale.range()[0]}"
y="{$yGet(d)}"
height={$yScale.bandwidth()}
width="{$xGet(d)}"
{fill}
on:mouseover={(e) => dispatch("mousemove", { e, props: d })}
on:focus={(e) => dispatch("mousemove", { e, props: d })}
on:mousemove={(e) => handleMousemove(e, d)}
></rect>
{/each}
</g>
Tooltip.html.svelte, AxisY.svelte, and AxisX.svelte stay the same as they were (as they are in Layer Cake).
No matter what I plot with Observable Plot, → appears somewhere.
Here is my code:
import http from 'http';
import * as Plot from "#observablehq/plot";
import {JSDOM} from "jsdom";
const jsdom = new JSDOM(`
<!DOCTYPE html><body>
<div class='container'><figure id='graphic'>
</figure></div></body>`);
const sales = [
{units: 10, fruit: "fig"},
{units: 20, fruit: "date"},
{units: 40, fruit: "plum"},
{units: 30, fruit: "plum"}
];
jsdom.window.document.getElementById('graphic')
.appendChild(Plot.dot(sales, {x: "units", y: "fruit"})
.plot({document: jsdom.window.document}));
http.createServer(function (req, res) {
let html = jsdom.serialize();
res.end(html);
}).listen(8080);
And here is what I get:
image 1
image 2
What's wrong?
Ok, I've found the solution. I needed to add <meta charset="utf-8"> in my jsdom definition:
const jsdom = new JSDOM(`
<!DOCTYPE html>
<head><meta charset="UTF-8"></head>
<body>
<div class='container'><figure id='graphic'>
</figure></div>
</body>`);
const handlePrint = () => {
var doc = new jsPDF('l', 'pt', 'a4');
doc
.html(document.querySelector('#content'), {
width: 1920,
height: 1280,
windowHeight: 1280,
windowWidth: 1920,
margin: [50, 0, 50, 0],
html2canvas: {scale: 0.6},
})
.then(() => {
doc.save('Calendar.pdf');
});
};
I have added this jspdf script on my website to download pdf. However I get this error.
Uncaught TypeError: Cannot read property '1' of undefined
at f.renderParagraph (jspdf.min.js:202)
at f.setBlockBoundary (jspdf.min.js:202)
at k (jspdf.min.js:202)
at k (jspdf.min.js:202)
at k (jspdf.min.js:202)
at jspdf.min.js:202
at l (jspdf.min.js:202)
at Image.i.onerror.i.onload (jspdf.min.js:202)
This happens on certain pages while others work fine.I have added the code I am using below. I am not sure if it is anything to do with my code or the jspdf.
//Code I am using:
<script type="text/javascript">
function HTMLtoPDF(){
var pdf = new jsPDF('p', 'pt', 'letter');
source = $('#HTMLtoPDF')[0];
specialElementHandlers = {
'#bypassme': function(element, renderer){
return true
}
}
margins = {
top: 50,
left: 60,
right:60,
width: 545
};
pdf.fromHTML(
source // HTML string or DOM elem ref.
, margins.left // x coord
, margins.top // y coord
, {
'width': margins.width // max width of content on PDF
, 'elementHandlers': specialElementHandlers
},
function (dispose) {
// dispose: object with X, Y of the last line add to the PDF
// this allow the insertion of new lines after html
pdf.save('Download.pdf');
}
)
}
</script>
<button type="button" onclick="HTMLtoPDF()" style=" height: 40px; width: 154px; background-color: #008800; color: #ffffff; font-size: 150%;">Download PDF </button>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"> </script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var str_pdf = $("#HTMLtoPDF").html();
var regex = /<br\s*[\/]?>/gi;
$("#HTMLtoPDF").html(str_pdf.replace(regex, '<p data-empty="true"><br></p>'));
});
function HTMLtoPDF(){
var pdf = new jsPDF('p', 'pt', 'a4');
source = $('#HTMLtoPDF')[0];
specialElementHandlers = {
'#bypassme': function (element, renderer) {
return true
}
};
margins = {
top: 30,
bottom: 30,
left: 40,
width: 522
};
pdf.fromHTML(
source,
margins.left,
margins.top, {
'width': margins.width,
'elementHandlers': specialElementHandlers
},
function (dispose) {
pdf.save('Download.pdf');
}, margins);
}
</script>
<!-- these js files are used for making PDF -->
i want to use the siFR on my website but i have one question. I have implemented sIFR and it seems to work, but when it load and renders the new headline it "pushs" my content to the bottom. i think 10px or so.
Why does this happen?
Can someone help please?
Heres my sifr-config.js
var futura = { src: 'http://www.bogazci.com/wp-content/themes/bogazci_09/sifr/flash/gppmc.swf' };
sIFR.activate(futura);
sIFR.replace(futura, {
selector: 'h1',
css: '.sIFR-root { background-color: #ffffff; color: #960000; }',
ratios: [8, 1.42, 11, 1.38, 17, 1.32, 21, 1.3, 23, 1.27, 30, 1.28, 44, 1.26, 65, 1.25, 66, 1.24, 67, 1.25, 70, 1.24, 71, 1.25, 118, 1.24, 119, 1.23, 1.24],
});
Heres the sifr.css
#media screen {
/* Example: */
.sIFR-active h1 {
visibility: hidden;
font-family: Arial;
}
}
heres my page.css
body {
font-size: 12px;
font-family: arial, helvetica, sans-serif;
background-color: #666;
}
h1 {
font-family:Arial;
font-size:18px;
/* letter-spacing:-1px; */
color:#333; /* 16216c, 333, d90000, 16216c */
font-weight:normal;
}
heres the implementation:
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/sIFR/css/sifr.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url'); ?>/sIFR/js/sifr.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/sIFR/js/sifr-debug.js" type="text/javascript"></script>
<script src="<?php bloginfo('template_url'); ?>/sIFR/js/sifr-config.js" type="text/javascript"></script>
..
..
<h1><?php the_title() ?></h1>
<script type="text/javascript">
if(typeof sIFR == "function"){
sIFR.replaceElement("h1", named({sFlashSrc: "<?php bloginfo('template_url'); ?>/sIFR/gppmc.swf", sColor: "#999999"}));
sIFR();
};
</script>
</body>
i dont know. please help.
Heres my page:
http://www.bogazci.com/index.php/services
thank you
There seems to be a lot of extra space inside the Flash movie. Use the tuneHeight and offsetTop arguments to correct for this.
Also, you should remove the config for sIFR 2 that's still included in the page.