pperich
-
Posts
7 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by pperich
-
-
Thanks JuanC. I've have noticed that I should not include the CSS and I am setting all the colors thru a API because i am exporting it to an image and when I use the CSS, the exported image appears like a black rectangle.
thanks,
Pablo
-
Hi. I'm posting the full code of a working example of converting a chart svg to an image. Note that you have to modify the path to the jChartFX library in order to make it work.
<html>
<head>
<script type="text/javascript" src="/js/libs/jchartfx.7.1.4889/js/jchartfx.system.js"></script>
<script type="text/javascript" src="/js/libs/jchartfx.7.1.4889/js/jchartfx.coreBasic.js"></script>
<script type="text/javascript" src="/js/libs/jchartfx.7.1.4889/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script language="Javascript">
window.onload = function () {
onLoadDoc();
}
var chart1;
function chart2Img(chart, img ) {
var svgH = chart.S.parentNode.innerHTML;
svgH = svgH.slice(svgH.indexOf('<svg'));
if ( ( p = svgH.indexOf('<div') ) > 0)
svgH = svgH.slice(0,p);
svgH = svgH.replace(/sfxid=/g, ' sfxid=');
svgH = svgH.replace(/sfxtitle=/g, ' sfxtitle=');
var canvas = document.createElement('canvas');
canvg(canvas, svgH);
var imgData = canvas.toDataURL('image/png');
img.src=imgData;
}
function onLoadDoc() {
chart1 = new cfx.Chart();
var items = [{
"Date": "2012-01-21T23:45:10.280Z",
"Value": 7,
"UpperLimit": 8,
"LowerLimit": 6
}, {
"Date": "2012-01-26T23:45:10.280Z",
"Value": 8,
"UpperLimit": 9,
"LowerLimit": 7
}, {
"Date": "2012-02-10T23:45:10.280Z",
"Value": 9,
"UpperLimit": 10,
"LowerLimit": 7
}, {
"Date": "2012-02-19T23:45:10.280Z",
"Value": 10,
"UpperLimit": 11,
"LowerLimit": 8
}, {
"Date": "2012-03-21T23:45:10.280Z",
"Value": 12,
"UpperLimit": 13,
"LowerLimit": 9
}, {
"Date": "2012-03-29T23:45:10.280Z",
"Value": 13,
"UpperLimit": 14,
"LowerLimit": 10
}, {
"Date": "2012-04-10T23:45:10.280Z",
"Value": 14,
"UpperLimit": 15,
"LowerLimit": 10
}, {
"Date": "2012-04-19T23:45:10.280Z",
"Value": 14,
"UpperLimit": 16,
"LowerLimit": 11
}, {
"Date": "2012-05-10T23:45:10.280Z",
"Value": 15,
"UpperLimit": 17,
"LowerLimit": 12
}, {
"Date": "2012-05-19T23:45:10.280Z",
"Value": 16,
"UpperLimit": 18,
"LowerLimit": 13
}];
var axisY = chart1.getAxisY();
axisY.setMin(4);
axisY.setMax(20);
chart1.setGallery(cfx.Gallery.Area);
chart1.getData().setSeries(2);
var series1 = chart1.getSeries().getItem(0);
var series2 = chart1.getSeries().getItem(1);
series2.setColor("#801702D1");
series2.getBorder().setWidth(4);
series1.setGallery(cfx.Gallery.Lines);
var legBox = chart1.getLegendBox();
legBox.setDock(cfx.DockArea.Bottom);
legBox.setContentLayout(cfx.ContentLayout.Center);
//----Assign data fields--------
var fields = chart1.getDataSourceSettings().getFields();
var field1 = new cfx.FieldMap();
var field2 = new cfx.FieldMap();
var field3 = new cfx.FieldMap();
var field4 = new cfx.FieldMap();
field1.setName("Date");
field1.setUsage(cfx.FieldUsage.XValue);
fields.add(field1);
field2.setName("Value");
field2.setUsage(cfx.FieldUsage.Value);
fields.add(field2);
field4.setName("LowerLimit");
field4.setUsage(cfx.FieldUsage.FromValue);
fields.add(field4);
field3.setName("UpperLimit");
field3.setDisplayName("Acceptable range");
field3.setUsage(cfx.FieldUsage.Value);
fields.add(field3);
//----Set Sample Data------------
chart1.setDataSource(items);
var chartDiv = document.getElementById('ChartDiv1');
chart1.create(chartDiv);
var img = document.getElementById('dstImg');
chart2Img(chart1,img);
}
</script>
</head>
<body>
<div id="ChartDiv1" style="width:500px;height:375px;display:inline-block"></div>
<img id="dstImg" src="" style="width:500px;height:375px;display:inline-block">
</body>
</html>
Regards,
Pablo
-
Hello, please could somebody help me in how to set the color of an Axis section thru the API.
Thanks!
Pablo
-
The only problem with my code is that the texts appears in a wrong position. Please, can anybody help me with that?
-
Hi Luis. after including the canvg library, this is my code:
var svgH = this.jChart.S.parentNode.innerHTML;
svgH = svgH.slice(svgH.indexOf('<svg'));
if ( ( p = svgH.indexOf('<div') ) > 0)
svgH = svgH.slice(0,p);
svgH = svgH.replace(/sfxid=/g, ' sfxid=');
svgH = svgH.replace(/sfxtitle=/g, ' sfxtitle=');
this.canvas = document.createElement('canvas');
canvg(this.canvas, svgH);
var imgData = this.canvas.toDataURL('image/png');
Note that i have a class with a jChart attribute and a canvas attribute.
After that you have in imgData the "data" url with the image. You can set it to an image src o do a window.location.href = imgData. In my case after that i send it to the server an the server is sending me it back to the browser with a filename.
To include the canvg library you need this:
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
Greetings.
Pablo
-
Hi JuanC. Just in case you are interested. I made a script to export a JchartFX chart object to an image. It is very simple using de canvg library.
Pablo
Exporting a chart to an image
in General Questions
Posted
to export the image I have to avoid loading the css file and set the colors and styles thru the API. Is important NOT LOADING the CSS file.