dojox.charting.Chart SVG surface issue

Question

I need to export a dojo chart to an image format preferably PNG. Unfortunality there is no in-built feature but I have found a way around for this. As dojo charts are based on SVG graphics:

I will first get the SVG string after the chart is rendered, then send this string to server via ajax and then use ImageMagick php library to convert it into PNG. Now the whole process is working properly but there is an issue:

The SVG string i get from dojo Charts does not contain full details, the chart title and axis values and markers are not present in SVG string, what can be the possible issue?

Following is the code in which I have re-printed the extracted SVG string from dojo Chart into another div, you can see the difference visually.

var mychart;

require(["dojo/ready", "dojox/charting/Chart2D", "dojox/gfx/utils", "dojox/charting/action2d/Tooltip", "dojox/charting/action2d/Highlight", "dojox/charting/themes/Claro"], function (ready, Chart, Utils, Tooltip, Highlight, ClaroTheme) {
  ready(function () {
    mychart = Chart("mychart");
    mychart.title = "My Chart";

    mychart.addPlot("column_plot", {
      type: "Columns",
      lines: true,
      areas: false,
      markers: true
    });

    var column_tooltip = new Tooltip(mychart, "column_plot");
    var column_highlight = new Highlight(mychart, "column_plot");

    mychart.addAxis("x", {vertical: false});
    mychart.addAxis("y", {vertical: true});

    mychart.addSeries("column_series", [1, 3, 5, 2, 6, 1, 0, 4, 6, 4, 1], {
      plot: "column_plot"
    });

    mychart.setTheme(ClaroTheme);
    mychart.render();

     //this function will be called after render to send SVG to server via AJAX
    document.getElementById("syncbutton").onclick = function (e) {
       var svgString = Utils.toSvg(mychart.surface).results[0];
       document.getElementById("svgchart").innerHTML = svgString;       
    };

  });
});

http://jsfiddle.net/HAfSd/7/

Patrick Ruzand · Answer 1 · 2013-05-12T08:39:52.327

1

By default, labels are drawn using HTML markups, so they are not part of the gfx scene. That's why they are not in the generated svg output. You should explicitly turn off HTML labels rendering with the htmlLabels: false axis property.

    chart.addAxis("x", {
          type : "Default", 
          fixLower: "minor",
          natural: true,
          enableCache: true,
          htmlLabels: false,
          majorTick: {color: "red", length: 4},
          minorTick: {color: "blue", length: 2}
    });

In this configuration, labels are rendered via the underlying gfx renderer (svg, canvas, etc) and will be in the svg output.

edited May 12 '13 at 08:39

answered May 08 '13 at 20:19

Patrick Ruzand

465
1
3
10

Where should I specify this option. Can you explain through code snippet. – asim-ishaq May 09 '13 at 10:08
Ok. Thanks its working for the axis but the title is still not in SVG string. See http://jsfiddle.net/HAfSd/10/ – asim-ishaq May 12 '13 at 08:55
Indeed, in Dojo <= 1.8, it's only for axis unfortunately. From Dojo 1.9 (which has just been released), support for the htmlLabels property has been added to the Chart class. – Patrick Ruzand May 13 '13 at 08:05

dojox.charting.Chart SVG surface issue

1 Answers1