Google Chart API JavaScript change max hAxis value using a function - javascript

I was wondering, once the chart is loaded, is there a way to change Horizontal Max Window value (date range) with a function WITHOUT having to call the drawChart function again?
For example:
function changeWindow(){
chart.setOptions(hAxis.viewWindow.max = 2);
}
Original Code:
var chart;
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
};
chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}

When you draw the chart, Google Visualization will populate three different elements in the target <div> you have. Taking the sample from Google Playground for Line Chart, this is the code that it generates:
<div style="position: relative; width: 500px; height: 400px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="500" height="400" style="overflow: hidden;">
<defs id="defs">
<clipPath id="_ABSTRACT_RENDERER_ID_0">
<rect x="96" y="77" width="309" height="247">
</clipPath>
</defs>
<rect x="0" y="0" width="500" height="400" stroke="none" stroke-width="0" fill="#ffffff">
<g>
<rect x="417" y="77" width="71" height="50" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<rect x="417" y="77" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<text text-anchor="start" x="434" y="87.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Cats</text>
</g>
<rect x="417" y="77" width="12" height="12" stroke="none" stroke-width="0" fill="#3366cc">
</g>
<g>
<rect x="417" y="96" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<text text-anchor="start" x="434" y="106.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Blanket 1</text>
</g>
<rect x="417" y="96" width="12" height="12" stroke="none" stroke-width="0" fill="#dc3912">
</g>
<g>
<rect x="417" y="115" width="71" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g>
<text text-anchor="start" x="434" y="125.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Blanket 2</text>
</g>
<rect x="417" y="115" width="12" height="12" stroke="none" stroke-width="0" fill="#ff9900">
</g>
</g>
<g>
<rect x="96" y="77" width="309" height="247" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff">
<g clip-path="url(#_ABSTRACT_RENDERER_ID_0)">
<g>
<rect x="96" y="323" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="96" y="262" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="96" y="200" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="96" y="139" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc">
<rect x="96" y="77" width="309" height="1" stroke="none" stroke-width="0" fill="#cccccc">
</g>
<g>
<rect x="96" y="323" width="309" height="1" stroke="none" stroke-width="0" fill="#333333">
</g>
<g>
</g>
<g>
<g>
</g>
<g>
</svg>
</div>
</div>
In order to change the size of the chart, you would have to adjust the two internal divs, the size of the SVG itself, and the X/Y coordinates of every single element within that chart. You can do this with Javascript, but it is going to be far easier just to call draw() again.

Related

SVG: Text show to have spacing at top and bottom

