The answer is going to be long so please allow me to post another one.
If the data need to be obtained dynamically, then you should look into "Providing Chart Data via a JavaScript Array" which allows you to get the data via controller and process it before you pass it to chart function.
Create a map in controller.
private static Map<String, Map<String,Integer>> data;
Assuming you retrieve month name and each product and its quantity from database one by one, put all data into the map. Please note that you will need sorting or some modification of the code to show the graph sorted by month.
public static Map<String, Map<String,Integer>> getChartData() {
data = new Map<String, Map<String,Integer>>();
//use a loop and edit the code below to putData(retrieved month name, retrieved quantity, retrieved product code);
for (AggregateResult ar: HERE IS YOUR QUERY ) {
data.putData(monthFromInteger(monthInt), Integer.valueOf(ar.get('quantityCount')), yourProductName);
}
return data;
}
private static void putData(String name, Integer quantity, String productCode){
Map<String,Integer> productGroup = new Map<String,Integer>();
if (data.containsKey(name)){
productGroup = data.get(name);
}
productGroup.put(productCode, quantity);
data.put(name, productGroup);
}
Once you have your data in a map, you can pass the values to javascript array using the method below.
<script>
// Build the chart data array in JavaScript
var data = new Array();
</script>
<apex:repeat value="{!data}" var="monthList">
<script type="text/javascript">
var product = {};
</script>
<apex:repeat value="{!data[monthList]}" var="productList">
{!monthList} {!productList} {!data[monthList][productList]}<br/>
<script type="text/javascript">
product['{!productList}'] = {!data[monthList][productList]};
product['name'] = '{!monthList}';
</script>
</apex:repeat>
<script type="text/javascript">
data.push(product);
</script>
</apex:repeat>
And pass the array to apex chart.
<apex:chart data="data" height="400" width="500">
<apex:legend position="left"/>
<apex:axis type="Numeric" position="left" title="title" grid="true"
fields="{!yfield}" dashSize="2">
<apex:chartLabel />
</apex:axis>
<apex:axis type="Category" position="bottom" fields="name">
<apex:chartLabel rotate="315"/>
</apex:axis>
<apex:barSeries orientation="vertical" axis="left"
xField="name" yField="{!yfield}" title="{!title}"/>
</apex:chart>
Hope this help!
Was able to successfully render an image in the header with the following:
<apex:page standardController="Opportunity" renderAs="pdf" applyBodyTag="false" standardStylesheets="false">
<head>
<style type="text/css" media="print">
@page {
margin-bottom: 1in;
margin-top: 1in;
@top-center {
content: element(header);
}
@bottom-left {
content: element(footer);
}
}
div.header {
padding: 0px;
position: running(header);
background-color: #f1f3f2;
}
div.footer {
display: block;
position: running(footer);
}
body { font-family: 'Arial Unicode MS'; padding: 0px;}
.companyName { font: bold 25px; color: #505053; }
footer {font: normal; font-size: 12px; color: #505053; }
h1 {font: normal; font-size: 30px; color: #505053;}
h2 {font: normal; font-size: 25px; color: #5F5F62;}
.colstyle {width: 75%}
.colstyle2 {width: 25%}
.line {color: #E72683;}
.footerline {color: black;}
disclaimer {font-style: italic; font-size: 12px; color: #505053; }
</style>
</head>
<div class="header">
<img src="{!$Resource.PDF_Header}" width="300" height="100"/>
</div>
<body>
<!-- rest of pdf code-->
Best Answer
You can get standard report charts, via a dashboard, into a pdf - I have this working for a client so I know this works.
What you need to do add the report +chart to a dashboard and then view the dashboard. Right click on a chart and open in new tab.
Copy the image url and paste into your pdf page into an img html component. This is an example I have working (ids changed to protect identity):-
Whats really interesting is that when the dashboard is refreshed, the chart is also refreshed and so although this is a static url, the chart is 'dynamic'.