Exporting Issue HighCharts Line CHart with Export server for ASP.NET about highcharts-export-module-asp.net HOT 13 CLOSED

Hi,

Unfortunately, we can't do so much for you. It looks like a rendering problem and we're not the one who wrote the rendering library. Maybe you can't try to get help here:
https://github.com/vvvv/SVG/tree/master/Samples

from highcharts-export-module-asp.net.

Hi,

i have same problem, would you help us to solve our problem? i'm using svg.dll

from highcharts-export-module-asp.net.

Hi Netrumble,

Did you try solution provided by imclem? I am also facing dame export issue.

Thanks,

from highcharts-export-module-asp.net.

I'm also seeing this...

from highcharts-export-module-asp.net.

Hi

I have the same issue with Line charts, Do you have any updates on the issue?

Please help.

Thanks
Kalyan

from highcharts-export-module-asp.net.

My question here is that why we are using this option as ItextSharp is not free.

from highcharts-export-module-asp.net.

Hi @imclem,

We tried phantomjs by passing svg but output is not good and it same output provided by @Netrumble in case of line chart.

from highcharts-export-module-asp.net.

Hi All

I am not sure if any of you got the answer but I thought to share my approach which fixed it.

I converted the SVG string in to an XML Document and removed the nodes that got created with stroke value as "rgba(192,192,192,0.002)"

Thanks
Kalyan

from highcharts-export-module-asp.net.

Care to expound or share your code? Thank you for your effort!
On Jun 11, 2014 9:45 AM, "kalyangriet" [email protected] wrote:

Hi All

I am not sure if any of you got the answer but I thought to share my
approach which fixed it.

I converted the SVG string in to an XML Document and removed the nodes
that got created with stroke value as "rgba(192,192,192,0.002)"

Thanks
Kalyan

—
Reply to this email directly or view it on GitHub
#24 (comment)
.

from highcharts-export-module-asp.net.

Sure.

Step 1: Collect HighChart's SVG in to a hiddenfield on click of my export button using chart.getSVG(). In my case, i had multiple charts on screen.. so i have gathered all charts SVG's using a separator.

if(objType == 'excel' || objType == 'pdf')
{
var objHdnSVG = document.getElementById('<%=hdnSVG.ClientID %>');
objHdnSVG.value = '';

            var allHighCharts = Highcharts.charts;
            var chartCntr = allHighCharts.length;
            for(var chartCnt = 0; chartCnt < chartCntr; chartCnt++)
            {
                var chart = allHighCharts[chartCnt];
                if(chart != undefined)
                {
                    if(objHdnSVG.value == '')
                        objHdnSVG.value = chart.getSVG();
                    else
                    {
                        objHdnSVG.value = objHdnSVG.value + '|' + chart.getSVG();
                    }
                }
            }

}

Step 2: In my Export event in code behind, I am calling my private method "ConvertSVGtoImages()" which splits the SVGs and process each of them:

void excelExport()
{
ConvertSVGtoImages();
}

Step 3: Here is the ConvertSVGtoImages() method:

private void ConvertSVGtoImages()
{
uniqueStr = Guid.NewGuid().ToString("N");
string[] strSVG = hdnSVG.Value.Split('|');
int width = 1000;
int cntr = 0;

    for(int svgNbr = 0; svgNbr< strSVG.Length; svgNbr++)
    {            
        string eachSVG = strSVG[svgNbr];
        XmlDocument xmlDoc = new XmlDocument();
        xmlDoc.LoadXml(eachSVG);
        XmlDocument xmlDoc = new XmlDocument();
        xmlDoc.LoadXml(eachSVG);

        foreach (XmlNode xmlnode in xmlDoc.ChildNodes[0].ChildNodes)
        {
                //To remove the unwanted thick stroke from Line chart - start
                if (xmlnode.Attributes["class"] != null && xmlnode.Attributes["class"].Value == "highcharts-series-group")
                {                        
                    foreach (XmlNode childNode in xmlnode.ChildNodes)
                    {
                        if (childNode.Attributes["class"] != null && childNode.Attributes["class"].Value == "highcharts-series")
                        {
                            foreach (XmlNode strokedNode in childNode.ChildNodes)
                            {
                                if (strokedNode.Attributes["stroke"] != null && strokedNode.Attributes["stroke"].Value == "rgba(192,192,192,0.002)")
                                {
                                    childNode.RemoveChild(strokedNode);
                                }
                            }

                        }
                    }
                }
                //To remove the unwanted thick stroke from Line chart - end
            }
            eachSVG = xmlDoc.InnerXml;
            xmlDoc = null;

CreateSvgDocument(eachSVG, width).Draw().Save(Server.MapPath(@"\ChartImages\chart_" + uniqueStr + cntr + ".png"));
cntr++;
}

Last Step: CreateSVGDocuments method:

private SvgDocument CreateSvgDocument(string svg, int width)
{
SvgDocument svgDoc;

    // Create a MemoryStream from SVG string.
    using (MemoryStream streamSvg = new MemoryStream(
      Encoding.UTF8.GetBytes(svg)))
    {
        // Create and return SvgDocument from stream.
        svgDoc = SvgDocument.Open(streamSvg);
    }

    // Scale SVG document to requested width.
    svgDoc.Transforms = new SvgTransformCollection();
    float scalar = 1; //(float)width / (float)svgDoc.Width;
    svgDoc.Transforms.Add(new SvgScale(scalar, scalar));
    svgDoc.Width = new SvgUnit(svgDoc.Width.Type, svgDoc.Width * scalar);
    svgDoc.Height = new SvgUnit(svgDoc.Height.Type, svgDoc.Height * scalar);
    return svgDoc;
}

Hope this helps. Let me know in case of any questions.

Thanks
Kalyan

from highcharts-export-module-asp.net.

Thanks kalyangriet, very clever code, it's working now.

from highcharts-export-module-asp.net.

Using Highcharts 4.0.3 (was using 4.0.1 before) solved this for me....

from highcharts-export-module-asp.net.

Using Highcharts 4.0.3 Fix Issue

from highcharts-export-module-asp.net.