I am using a SVG to display a knock-out text template to create a rectangle that has text inside (that comes trough the mask). I want the mask text to match the given size and scale up properly, so that the text in charge does automatically is using the width and height it has for usage.
For longer paragraphs this work just fine but when the Text Content is not so long the logic scales up the text to its maximum width/height until it hits a border. See screenshot. But I do see that there is padding that I want to get rid of - how can I make the Text to fit the container fully?
To make it better visible I added a Text Element directly to the SVG so I can show the sizes of the Element. How can I get rid of this whitespace?
Example with purple boxes that show whitespace in text element
This is an example with a longer text that works as expected:
<svg id="canvas-6" width="300px" height="75px" viewBox="0 0 300 75" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-6" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
<rect id="fit-text-6" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-6)"></rect>
<mask id="knockout-text-6">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-6" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="60.785146891139px">TEST TEST</text>
</mask>
</svg>
This is an example that has the whitespace still inside its SVG canvas:
<svg id="canvas-5" width="300px" height="134px" viewBox="0 0 300 134" xmlns="http://www.w3.org/2000/svg">
<text transform="translate(0,0)" class="knockout-text-value" id="fit-hidden-5" fill="#000" x="50%" y="50%" width="100%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
<rect id="fit-text-5" class="knockout-text-bg" width="100%" height="100%" fill="red" x="0" y="0" fill-opacity="1" stroke="black" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" mask="url(#knockout-text-5)"></rect>
<mask id="knockout-text-5">
<rect width="300px" height="100%" fill="#fff" stroke="#000" stroke-opacity="1" stroke-width="1" stroke-linecap="round" stroke-dasharray="5,5" x="0" y="0"></rect>
<text transform="translate(0,0)" class="knockout-text-value" id="fit-mask-5" fill="#000" x="50%" y="50%" text-anchor="middle" dominant-baseline="central" font-family="'Lato', sans-serif" font-size="109.0909090909091px">TEST</text>
</mask>
</svg>
Try adding { display: block } on the svg.

Variable text in SVG defined text tag

I would like to re-use def-ined shapes in SVG but with variable text.
Is the following somehow possibel ?
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
<text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
</g>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#shape" text="test" />
</g>
<g transform="translate(100 0)">
<use xlink:href="#shape" text="test2" />
</g>
</svg>
EDIT: since the solution would probably involve some javascript I have added the tag.
Clone the template and adjust as necessary.
let shape = document.getElementById("shape");
Array.from(document.getElementsByTagName("use")).forEach((use) => {
let text = use.getAttribute("text");
let clone = shape.cloneNode(true);
// might want to do something more robust here
clone.children[1].textContent = text;
use.parentNode.appendChild(clone);
use.parentNode.removeChild(use);
})
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
<text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
</g>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#shape" text="test" />
</g>
<g transform="translate(100 0)">
<use xlink:href="#shape" text="test2" />
</g>
</svg>

moving child nodes to another <g> element mess up the design

I have a working static svg graph with root node and 4 child nodes. I wanted to group the child nodes separately but that way the design gets broken up. Here is the working code
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g id="root_node" transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(0, 0) rotate(-135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/>
</g>
<g id="child_node">
<rect width="180" height="60" x="0" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="0" y="200" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="200" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
<text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
<text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
<text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
</g>
<g id="edges">
</g>
</svg>
when i changed the above code to following where I wanted to group the child node in one place, i dont get the above design
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g id="root_node" transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
</g>
<g id="child_node">
<line x1="0" y1="0" x2="100" y2="0" transform="translate(0, 0) rotate(-135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 0) rotate(-45)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(0 60) rotate(135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(200 60) rotate(45)" stroke="black" stroke-width="3"/>
<rect width="180" height="60" x="0" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="0" y="200" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="200" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
<text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
<text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
<text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
</g>
</svg>
I want to know the mechanism behind this. Can anyone explain me, please? Do i have to use transformation in child_nodes group to make it work?
Moving child notes to other group in your example messes up output because you are using matrix transformation on one group and not on other - original output it therefore result of child nodes' attributes and transformation on parent node (g).
If you exported SVG from somewhere (fe. Illustrator) it will be easier if you group nodes as required in original file. Or get rid of transform and set child notes accordingly.
I guess it's easier to open SVG in illustrator, do required changes and then export it again, as I did to get the attached snippet.
Other options is to combine groups matrix transformation and line's transformation. Basically your #root_node is just translated (x: 250px, y: 100px). In your case you would just needed to translate line x += 250 & y += 100.
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g id="root_node" transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
</g>
<g id="child_node">
<rect width="180" height="60" x="0" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="0" y="200" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="200" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
<text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
<text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
<text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
<!-- option 1 -->
<!-- use transform in lines (x1, y1) and (x2, y2) -->
<line class="st3" x1="250" y1="100" x2="179.3" y2="29.3" stroke="black" stroke-width="3"/>
<line class="st3" x1="450" y1="100" x2="520.7" y2="29.3" stroke="black" stroke-width="3"/>
<line class="st3" x1="250" y1="160" x2="179.3" y2="230.7" stroke="black" stroke-width="3"/>
<line class="st3" x1="450" y1="160" x2="520.7" y2="230.7" stroke="black" stroke-width="3"/>
<!-- option 2 -->
<!-- combine group transform (translate) and line's transform -->
<line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 100) rotate(-135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 100) rotate(-45)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 160) rotate(135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 160) rotate(45)" stroke="black" stroke-width="3"/>
</g>
<g id="edges">
</g>
</svg>
<svg id="svg" width="800" height="600" viewbox="0 0 800 600" xmlns="http://www.w3.org/2000/svg">
<g id="root_node" transform="matrix(1 0 0 1 250 100)">
<rect width="200" height="60" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" text-anchor="middle" fill="white">
Root Node
</text>
</g>
<g id="child_node">
<line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 100) rotate(-135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 100) rotate(-45)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(250, 160) rotate(135)" stroke="black" stroke-width="3"/>
<line x1="0" y1="0" x2="100" y2="0" transform="translate(450, 160) rotate(45)" stroke="black" stroke-width="3"/>
<rect width="180" height="60" x="0" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="0" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="0" y="200" rx="5" ry="5">
</rect>
<rect width="180" height="60" x="500" y="200" rx="5" ry="5">
</rect>
<text x="100" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 1</text>
<text x="600" y="30" font-size="14" fill="white" text-anchor="middle">Child Node 2</text>
<text x="100" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 3</text>
<text x="600" y="230" font-size="14" fill="white" text-anchor="middle">Child Node 4</text>
</g>
</svg>

