I need to convert Graph html with css to word file.This is my code.i need to export word docment file .
<?php
include("html_to_doc.inc.php");
$content = '<div id="piechart" style="width: 900px; height: 500px; position: relative;">
<div dir="ltr" style="position: relative; width: 900px; height: 500px;">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="900" height="500" style="overflow: hidden;"><defs id="defs"></defs>
<rect x="0" y="0" width="900" height="500" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="542" y="96" width="198" height="37" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="542" y="96" width="198" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="561" y="107.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">male</text></g><rect x="542" y="96" width="14" height="14" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="542" y="119" width="198" height="14" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="561" y="130.9" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#222222">femle</text></g><rect x="542" y="119" width="14" height="14" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><path d="M340,251L266.7041014722907,386.4389576857993A154,154,0,0,1,340,97L340,251A0,0,0,0,0,340,251" stroke="#ffffff" stroke-width="1" fill="#dc3912"></path><text text-anchor="start" x="204.75670248578234" y="226.71643359920404" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#ffffff">42.1%</text></g>
<g><path d="M340,251L340,97A154,154,0,1,1,266.7041014722907,386.4389576857993L340,251A0,0,0,1,0,340,251" stroke="#ffffff" stroke-width="1" fill="#3366cc"></path>
<text text-anchor="start" x="435.24329751421766" y="285.083566400796" font-family="Arial" font-size="14" stroke="none" stroke-width="0" fill="#ffffff">57.9%</text></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 510px; left: 910px; white-space: nowrap; font-family: Arial; font-size: 14px; font-weight: bold;">8 (42.1%)</div><div></div></div>';
$f_name="test.doc";
$my_file = 'export_doc_html.html';
$handle = fopen($my_file, 'w') or die('Cannot open file: '.$my_file);
$data = $content;
fwrite($handle, $data);
$htmltodoc= new HTML_TO_DOC();
$htmltodoc->createDoc("export_doc_html.html",$f_name);
//$htmltodoc->createDocFromURL("http://yahoo.com","test");
?>
Related
For example a simple rectangle with text 'Hello World' to be displayed when mouseover:
<rect id="svg_1" height="100" width="165" y="101" x="136" stroke-width="5" stroke="#000000" fill="#FF0000"/>
<text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_2" y="88" x="221" stroke-width="0" stroke="#000000" fill="#000000">Hello World</text>
In CSS:
text {
visibility: hidden;
}
text :hover {
visibility: visible;
}
I have made a simple donut chart (based on the Google Visualization example at https://google-developers.appspot.com/chart/interactive/docs/gallery/piechart#donut).
As it only shows one slice (the other is transparent/invisible), I'd like to move the <text> element to the centre of the chart, i.e., within the hole. I know that it simply involves updating the 'x' and 'y' coordinate attributes but I'm having trouble accessing them in the DOM, particularly as there are no IDs/classes to hang onto.
So, how can I target the <text> element of the penultimate <g> element in this code? I'd like to change x="239.45622566746957" y="285.69328724429994" to x="200" y="200"
Javascript preferred but jQuery also fine...
<div id="donutchart" style="position: relative;">
<div style="position: relative; width: 560px; height: 412px;" dir="ltr">
<div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
<svg width="560" height="412" style="overflow: hidden;" aria-label="A chart.">
<defs id="defs"/>
<rect x="0" y="0" width="560" height="412" stroke="none" stroke-width="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="107" y="58.2" font-family="Arial" font-size="12" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">Time spent at work</text>
</g>
<g>
<rect x="340" y="79" width="113" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<rect x="340" y="79" width="113" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<g>
<text text-anchor="start" x="357" y="89.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Work</text>
</g>
<rect x="340" y="79" width="12" height="12" stroke="none" stroke-width="0" fill="#b1d123"/>
</g>
<g>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"/>
<rect x="340" y="98" width="12" height="12" stroke="none" stroke-width="0" fill-opacity="1" fill="none"/>
</g>
</g>
<g>
<path d="M179.37407264075225,181.84279120188216L127.43518160188061,144.10697800470538A107,107,0,0,1,214,100L214,164.2A42.800000000000004,42.800000000000004,0,0,0,179.37407,181.84279" stroke="#ffffff" stroke-width="1" fill-opacity="1" fill="none"/>
<text text-anchor="start" x="163.54377433253043" y="136.70671275570004" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">15%</text>
</g>
<g>
<path d="M214,164.2L214,100A107,107,0,1,1,127.43518,144.10697L179.37407264075225,181.84279120188216A42.800000000000004,42.800000000000004,0,1,0,214,164.19999" stroke="#ffffff" stroke-width="1" fill="#b1d123"/>
<text text-anchor="start" x="239.45622566746957" y="285.69328724429994" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#ffffff">85%</text>
</g>
<g/>
</svg>
</div>
</div>
<div style="display: none; position: absolute; top: 422px; left: 570px; white-space: nowrap; font-family: Arial; font-size: 12px; font-weight: bold;">85 (85%)
</div>
<div></div>
</div>
Use a selector like this:
document.querySelector('#donutchart svg > g:nth-last-child(2) text');
This will not work in IE8, as older versions of IE do not support SVG. If you need to support IE8, you will need a selector for the equivalent VML structure.
svg:
<text xml:space="preserve" y="228" x="349.98" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_b">cur_b</text> <text xml:space="preserve" y="222" x="103.98" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_a">cur_a</text> <text xml:space="preserve" y="229" x="590.0211" text-anchor="middle" stroke-width="0" stroke-linejoin="null" stroke-linecap="null" stroke-dasharray="null" stroke="#000000" fill="#000000" style="cursor: move; pointer-events: inherit;" font-size="24" font-family="serif" id="cur_c">cur_c</text>
NSString* theJS = # "var theNode0 = document.getElementById('cur_a');
theNode0.textContent='200A';
theNode0.setAttribute('fill','#FF0000');
var theNode1 = document.getElementById('cur_c');
theNode1.textContent='200A';
theNode1.setAttribute('fill','#00FF00');"
[self.webView stringByEvaluatingJavaScriptFromString:theJS];
The SVG text node value is changed but disappeared after about one second.
In rails 3.2.13 project, I am using google charts for reports, but graph is not aligned properly.
Graph should be in responsive format(not fixed format). Now Height & Width of this chart is in 'px' format, I need to change in '%' format. How can I change CSS style for google chart?
I am using below gem for charts
gem 'reporter', '0.0.14.alpha' , :git => "https://github.com/kpvarma/reporter.git"
In views, outer div container contains 100% width
<div id="<%= container_id %>" style="float:left;width: 100%;"></div>
Generated HTML code is
<div id="self_users_chart" style="float: left; width: 100%; position: relative;"><div dir="ltr" style="position: relative; width: 676px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;"><svg width="676" height="200" style="overflow: hidden;"><defs id="defs"><clipPath id="_ABSTRACT_RENDERER_ID_0"><rect x="84" y="38" width="508" height="124"></rect></clipPath></defs><rect x="0" y="0" width="676" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="31" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="604" y="38" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="48.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Jobs</text></g><rect x="604" y="38" width="12" height="12" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="604" y="57" width="60" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="621" y="67.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">Applic...</text><rect x="621" y="57" width="43" height="12" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="604" y="57" width="12" height="12" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><rect x="84" y="38" width="508" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(#_ABSTRACT_RENDERER_ID_0)"><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="130" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="100" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="69" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="84" y="38" width="508" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect></g><g><rect x="84" y="161" width="508" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g><g><path d="M211.25,69.25L464.75,130.75" stroke="#3366cc" stroke-width="2" fill-opacity="1" fill="none"></path><path d="M211.25,161.5L464.75,130.75" stroke="#dc3912" stroke-width="2" fill-opacity="1" fill="none"></path></g></g><g></g><g><g><text text-anchor="middle" x="211.25" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">13 Feb, 2014</text></g><g><text text-anchor="middle" x="464.75" y="176.86666666666665" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#222222">17 Feb, 2014</text></g><g><text text-anchor="end" x="72" y="165.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="72" y="134.95" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">1</text></g><g><text text-anchor="end" x="72" y="104.2" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">2</text></g><g><text text-anchor="end" x="72" y="73.45" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">3</text></g><g><text text-anchor="end" x="72" y="42.7" font-family="Arial" font-size="12" stroke="none" stroke-width="0" fill="#444444">4</text></g></g></g><g><g><text text-anchor="middle" x="338" y="193.5333333333333" font-family="Arial" font-size="12" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Time</text></g><g><text text-anchor="middle" x="36.7" y="100" font-family="Arial" font-size="12" font-style="italic" transform="rotate(-90 36.7 100)" stroke="none" stroke-width="0" fill="#222222">Events</text></g></g><g></g></svg></div></div><div style="display: none; position: absolute; top: 210px; left: 686px; white-space: nowrap; font-family: Arial; font-size: 12px;">Applic...</div><div></div></div>
I'm not sure if the below would be helping in your conversion but the standard conversion is as below.
1em = 12pt = 16px = 100%.
It can be found at this link
please update if this is helpful. Also you can refer Converting width from percentage to pixels for similar question.
Also there is a calculator online found here, where in you give the pixel-width and you get in percentage.
Happy Coding :-)
I want to get each circle inside a div so i can resize it using jquery. My code is as follows:
<div id="DG_circles">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200" height="75">
<desc>Created with Raphaël</desc>
<defs>
<circle cx="39" cy="39.5" r="16" fill="#d57b19" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="28.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-hotel-chart">
<text x="39" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
<circle cx="91" cy="39.5" r="16" fill="#b1102b" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="80.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-card-chart">
<text x="91" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
<circle cx="143" cy="39.5" r="16" fill="#85bb3c" stroke="none" style="stroke-width: 0;" stroke-width="0">
<image x="132.8" y="29.3" width="22.4" height="22.4" preserveAspectRatio="none" href="load?name=icon-airplane-chart">
<text x="143" y="17.5" text-anchor="middle" style="text-anchor: middle; font: bold 9px Arial,Verdana,Courier; stroke-width: 0;" font="10px "Arial"" stroke="none" fill="#333333" font-size="9px" font-family="Arial, Verdana, Courier" stroke-width="0" font-weight="bold">
</svg>
</div>
var $circle = $('#DG_circles').find("circle");
$circle.each(function(index, value){
if(index == 0){
$this.attr("r", "24");
} else if(index == 1){
$this.attr("r", "20");
} else if(index == 2){
$this.attr("r", "18");
}
});
But it doesn't change the "r" attribute of the circle.
Please help.
Thank you.
Why do you even need to use each here?
var $circle = $('#DG_circles').find("circle");
$circle.eq(0).attr("r", "24");
$circle.eq(1).attr("r", "20");
$circle.eq(2).attr("r", "18");
this is a dom element, not jQuery. You have to convert it to jQuery element in order to use jQuery functions.
$(this).attr('r', 24);
Try....
var circle = $('#DG_circles').find("circle");
circle.each(function(index, value){
if(index == 0){
$(this).attr("r", "24");
} else if(index == 1){
$(this).attr("r", "20");
} else if(index == 2){
$(this).attr("r", "18");
}
});