+ Start a Discussion
Nethra RaghupathyNethra Raghupathy 

Dynamically creating charts in visualforce using javascript

I'm trying to create different charts based on user selection. I tried implementing it in visual force using javascript innerhtml. Below is my visualforce segment which holds the checkbox, which on selection displays the chart in "thepanel" outputPanel.
<apex:outputPanel layout="block">
        <label for="checkbox">line chart</label>
        <input id="checkbox" type="checkbox"
<apex:outputPanel id="thePanel" layout="block">
Javascript function:
function load_home(input, textid){
               if(input.checked) {                   
                   document.getElementById(textid).innerHTML='<apex:chart height="400" width="700" data="{!Data}"><apex:axis type="Numeric" position="left" fields="data1" title="Opportunities Closed" grid="true"/><apex:axis type="Category" position="bottom" fields="name" title="Month of the Year"></apex:axis><apex:lineSeries axis="left" fill="true" xField="name" yField="data1" markerType="cross" markerSize="4" markerFill="#FF0000"/></apex:chart>;
Apex code:
public List<Data> getData() {
        return FileUploader.getChartData();
public static List<Data> getChartData() {
        List<Data> data = new List<Data>();
        data.add(new Data('Jan', 30, 90, 55));
        data.add(new Data('Feb', 44, 15, 65));
        data.add(new Data('Mar', 25, 32, 75));
        data.add(new Data('Apr', 74, 28, 85));
        data.add(new Data('May', 65, 51, 95));
        data.add(new Data('Jun', 33, 45, 99));
        data.add(new Data('Jul', 92, 82, 30));
        data.add(new Data('Aug', 87, 73, 45));
        data.add(new Data('Sep', 34, 65, 55));
        data.add(new Data('Oct', 78, 66, 56));
        data.add(new Data('Nov', 80, 67, 53));
        data.add(new Data('Dec', 17, 70, 70));
        return data;
Function in the controller is called and the data list is returned but its not displaying in visualforce page.
James LoghryJames Loghry
Instead of sticking the chart inside of the javascript variable / DOM, use the "rerender" attribute of the apex:chart component, which will get rerendered via an actionFunction tag called by your onclick event instead.  For more on how actionFunction works, see this document: https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_actionFunction.htm