CODEWITHSUNDEEP
javascriptsvgdojodojox.charting
asim-ishaq
asim-ishaq

Reputation: 2220

dojox.charting.Chart SVG surface issue

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/

Upvotes: 0

Views: 1086

Answers (1)

Patrick Ruzand
Patrick Ruzand

Reputation: 475

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.

Upvotes: 1

Related Questions