Jump to content
JChartFX Community

pperich

Members
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

 Content Type 

Everything posted by pperich

  1. pperich
    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.
  2. 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
  3. pperich
    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
  4. pperich
    Hello, please could somebody help me in how to set the color of an Axis section thru the API. Thanks! Pablo
  5. pperich
    The only problem with my code is that the texts appears in a wrong position. Please, can anybody help me with that?
  6. pperich
    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
  7. pperich
    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
×
×
  • Create New...