Hi Harish,

Have you taken a look at http://www.fusioncharts.com/javascript-chart-fiddles/?type=zoomline-chart ?  They have a few JS fiddle examples.

If you're on 7.2.2 or newer, you can create a new control using the below code snippet and then you'll need to add your data to the data object of the json.

<pega:choose>  
<pega:when test="pxRequestor.pyPegaDesignMode != 'true'">  
<%--Include the chart JS files--%>  
  
<% com.pega.pegarules.priv.desktop.reporting.chart.theme.SkinTheme themeInfo = com.pega.pegarules.priv.desktop.reporting.chart.theme.SkinThemeFactory.getSkinTheme(tools); %>  
  
<pega:onlyonce name="pzCKChartScripts">  
  <pega:static app="webwb" type="script">  
    <pega:bundle name="pzpega_chart_scripts" />  
    <pega:file name="<%=themeInfo.getThemeFile() %>" />  
  </pega:static>  
</pega:onlyonce>  
  
<%   
String uniqueId = "CUSTOMCHART"+Long.toString(((com.pega.pegarules.priv.context.PegaRequestor) tools.getRequestor()).currentTimeUnique());  
%>  
  
<%--Generate div that will hold the chart--%>  
<div data-ctl="[&quot;Chart&quot;]" id="<%=uniqueId%>"  style="width:100px;height:300px" data-loadmode="auto" data-chartsubtype="zoomline" data-charttype="custom" data-library="fusion"></div>  
  
<%--Initialize the chart using pxChart's initializer--%>  
<script>  
  if(typeof window.Charts.fusionChartTypes["custom"] == 'undefined'){  
  window.Charts.fusionChartTypes["custom"] = new Object();  
  }  
  /* "custom" and "pie" correspond to the "data-charttype" and "data-chartsubtype" attributes in div for the chart */  
  window.Charts.fusionChartTypes["custom"]["zoomline"] = 'zoomline';  
  
  
  Charts.initSingleChart('<%=uniqueId%>',{sourcedata:{  
/* 
Replace this comment with JSON used to render the chart. 
            "chart": { 
                "theme": "<%=themeInfo.getThemeName() %> 
          
            }, 
            "data": [ 
                ... 
            ] 
*/  
  }});  
</script>  
</pega:when>  
<pega:otherwise>  
Pie chart  
</pega:otherwise>  
</pega:choose>