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"
            onclick="load_home(this,'{!$Component.thePanel}');"/>
</apex:outputPanel>
<apex:outputPanel id="thePanel" layout="block">
</apex:outputPanel>

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.