Output plots to PDF/etc.
10,851 views
Skip to first unread message
Corey Taylor
Apr 12, 2011, 10:24:51 PM4/12/11
to jqplot...@googlegroups.com
Hi Chris.
Are there future plans to give the ability to output to external files to JQPlot?
Thanks.
Corey.
Are there future plans to give the ability to output to external files to JQPlot?
Thanks.
Corey.
Chris Leonello
Apr 12, 2011, 10:39:50 PM4/12/11
to jqplot...@googlegroups.com
If you mean to save the plot to png/jpeg, that is on the list like many items. Realistically, it is probably a 2.0 feature. It is feasible but somewhat involved and probably fits in better with other optimizations ideas I have for 2.0.
--
Chris Leonello
http://www.jqplot.com
--
Chris Leonello
http://www.jqplot.com
--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To post to this group, send email to jqplot...@googlegroups.com.
To unsubscribe from this group, send email to jqplot-users...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jqplot-users?hl=en.
golubev
Apr 13, 2011, 1:29:34 AM4/13/11
to jqplot-users
//get the image data from the canvas
var imageData = canvas.toDataURL("image/png");
See also http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
var imageData = canvas.toDataURL("image/png");
See also http://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
Chris Leonello
Apr 13, 2011, 6:24:36 PM4/13/11
to jqplot...@googlegroups.com
//get the image data from the canvas
var imageData = canvas.toDataURL("image/png");
var imageData = canvas.toDataURL("image/png");
This is correct. Plots are composed of a number of canvases plus div elements and possibly table elements, though. They need to be positioned and collapsed or otherwise rendered into one canvas to get a complete image of a plot. A number of details to take care of.
If anyone has ideas on PDF generation (maybe through SVG conversion?), let me know.
--
Chris Leonello
http://www.jqplot.com
golubev
Apr 14, 2011, 3:31:24 AM4/14/11
to jqplot-users
This is my code:
function canvasToImage(canvas,backgroundColor)
{
//cache height and width
var w = canvas[0].width;
var h = canvas[0].height;
j("#tempcanvas").attr('width',w).attr('height',h);
var newCanvas = j("#tempcanvas")[0];
var newContext = newCanvas.getContext("2d");
newContext.clearRect(0,0,w,h);
var allData = newContext.getImageData(0, 0, w, h);
j(canvas).each(function(){
var context = j(this)[0].getContext("2d");
var imageData = context.getImageData(0, 0, w, h);
var pixels = 4 * w * h;
while (pixels--) {
allData.data[pixels] = allData.data[pixels] +
imageData.data[pixels];
}
});
newContext.putImageData(allData, 0,0);
newContext.globalCompositeOperation = "destination-over";
newContext.fillStyle = backgroundColor;
newContext.fillRect(0,0,w,h);
//get the image data from the canvas
var imageData = newCanvas.toDataURL("image/png");
//return the Base64 encoded data url string
return imageData;
}
var canvas = j(".jqplot-series-canvas");
var data = canvasToImage(canvas,"#ffffff");
-------
This "data" you can send to server and save in image file. After that
on the server side you can generate PDF with this image. For generate
PDF you can use http://www.tcpdf.org/ (PHP).
On Apr 14, 2:24 am, Chris Leonello <jqplot-us...@jqplot.com> wrote:
> //get the image data from the canvas
> var imageData = canvas.toDataURL("image/png");
>
function canvasToImage(canvas,backgroundColor)
{
//cache height and width
var w = canvas[0].width;
var h = canvas[0].height;
j("#tempcanvas").attr('width',w).attr('height',h);
var newCanvas = j("#tempcanvas")[0];
var newContext = newCanvas.getContext("2d");
newContext.clearRect(0,0,w,h);
var allData = newContext.getImageData(0, 0, w, h);
j(canvas).each(function(){
var context = j(this)[0].getContext("2d");
var imageData = context.getImageData(0, 0, w, h);
var pixels = 4 * w * h;
while (pixels--) {
allData.data[pixels] = allData.data[pixels] +
imageData.data[pixels];
}
});
newContext.putImageData(allData, 0,0);
newContext.globalCompositeOperation = "destination-over";
newContext.fillStyle = backgroundColor;
newContext.fillRect(0,0,w,h);
//get the image data from the canvas
//return the Base64 encoded data url string
return imageData;
}
var canvas = j(".jqplot-series-canvas");
var data = canvasToImage(canvas,"#ffffff");
-------
This "data" you can send to server and save in image file. After that
on the server side you can generate PDF with this image. For generate
PDF you can use http://www.tcpdf.org/ (PHP).
On Apr 14, 2:24 am, Chris Leonello <jqplot-us...@jqplot.com> wrote:
> //get the image data from the canvas
> var imageData = canvas.toDataURL("image/png");
>
> This is correct. Plots are composed of a number of canvases plus div elements and possibly table elements, though. They need to be positioned and collapsed or otherwise rendered into one canvas to get a complete image of a plot. A number of details to take care of.
>
> If anyone has ideas on PDF generation (maybe through SVG conversion?), let me know.
> --
> Chris Leonellohttp://www.jqplot.com
>
> If anyone has ideas on PDF generation (maybe through SVG conversion?), let me know.
> --
>
>
>
> On Wednesday, April 13, 2011 at 1:29 AM, golubev wrote:
> > //get the image data from the canvas
> > var imageData = canvas.toDataURL("image/png");
>
> > See alsohttp://www.w3.org/TR/html5/the-canvas-element.html#dom-canvas-todataurl
>
>
> On Wednesday, April 13, 2011 at 1:29 AM, golubev wrote:
> > //get the image data from the canvas
> > var imageData = canvas.toDataURL("image/png");
>
lsiden
May 16, 2011, 6:42:39 PM5/16/11
to jqplot-users
@golubev, thank you! This is exactly what I was looking for!
It almost works for me, but not quite. In the resulting PNG, I can
see the grid lines, and the axis, but no plot lines and no labels of
any sort. I wonder if the problem is that the new graphic context
does not have high enough resolution so nothing comes out clearly.
Would you know how to overcome this?
On Apr 14, 3:31 am, golubev <vgolu...@b1team.ru> wrote:
> This is my code:
>
> functioncanvasToImage(canvas,backgroundColor)
> var data =canvasToImage(canvas,"#ffffff");
It almost works for me, but not quite. In the resulting PNG, I can
see the grid lines, and the axis, but no plot lines and no labels of
any sort. I wonder if the problem is that the new graphic context
does not have high enough resolution so nothing comes out clearly.
Would you know how to overcome this?
On Apr 14, 3:31 am, golubev <vgolu...@b1team.ru> wrote:
> This is my code:
>
> functioncanvasToImage(canvas,backgroundColor)
>
> -------
>
> This "data" you can send to server and save in image file. After that
> on the server side you can generate PDF with this image. For generate
> PDF you can usehttp://www.tcpdf.org/ (PHP).
> -------
>
> This "data" you can send to server and save in image file. After that
> on the server side you can generate PDF with this image. For generate
lsiden
May 16, 2011, 7:00:41 PM5/16/11
to jqplot-users
FWIW, made a few "improvements": http://pastie.org/1913434 But still
getting nothing but the bare gridlines.
getting nothing but the bare gridlines.
lsiden
May 19, 2011, 6:40:36 PM5/19/11
to jqplot-users
My client, a major telecom company, wants me to provide a way to
extract a plot as a PNG. Since they will pay me to do it, I would
like to propose that I do this as a plug-in. Chris, what are the main
"gotchas" or obstacles to doing this that you are already aware of?
On my first attempt using @golubev's proposed code (see my
"pastie.org" link above), I found that the main problem was how to
merge the multiple canvases (one of my plots has over 50!) into a
single canvas without obscuring anything. I think that the addition
operator is too crude. Perhaps I need to try a bit-wise 'or'
operator.
The non-canvas div elements are a separate issue that I believe can be
handled.
On May 16, 7:00 pm, lsiden <lsi...@gmail.com> wrote:
> FWIW, made a few "improvements":http://pastie.org/1913434 But still
> getting nothing but the bare gridlines.
>
> On May 16, 6:42 pm, lsiden <lsi...@gmail.com> wrote:
>
>
>
>
>
>
>
> > @golubev, thank you! This is exactly what I was looking for!
>
> > It almost works for me, but not quite. In the resultingPNG, I can
extract a plot as a PNG. Since they will pay me to do it, I would
like to propose that I do this as a plug-in. Chris, what are the main
"gotchas" or obstacles to doing this that you are already aware of?
On my first attempt using @golubev's proposed code (see my
"pastie.org" link above), I found that the main problem was how to
merge the multiple canvases (one of my plots has over 50!) into a
single canvas without obscuring anything. I think that the addition
operator is too crude. Perhaps I need to try a bit-wise 'or'
operator.
The non-canvas div elements are a separate issue that I believe can be
handled.
On May 16, 7:00 pm, lsiden <lsi...@gmail.com> wrote:
> FWIW, made a few "improvements":http://pastie.org/1913434 But still
> getting nothing but the bare gridlines.
>
> On May 16, 6:42 pm, lsiden <lsi...@gmail.com> wrote:
>
>
>
>
>
>
>
> > @golubev, thank you! This is exactly what I was looking for!
>
lsiden
May 19, 2011, 7:14:50 PM5/19/11
to jqplot-users
Bit-wise 'or' is no better than '+' at combining the multiple
canvases, but using '^' (xor), I was at least able to get some
outlines of the plot lines (edges only). I think that the trick here
is figuring out and emulating how the browser displays these multiple
canvases in the page.
On May 19, 6:40 pm, lsiden <lsi...@gmail.com> wrote:
> My client, a major telecom company, wants me to provide a way to
> extract a plot as aPNG. Since they will pay me to do it, I would
canvases, but using '^' (xor), I was at least able to get some
outlines of the plot lines (edges only). I think that the trick here
is figuring out and emulating how the browser displays these multiple
canvases in the page.
On May 19, 6:40 pm, lsiden <lsi...@gmail.com> wrote:
> My client, a major telecom company, wants me to provide a way to
lsiden
May 19, 2011, 8:14:27 PM5/19/11
to jqplot-users
OMG! - It's much easier than I thought!!!:
http://pastie.org/1929353
Then, "window.open($('#myCanvas').canvasToImage());"
http://pastie.org/1929353
Then, "window.open($('#myCanvas').canvasToImage());"
lsiden
May 27, 2011, 1:28:22 PM5/27/11
to jqplot-users, ch...@jqplot.com
I have some code (https://github.com/lsiden/export-jqplot-to-png) that
successfully exports a series of jqplot canvases and divs to a PNG,
preserving fonts. I did it as a jQuery extension, so the usage is
var img = $('#chartdiv').jqplotToImage(50, 0);
if (img) {
open(img.toDataURL("image/png"));
}
The arguments (50, 0) are x and y offsets. I found this necessary
because on my plot, the labels on the x-axis are rotated and the first
one was getting clipped by the edge of the drawing canvas while
exporting. So I needed a way to tell it to move everything over by an
offset in order to accomodate the part of the label that would
otherwise get clipped.'
Here is a blog post for details:
http://westside-consulting.blogspot.com/2011/05/some-users-of-jqplot-have-expressed.html
On May 19, 8:14 pm, lsiden <lsi...@gmail.com> wrote:
> OMG! - It's much easier than I thought!!!:
>
> http://pastie.org/1929353
>
> Then, "window.open($('#myCanvas').canvasToImage());"
>
successfully exports a series of jqplot canvases and divs to a PNG,
preserving fonts. I did it as a jQuery extension, so the usage is
var img = $('#chartdiv').jqplotToImage(50, 0);
if (img) {
open(img.toDataURL("image/png"));
}
The arguments (50, 0) are x and y offsets. I found this necessary
because on my plot, the labels on the x-axis are rotated and the first
one was getting clipped by the edge of the drawing canvas while
exporting. So I needed a way to tell it to move everything over by an
offset in order to accomodate the part of the label that would
otherwise get clipped.'
Here is a blog post for details:
http://westside-consulting.blogspot.com/2011/05/some-users-of-jqplot-have-expressed.html
On May 19, 8:14 pm, lsiden <lsi...@gmail.com> wrote:
> OMG! - It's much easier than I thought!!!:
>
> http://pastie.org/1929353
>
> Then, "window.open($('#myCanvas').canvasToImage());"
>
> On May 19, 7:14 pm,lsiden<lsi...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Bit-wise 'or' is no better than '+' at combining the multiple
> > canvases, but using '^' (xor), I was at least able to get some
> > outlines of the plot lines (edges only). I think that the trick here
> > is figuring out and emulating how the browser displays these multiple
> > canvases in the page.
>
>
>
>
>
>
>
>
> > Bit-wise 'or' is no better than '+' at combining the multiple
> > canvases, but using '^' (xor), I was at least able to get some
> > outlines of the plot lines (edges only). I think that the trick here
> > is figuring out and emulating how the browser displays these multiple
> > canvases in the page.
>
> > On May 19, 6:40 pm,lsiden<lsi...@gmail.com> wrote:
>
> > > My client, a major telecom company, wants me to provide a way to
> > > extract a plot as aPNG. Since they will pay me to do it, I would
> > > like to propose that I do this as a plug-in. Chris, what are the main
> > > "gotchas" or obstacles to doing this that you are already aware of?
> > > On my first attempt using @golubev's proposed code (see my
> > > "pastie.org" link above), I found that the main problem was how to
> > > merge the multiple canvases (one of my plots has over 50!) into a
> > > single canvas without obscuring anything. I think that the addition
> > > operator is too crude. Perhaps I need to try a bit-wise 'or'
> > > operator.
>
> > > The non-canvas div elements are a separate issue that I believe can be
> > > handled.
>
>
> > > My client, a major telecom company, wants me to provide a way to
> > > extract a plot as aPNG. Since they will pay me to do it, I would
> > > like to propose that I do this as a plug-in. Chris, what are the main
> > > "gotchas" or obstacles to doing this that you are already aware of?
> > > On my first attempt using @golubev's proposed code (see my
> > > "pastie.org" link above), I found that the main problem was how to
> > > merge the multiple canvases (one of my plots has over 50!) into a
> > > single canvas without obscuring anything. I think that the addition
> > > operator is too crude. Perhaps I need to try a bit-wise 'or'
> > > operator.
>
> > > The non-canvas div elements are a separate issue that I believe can be
> > > handled.
>
> > > On May 16, 7:00 pm,lsiden<lsi...@gmail.com> wrote:
>
> > > > FWIW, made a few "improvements":http://pastie.org/1913434 But still
> > > > getting nothing but the bare gridlines.
>
>
> > > > FWIW, made a few "improvements":http://pastie.org/1913434 But still
> > > > getting nothing but the bare gridlines.
>
lsiden
May 27, 2011, 1:31:15 PM5/27/11
to jqplot-users
PS - I haven't tested this for any plots other than my own, so it may
need refinement/further development to be useful to a wider
community. But I think its a good start or at least a reference for
others who want to do the same.
On May 27, 1:28 pm, lsiden <lsi...@gmail.com> wrote:
> I have some code (https://github.com/lsiden/export-jqplot-to-png) that
> successfully exports a series of jqplot canvases and divs to a PNG,
> preserving fonts. I did it as a jQuery extension, so the usage is
>
> var img = $('#chartdiv').jqplotToImage(50, 0);
> if (img) {
> open(img.toDataURL("image/png"));
> }
>
> The arguments (50, 0) are x and y offsets. I found this necessary
> because on my plot, the labels on the x-axis are rotated and the first
> one was getting clipped by the edge of the drawing canvas while
> exporting. So I needed a way to tell it to move everything over by an
> offset in order to accomodate the part of the label that would
> otherwise get clipped.'
>
> Here is a blog post for details:http://westside-consulting.blogspot.com/2011/05/some-users-of-jqplot-...
need refinement/further development to be useful to a wider
community. But I think its a good start or at least a reference for
others who want to do the same.
On May 27, 1:28 pm, lsiden <lsi...@gmail.com> wrote:
> I have some code (https://github.com/lsiden/export-jqplot-to-png) that
> successfully exports a series of jqplot canvases and divs to a PNG,
> preserving fonts. I did it as a jQuery extension, so the usage is
>
> var img = $('#chartdiv').jqplotToImage(50, 0);
> if (img) {
> open(img.toDataURL("image/png"));
> }
>
> The arguments (50, 0) are x and y offsets. I found this necessary
> because on my plot, the labels on the x-axis are rotated and the first
> one was getting clipped by the edge of the drawing canvas while
> exporting. So I needed a way to tell it to move everything over by an
> offset in order to accomodate the part of the label that would
> otherwise get clipped.'
>
jpgamaral
Jun 25, 2011, 12:09:22 PM6/25/11
to jqplot-users
I get a blank image. I'm following your steps exactly. I even tweaked
the parameters for jqplotToImage() but I always get a blank image :/
Any ideas why?
$("#exportPNG").click(function() {
Best regards!
> > > > > > > > //get theimagedata from the canvas
> > > > > > > > on the server side you can generate PDF with thisimage. For generate
the parameters for jqplotToImage() but I always get a blank image :/
Any ideas why?
$("#exportPNG").click(function() {
var img = $('#chartdiv').jqplotToImage(50, 0);
if (img) {
open(img.toDataURL("image/png"));
}
});
if (img) {
open(img.toDataURL("image/png"));
}
Best regards!
> > > > > > > > var imageData = newCanvas.toDataURL("image/png");
> > > > > > > > //return the Base64 encoded data url string
> > > > > > > > return imageData;
> > > > > > > > }
>
> > > > > > > > var canvas = j(".jqplot-series-canvas");
> > > > > > > > var data =canvasToImage(canvas,"#ffffff");
>
> > > > > > > > -------
>
> > > > > > > > This "data" you can send to server and save inimagefile. After that
> > > > > > > > //return the Base64 encoded data url string
> > > > > > > > return imageData;
> > > > > > > > }
>
> > > > > > > > var canvas = j(".jqplot-series-canvas");
> > > > > > > > var data =canvasToImage(canvas,"#ffffff");
>
> > > > > > > > -------
>
> > > > > > > > on the server side you can generate PDF with thisimage. For generate
> > > > > > > > PDF you can usehttp://www.tcpdf.org/ (PHP).
>
> > > > > > > > On Apr 14, 2:24 am, Chris Leonello <jqplot-us...@jqplot.com> wrote:
>
> > > > > > > > > //get theimagedata from the canvas
>
> > > > > > > > On Apr 14, 2:24 am, Chris Leonello <jqplot-us...@jqplot.com> wrote:
>
> > > > > > > > > var imageData = canvas.toDataURL("image/png");
>
> > > > > > > > > This is correct. Plots are composed of a number of canvases plus div elements and possibly table elements, though. They need to be positioned and collapsed or otherwise rendered into one canvas to get a completeimageof a plot. A number of details to take care of.
>
>
> > > > > > > > > If anyone has ideas on PDF generation (maybe through SVG conversion?), let me know.
> > > > > > > > > --
> > > > > > > > > Chris Leonellohttp://www.jqplot.com
>
> > > > > > > > > On Wednesday, April 13, 2011 at 1:29 AM, golubev wrote:
> > > > > > > > > > //get theimagedata from the canvas
> > > > > > > > > If anyone has ideas on PDF generation (maybe through SVG conversion?), let me know.
> > > > > > > > > --
> > > > > > > > > Chris Leonellohttp://www.jqplot.com
>
> > > > > > > > > On Wednesday, April 13, 2011 at 1:29 AM, golubev wrote:
Larry Siden
Jun 25, 2011, 4:27:16 PM6/25/11
to jqplot...@googlegroups.com
@jpgamaral, What browser are you trying this with? It will not work at all in IE<9 (I haven't tested it with IE9 yet).
Also, did you check in the debugger whether something is getting returned for var img?
jpgamaral
Jun 25, 2011, 7:01:24 PM6/25/11
to jqplot-users
@Larry, actually I was using IE9 yes, because Chrome doesn't read the
CSS from ThemeRoller and IE9 does :/ I just tested in Chrome and it
works :D Any idea why it doesn't in IE9 tho?
CSS from ThemeRoller and IE9 does :/ I just tested in Chrome and it
works :D Any idea why it doesn't in IE9 tho?
Larry Siden
Jun 25, 2011, 7:43:49 PM6/25/11
to jqplot...@googlegroups.com
Well, I was trying to get stuff to work in IE7 yesterday before I found out that canvas.imageToURL() is useless on IE<9 and there was a whole slew of calls my code makes in order to get the positions of the elements that works perfectly on Gecko and WebKit browser but need to be completely reworked in order to function on IE. True to its corporate sponsors, IE remains stubbornly different from other browsers in many fine details that can dash hopes and careers of the naive and unsuspecting who, like me, believe that browsers should adhere to standards so that consumers will have a choice when they access the web.
I can send you the modified code later tonight. I got everything to work up to the point where it tried to invoke imageToURL(). So I'm anxious to hear whether IE9 will finally allow that bit to happen.
The United States is a nation of laws, badly written and randomly enforced.
--Frank Zappa 1940-1993
-Larry Siden
--Frank Zappa 1940-1993
lsiden
Jun 27, 2011, 11:51:48 AM6/27/11
to jqplot-users
@jpgamaral, I promised you that I would send you my code that handled
getting positions of items for drawing in IE. Here is it:
http://pastie.org/2129617. It begins with $.fn.jqplotToImage. Hope
that helps!
> ...
>
> read more »
getting positions of items for drawing in IE. Here is it:
http://pastie.org/2129617. It begins with $.fn.jqplotToImage. Hope
that helps!
>
> read more »
Compuwizard123
Jul 7, 2011, 4:55:48 PM7/7/11
to jqplot-users
I was trying this out and it works really well for the plot areas. How
about for the legends? I noticed this didn't work. I'm willing to work
on it I just didn't know how to convert the table the legend resides
in into a possible canvas item.
Kevin Risden
> > > > > > > > > > > > > > Chris Leonellohttp://www.jqplot.com...
>
> read more »
about for the legends? I noticed this didn't work. I'm willing to work
on it I just didn't know how to convert the table the legend resides
in into a possible canvas item.
Kevin Risden
>
> read more »
Vinod T G
Jul 11, 2011, 12:29:57 AM7/11/11
to jqplot-users
Hi,
I tried your code above. I got my jqplot as a canvas with vml tags
inside in IE < 9 as I am working with IE 8. But I getting only the
texts inside the jqplot, that means I am getting only the axis texts,
there was no drawings. Please help me in this issue. Thanks in
advance.
Regards,
Vinod
> > > > > I get a blankimage. I'm following your steps exactly. I even tweaked
> > > > > the parameters for jqplotToImage() but I always get a blankimage:/
> > > > > > > > > > > > > > Chris Leonellohttp://www.jqplot.com...
>
> read more »
I tried your code above. I got my jqplot as a canvas with vml tags
inside in IE < 9 as I am working with IE 8. But I getting only the
texts inside the jqplot, that means I am getting only the axis texts,
there was no drawings. Please help me in this issue. Thanks in
advance.
Regards,
Vinod
> > > > > the parameters for jqplotToImage() but I always get a blankimage:/
>
> read more »
Compuwizard123
Jul 12, 2011, 12:47:42 PM7/12/11
to jqplot-users
IE < 9 doesn't have support for toDataUrl() even with excanvas so that
makes it difficult if not impossible to save the image or display it I
think.
Kevin Risden
> ...
>
> read more »
makes it difficult if not impossible to save the image or display it I
think.
Kevin Risden
>
> read more »
Vinod T G
Jul 13, 2011, 6:48:30 AM7/13/11
to jqplot-users
Hi,
Thanks for the reply Kevin. Is there any way to export jqplot to png
or pdf in IE 8 and less? When I used the exporting code posted by
lsiden, I got a canvas with g_vml_ tags inside. My issue is how to
convert it to image or how can get it as an image.
Cheers,
Vinod
> > > > > > > > > > > > > > > return imageData;...
>
> read more »
Thanks for the reply Kevin. Is there any way to export jqplot to png
or pdf in IE 8 and less? When I used the exporting code posted by
lsiden, I got a canvas with g_vml_ tags inside. My issue is how to
convert it to image or how can get it as an image.
Cheers,
Vinod
>
> read more »
Larry Siden
Jul 21, 2011, 12:56:42 PM7/21/11
to jqplot-users
It won't work in either IE7 or IE8, because even with excanvas.js the
the canvas element doesn't support toDataUrl(). I also recall reading
that in IE7/8 it does not support fillText() so you won't be able to
draw the labels. This page, http://code.google.com/p/explorercanvas/wiki/Instructions,
has some useful discussions and examples, but I haven't found any
workarounds for this particular issue. Go figure. Microsoft vs. the
Rest of the World!
> ...
>
> read more »
the canvas element doesn't support toDataUrl(). I also recall reading
that in IE7/8 it does not support fillText() so you won't be able to
draw the labels. This page, http://code.google.com/p/explorercanvas/wiki/Instructions,
has some useful discussions and examples, but I haven't found any
workarounds for this particular issue. Go figure. Microsoft vs. the
Rest of the World!
> Thanks for the reply Kevin. Is there any way to export jqplot to png
> or pdf in IE 8 and less? When I used the exporting code posted bylsiden, I got a canvas with g_vml_ tags inside. My issue is how to
> convert it to image or how can get it as an image.
>
> Cheers,
> Vinod
>
> On Jul 12, 9:47 pm, Compuwizard123 <compuwizard...@gmail.com> wrote:
>
>
>
>
>
>
>
> > IE < 9 doesn't have support for toDataUrl() even with excanvas so that
> > makes it difficult if not impossible to save the image or display it I
> > think.
>
> > Kevin Risden
>
> > On Jul 10, 11:29 pm, Vinod T G <vinod.t...@gmail.com> wrote:
>
> > > Hi,
>
> > > I tried your code above. I got my jqplot as a canvas with vml tags
> > > inside in IE < 9 as I am working with IE 8. But I getting only the
> > > texts inside the jqplot, that means I am getting only the axis texts,
> > > there was no drawings. Please help me in this issue. Thanks in
> > > advance.
>
> > > Regards,
> > > Vinod
>
>
> Cheers,
> Vinod
>
> On Jul 12, 9:47 pm, Compuwizard123 <compuwizard...@gmail.com> wrote:
>
>
>
>
>
>
>
> > IE < 9 doesn't have support for toDataUrl() even with excanvas so that
> > makes it difficult if not impossible to save the image or display it I
> > think.
>
> > Kevin Risden
>
> > On Jul 10, 11:29 pm, Vinod T G <vinod.t...@gmail.com> wrote:
>
> > > Hi,
>
> > > I tried your code above. I got my jqplot as a canvas with vml tags
> > > inside in IE < 9 as I am working with IE 8. But I getting only the
> > > texts inside the jqplot, that means I am getting only the axis texts,
> > > there was no drawings. Please help me in this issue. Thanks in
> > > advance.
>
> > > Regards,
> > > Vinod
>
> > > > > > > > On 27 Maio, 18:31,lsiden<lsi...@gmail.com> wrote:
> > > > > > > > > PS - I haven't tested this for any plots other than my own, so it may
> > > > > > > > > need refinement/further development to be useful to a wider
> > > > > > > > > community. But I think its a good start or at least a reference for
> > > > > > > > > others who want to do the same.
>
> > > > > > > > > PS - I haven't tested this for any plots other than my own, so it may
> > > > > > > > > need refinement/further development to be useful to a wider
> > > > > > > > > community. But I think its a good start or at least a reference for
> > > > > > > > > others who want to do the same.
>
>
> read more »
BB
Aug 23, 2011, 6:56:43 PM8/23/11
to jqplot-users
This is great stuff and I am using it with total success in all
browsers except IE. I would like to figure out how to make it work in
IE9. I'm using the code file that you wrote for IE9 and still no
worky.
Anyone else had this problem?
browsers except IE. I would like to figure out how to make it work in
IE9. I'm using the code file that you wrote for IE9 and still no
worky.
Anyone else had this problem?
Larry Siden
Aug 23, 2011, 11:14:31 PM8/23/11
to jqplot...@googlegroups.com
Glad too great you found it useful! IE 9 is supposed to support the HTML 5 canvas but it's still IE! Let its know if your able to feet anywhere.
> --
> You received this message because you are subscribed to the Google Groups "jqplot-users" group.
> You received this message because you are subscribed to the Google Groups "jqplot-users" group.
Chris Leonello
Aug 26, 2011, 11:56:03 PM8/26/11
to jqplot...@googlegroups.com
I've incorporated Larry's enhancement into jqPlot (thanks Larry!).
Note, as discussed earlier, IE 9 does have a problem, but it is not with canvas or with toDataUrl(). IE 9 has a problem with this:
open(img.toDataURL("image/png"));
and this:
window.location.href = imgData.replace("image/png", "image/octet-stream");
This is a known issue with IE 9 window.open() and window.location.href. The canvas image rendering is working properly and the solution to show the image is to do something like this:
var elem = document.createElement("img");;
elem.src = imgCanvas.toDataURL("image/png");
someDivInPage.append(elem);
So, on IE 9, instead of trying to force a download of the image, or open a new window and populate it with the image data, insert the image directly into the page as an image tag. This does require a little more work as you would probably have a hidden div that you would .show() once the image is created.
As far as I can tell, this work around is only needed for IE9. Other browsers (those that support canvas, anyway) handle window.open and window.location.href fine.
These changes are in the repository. A number of the samples in the "examples" folder have been updated with a "View Plot Image" button to slide open a div showing a png of the plot. The code performing this operation is actually in "examples/example.js", which is included by many of the sample pages.
For IE 7/8 (currently rendered through excanvas emulation), the situation is tricky. I'm experimenting with 2 work arounds right now, using flashcanvas and SVGKit.
Larry Siden
Aug 27, 2011, 3:13:46 PM8/27/11
to jqplot...@googlegroups.com
Nice work, Chris!
srinath sri
Jun 19, 2012, 5:55:39 AM6/19/12
to jqplot...@googlegroups.com
Hi,
I was plotting the JQPLOT chart under a DIV, just i got confuse where to declare the canvas, whether into the DIV or Outside the div. Can you able to send me any format.
<div id="dvChartTopLeft">
</div>
And meanwhile if u implemented Export to Image function from JQPLOT, kindly update me the necessary files and what parameters, i have to pass to those function to export image.
Regards,
Srinath.
Message has been deleted
asim shariff
Jul 27, 2012, 7:06:47 AM7/27/12
to jqplot...@googlegroups.com
//#chart2 is the chart id.
var imgelem = $('#chart2').jqplotToImageStr({});
if (imgelem) {
window.location.href=imgelem;
}
// save the plot image where you want
Use the above code to generate jqplot with legends and all css and look n feel
But its wont work in IE<9
So please make sure.
Thanks guys
Karuna Kammari
Aug 8, 2012, 2:16:42 AM8/8/12
to jqplot...@googlegroups.com
Hi,
How can i make it to work on IE8 which doesnot support 'canvas.toDataURL'?
Please let me know the steps if yoi have solved.
Thanks,
Karuna Kumar K
Karuna Kammari
Aug 8, 2012, 5:15:19 AM8/8/12
to jqplot...@googlegroups.com
Hi Srinath,
I'm also plotting the chart in DIV. But if we see, it automatically plots the canvas(Saw in Dev Tools +F12).
Please let me know, if you get any updates.
Thanks in Advance.
Karuna.
--
You received this message because you are subscribed to the Google Groups "jqplot-users" group.
To view this discussion on the web visit https://groups.google.com/d/msg/jqplot-users/-/df-07qtGii4J.
♥♥♥ <$R!> ♥♥♥
Aug 8, 2012, 5:40:58 AM8/8/12
to jqplot...@googlegroups.com
Hi,
I went through your mail. Canvas thing will get populate when you are plotting a jqplot chart, because the jqplot chart works under some CSS class style, so it automatically includes those class styles from default .js files and also the canvas. You cant do anything for it. Any problem from it?
Thanks,
Srinath
♥♥♥ <$R!> ♥♥♥
Karuna Kammari
Aug 8, 2012, 5:54:22 AM8/8/12
to jqplot...@googlegroups.com
Hi Srinath,
Thanks for the reply.
My problem is that 'Canvas.toDataURL()' is not supported to get the binary stream in IE8.
I'm using IE8. Any alernative to get work this? I mean is JQ-Plot provide some other plugins to enable Canvas properties to all versions of IE browser? for my need it is IE8.
Please share some idea as i have hot requirement of this.
Your help is highly appriciated.
Thanks,
Karuna Kumar K
Reply all
Reply to author
Forward
0 new messages