#7938

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>


To make the chart look right, the javascript calls (called by onbeforeprint) have to be applied on the print css, not on the normal website css.
<br/><br/><br/>

The chart is static content, generated by javascript, based on the css width of the page
<div id="chartdiv_useractivity"></div>	

This line scales right, because its not static.
<hr/>

CSS

#chartdiv_useractivity {
	width		: 50%;
	height		: 500px;
	font-size	: 11px;
}	

hr {
    width: 50%;
}

            @media print { 
                    #chartdiv_useractivity{
                        width: 100% !important;
                    }
    
                    hr{
                        width: 100%;
                    }
                                        
                 }

JavaScript

var chart2 = AmCharts.makeChart("chartdiv_useractivity",
    {
            "type": "serial",
            "pathToImages": "img/",
            "categoryField": "date",
            "dataDateFormat": "YYYY-MM-DD",
            "categoryAxis": {
                    "markPeriodChange": false,
                    "parseDates": true,
                    "autoGridCount": false,
                    "gridCount": 18
            },
            "chartCursor": {},
            "trendLines": [],
            "graphs": [
                    {
                            "bullet": "round",
                            "id": "AmGraph-1",
                            "title": "graph 1",
                            "valueField": "column-1",
                        "labelText": "[[value]]"
                    },
                    {
                            "bullet": "round",
                            "id": "AmGraph-2",
                            "title": "graph 2",
                            "valueField": "column-2",
                        "labelText": "[[value]]"
                    }

            ],
            "guides": [],
            "valueAxes": [
                    {
                            "id": "ValueAxis-1",
                            "title": "Playeramount realvalue"
                    }
            ],
            "allLabels": [],
            "balloon": {},
            "legend": {
                    "useGraphSettings": true
            },
            "titles": [
                    {
                            "id": "Title-20",
                            "size": 15,
                            "text": "Active Users"
                    }
            ],
            "exportConfig": {},
            "dataProvider": [
{"date": "2013-07-01", "column-2": "2" },{"date": "2013-08-01", "column-2": "2" },{"date": "2013-08-05", "column-1": "1" },{"date": "2013-09-01", "column-2": "5" },{"date": "2013-09-09", "column-1": "1" },{"date": "2013-10-01", "column-2": "2"...