How do you center a <g> within a <svg> in D3.js?

I am trying to center a group that has a d3 tree inside of it. The svg is currently positioned perfectly across the browser and I am just trying to get the dynamically loaded tree to stay in the center of that svg element. All tree elements are within one group and have a zoom listener and have the ability to pan.
<svg width="1535" height="685" overflow-y="hidden" class="overlay">
<g transform="translate(742.5,342.5)scale(1)">
<g class="node" transform="translate(0,25)">
<circle class="nodeCircle" r="4.5" style="fill: rgb(255, 255, 255)</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
i hope you understand the concept
first you draw svg with width: 1535 and hight :685
you want to make g element on middle of it
middle of it means half of width(1535/2) and half of height (685/2)
w:767.5 h:342.5
you draw g and transform it. good point but you must set transform to right place, that means on middle of svg to 742.5 and 342.5
so that means you need transform x,y) it more (25,0)
why you set it wrong
<g class="node" transform="translate(0,25)">
it must be
<g class="node" transform="translate(25,0)">
this is little example
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.3/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg{
border-style: solid;
border-color: red;
}
}
</style>
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(70,20)scale(1)">
<g class="node" transform="translate(30,30)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<br/>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(200,50)scale(1)">
<g class="node" transform="translate(0,0)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
<svg width="200" height="100" overflow-y="hidden" class="overlay">
<g transform="translate(100,10)scale(1)">
<g class="node" transform="translate(100,40)">
<circle class="nodeCircle" r="10" style="fill: black"</circle>
<text x="10" dy=".35em" class="nodeText" text-anchor="start" style="fill-opacity: 1;"></text>
<text x="10" dy="1.5em" class="nodeText" text-anchor="start"></text>
</g>
</g>
</svg>
</body>

Adding image to SVG circles

I'm trying to add some background image to SVG nodes "circle".
I have read a lot of stackoverflow answer and everybody is saying that we need to add a node into a to define our image.
I tried this but my image is not displaying at all.
Here is a fiddle of my code: https://jsfiddle.net/baapu6wz/ .
What did I miss ?
<svg baseProfile="full" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="390" width="1629">
<g transform="translate(40,0)">
<g>
<line y2="149.3060251652327" x2="819.8567597731511" y1="222.22245513917517" x1="854.7332277213098" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="213.47136779636722" x1="768.9096407109324" style="stroke: #999;" stroke-width="5"></line>
<line y2="213.47136779636722" x2="768.9096407109324" y1="149.3060251652327" x1="819.8567597731511" style="stroke: #999;" stroke-width="5"></line>
</g>
<g>
<g transform="translate(854.7332277213098, 222.22245513917517)">
<circle fill="url(#image1);" fillOpacity="0.5" r="16"></circle>
<text x="20" dy="3">pagx</text>
</g>
<g transform="translate(768.9096407109324, 213.47136779636722)">
<circle fill="url(#image1);" fillOpacity="0.5" r="10"></circle>
<text x="20" dy="3">xzreds</text>
</g>
<g transform="translate(819.8567597731511, 149.3060251652327)">
<circle fill="url(#image1);" fillOpacity="0.5" r="14"></circle>
<text x="20" dy="3">jzkcwv</text>
</g>
</g>
</g>
<defs>
<pattern width="16" height="16" patternUnits="userSpaceOnUse" y="0" x="0" id="image1">
<image xlink:href="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="16" width="16" y="0" x="0"></image>
</pattern>
</defs>
You have a typo.
fill="url(#image1);"
should be
fill="url(#image1)"
Remove the semicolon.
https://jsfiddle.net/baapu6wz/1/

Categories