Try this one. It should give you two charts.
<!DOCTYPE html> <html> <head> <title>jChartFX using JQueryUI</title> <link type="text/css" href="http://www.jchartfx.com/styles/css/jquery-ui-1.8.18.custom.css" rel="Stylesheet" /> <link type="text/css" href="http://www.jchartfx.com/resources/Include/cupertino/jquery-ui-1.8.21.custom.css" rel="Stylesheet" /> <script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-1.7.1.js"></script> <script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery-ui-1.8.18.custom.min.js"></script> <script type="text/javascript" src="http://www.jchartfx.com/jChartFX/7.0.4728.16930/jchartfx.full.js"></script> <script type="text/javascript" src="http://www.jchartfx.com/scripts/jquery.json-1.3.min.js"></script> </head> <body> <div class="ChartDiv1" id="ChartDiv1" style="width: 800px; height: 600px;"> </div> <div style="margin-top: 20px;"> </div> <div class="ChartDiv2" id="ChartDiv2" style="width: 800px; height: 600px;"> </div>
<script language = "javascript" type = "text/javascript">
var chart1; $(document).ready(function ($) { var items1 = [{ "Sales": 2200, "Month": "Jan" }, { "Sales": 1500, "Month": "Feb" }, { "Sales": 2100, "Month": "Mar" }, { "Sales": 2600, "Month": "Apr" }, { "Sales": 3200, "Month": "May" }, { "Sales": 3600, "Month": "Jun" }]; $("#ChartDiv1").chart({ gallery: cfx.Gallery.Bar, titles: [{ text: "<font color=\"#FF0000\">JChartFX using JQueryUI</font> ", richText: true }], dataValues: items1, allSeries: { pointLabels: { visible: true } }, axisY: { grids: { major: { visible: false, tickMark: cfx.TickMark.None }, minor: { visible: false, tickMark: cfx.TickMark.None } }, customGridLines: [{ value: 2533, text: "Avg" }], sections: [{ from: 0, to: 900 }] } });
var items2 = [{ "Date": "2012-01-21T23:45:10.280Z", "Pressure": 7 }, { "Date": "2012-01-26T23:45:10.280Z", "Pressure": 8 }, { "Date": "2012-02-10T23:45:10.280Z", "Pressure": 9 }, { "Date": "2012-02-19T23:45:10.280Z", "Pressure": 10 }, { "Date": "2012-03-21T23:45:10.280Z", "Pressure": 12 }, { "Date": "2012-03-29T23:45:10.280Z", "Pressure": 13 }, { "Date": "2012-04-10T23:45:10.280Z", "Pressure": 14 }, { "Date": "2012-04-19T23:45:10.280Z", "Pressure": 14 }, { "Date": "2012-05-10T23:45:10.280Z", "Pressure": 15 }, { "Date": "2012-05-19T23:45:10.280Z", "Pressure": 16 }, { "Date": "2012-06-21T23:45:10.280Z", "Pressure": 7 }, { "Date": "2012-06-26T23:45:10.280Z", "Pressure": 8 }, { "Date": "2012-07-10T23:45:10.280Z", "Pressure": 9 }, { "Date": "2012-07-19T23:45:10.280Z", "Pressure": 10 }, { "Date": "2012-08-21T23:45:10.280Z", "Pressure": 12 }, { "Date": "2012-08-29T23:45:10.280Z", "Pressure": 13 }, { "Date": "2012-09-10T23:45:10.280Z", "Pressure": 14 }, { "Date": "2012-09-19T23:45:10.280Z", "Pressure": 14 }, { "Date": "2012-10-21T23:45:10.280Z", "Pressure": 7 }, { "Date": "2012-10-26T23:45:10.280Z", "Pressure": 8 }, { "Date": "2012-11-10T23:45:10.280Z", "Pressure": 9 }, { "Date": "2012-11-19T23:45:10.280Z", "Pressure": 10 }, { "Date": "2012-12-21T23:45:10.280Z", "Pressure": 12 }, { "Date": "2012-12-29T23:45:10.280Z", "Pressure": 13 }];
$("#ChartDiv2").chart({ view3D: { enabled: true, rotated: true, angleX: 30, angleY: -20, boxThickness: 10, depth: 160, shadow: cfx.Shadow.fixed }, titles: [{ text: "Harvey Well" }], dataValues: items2, series: [{ gallery: cfx.Gallery.Lines, color: "#801702D1", text: "Casing Pressure", markerShape: cfx.MarkerShape.None, markerSize: 8, pointLabels: { visible: true } }], axisY: { min: 0, max: 30, title: { text: "Pressure (PSI)" } }, legendBox: { dock: cfx.DockArea.Bottom, visible: true, contentLayout: cfx.ContentLayout.Center }, dataGrid: { visible: true } }); });
</script>
</body> </html>