CODEWITHSUNDEEP
javascriptchartsamcharts
NawazSE
NawazSE

Reputation: 613

amcharts configure the generated chart with a title and background color to be exported as PDF

Using Amcharts, I am able to generate the chart for my dynamic response-data. but while exporting it as PDF, it's downloading with white background only( i want it in green background though). I have set the background for the chart div using CSS, which works well in the UI. But while downloading it, the background gets white.

Also I would need to add the title to chart exported as PDF (Like: 'Monthly ABC Status' from 01/08/2018 To 31/08/2018).

Here is my code : JSFiddle

   var chartData = [ {
  "country": "USA",
  "visits": 4025,
  "color": "#FF0F00"
}, {
  "country": "China",
  "visits": 1882,
  "color": "#FF6600"
}, {
  "country": "Japan",
  "visits": 1809,
  "color": "#FF9E01"
}, {
  "country": "Germany",
  "visits": 1322,
  "color": "#FCD202"
}, {
  "country": "UK",
  "visits": 1122,
  "color": "#F8FF01"
}, {
  "country": "France",
  "visits": 1114,
  "color": "#B0DE09"
}, {
  "country": "India",
  "visits": 984,
  "color": "#04D215"
}, {
  "country": "Spain",
  "visits": 711,
  "color": "#0D8ECF"
}, {
  "country": "Netherlands",
  "visits": 665,
  "color": "#0D52D1"
}, {
  "country": "Russia",
  "visits": 580,
  "color": "#2A0CD0"
}, {
  "country": "South Korea",
  "visits": 443,
  "color": "#8A0CCF"
}, {
  "country": "Canada",
  "visits": 441,
  "color": "#CD0D74"
}, {
  "country": "Brazil",
  "visits": 395,
  "color": "#754DEB"
}, {
  "country": "Italy",
  "visits": 386,
  "color": "#DDDDDD"
}, {
  "country": "Australia",
  "visits": 384,
  "color": "#999999"
}, {
  "country": "Taiwan",
  "visits": 338,
  "color": "#333333"
}, {
  "country": "Poland",
  "visits": 328,
  "color": "#000000"
} ];


var chart = AmCharts.makeChart( "chartdiv", {
  "theme": "light",
  "type": "serial",
  "backgroundColor":"green",
  "dataProvider": chartData,
  "categoryField": "country",
  "depth3D": 20,
  "angle": 30,

  "categoryAxis": {
    "labelRotation": 90,
    "gridPosition": "start"
  },

  "valueAxes": [ {
    "title": "Visitors"
  } ],

  "graphs": [ {
    "valueField": "visits",
    "colorField": "color",
    "type": "column",
    "lineAlpha": 0.1,
    "fillAlphas": 1
  } ],

  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonEnabled": false
  },

  "export": {
    "enabled": true
  }
} );

Any suggestions would be highly appreciated !

Upvotes: 1

Views: 1019

Answers (1)

xorspark
xorspark

Reputation: 16012

You have to set the backgroundColor in the export config to make it work:

export: {
  // ...
  backgroundColor: "#008855", //replace with your color
  // ...
}

As for the title, one way you can set it is by creating a pdfMake property containing your new content: 

"pdfMake": {
    "content": [ "'Monthly ABC Status' from 01/08/2018 To 31/08/2018" , {
        "image": "reference", //exported image
        "fit": [ 523.28, 769.89 ] // fit image to A4
    } ]
}

Demo below:

var chartData = [{
  "country": "USA",
  "visits": 4025,
  "color": "#FF0F00"
}, {
  "country": "China",
  "visits": 1882,
  "color": "#FF6600"
}, {
  "country": "Japan",
  "visits": 1809,
  "color": "#FF9E01"
}, {
  "country": "Germany",
  "visits": 1322,
  "color": "#FCD202"
}, {
  "country": "UK",
  "visits": 1122,
  "color": "#F8FF01"
}, {
  "country": "France",
  "visits": 1114,
  "color": "#B0DE09"
}, {
  "country": "India",
  "visits": 984,
  "color": "#04D215"
}, {
  "country": "Spain",
  "visits": 711,
  "color": "#0D8ECF"
}, {
  "country": "Netherlands",
  "visits": 665,
  "color": "#0D52D1"
}, {
  "country": "Russia",
  "visits": 580,
  "color": "#2A0CD0"
}, {
  "country": "South Korea",
  "visits": 443,
  "color": "#8A0CCF"
}, {
  "country": "Canada",
  "visits": 441,
  "color": "#CD0D74"
}, {
  "country": "Brazil",
  "visits": 395,
  "color": "#754DEB"
}, {
  "country": "Italy",
  "visits": 386,
  "color": "#DDDDDD"
}, {
  "country": "Australia",
  "visits": 384,
  "color": "#999999"
}, {
  "country": "Taiwan",
  "visits": 338,
  "color": "#333333"
}, {
  "country": "Poland",
  "visits": 328,
  "color": "#000000"
}];


var chart = AmCharts.makeChart("chartdiv", {
  "theme": "light",
  "type": "serial",
  "backgroundColor": "green",
  "dataProvider": chartData,
  "categoryField": "country",
  "depth3D": 20,
  "angle": 30,

  "categoryAxis": {
    "labelRotation": 90,
    "gridPosition": "start"
  },

  "valueAxes": [{
    "title": "Visitors"
  }],

  "graphs": [{
    "valueField": "visits",
    "colorField": "color",
    "type": "column",
    "lineAlpha": 0.1,
    "fillAlphas": 1
  }],

  "chartCursor": {
    "cursorAlpha": 0,
    "zoomable": false,
    "categoryBalloonEnabled": false
  },

  "export": {
    "enabled": true,
    "backgroundColor": "#008855",
    "pdfMake": {
      "content": ["'Monthly ABC Status' from 01/08/2018 To 31/08/2018", {
        "image": "reference", //exported image
        "fit": [523.28, 769.89] // fit image to A4
      }]
    }
  }
});
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#chartdiv {
  width: 100%;
  height: 100%;
  background-color: #008855;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>

The github readme has most of the information pertaining to the plugin and this advanced tutorial has more information on how to customze the layout to include more than just one chart. The plugin uses pdfMake for its PDF export functionality, so the pdfMake documentation is another useful resource for layout information.

Upvotes: 2

Related Questions