DanielL_550

How would I convert this Javascript example from the "Programmer's Guide"/"Passing Data"/"Using the Crosstab Data Provider" to use the jQuery/JavaScript object syntax? var items = [ { "Name": "John", "Year": 2008, "Sales": 49027}, { "Name": "John", "Year": 2009, "Sales": 45815}, { "Name": "Robert", "Year": 2008, "Sales": 51489}, { "Name": "Robert", "Year": 2009, "Sales": 55652}, { "Name": "Mark", "Year": 2008, "Sales": 51924}, { "Name": "Mark", "Year": 2009, "Sales": 55075}, { "Name": "Kelly", "Year": 2008, "Sales": 55227}, { "Name": "Kelly", "Year": 2009, "Sales": 36160}, { "Name": "Brenda", "Year": 2008, "Sales": 54457}, { "Name": "Brenda", "Year": 2009, "Sales": 51719} ]; chart1.setGallery(cfx.Gallery.Bar); var fields = chart1.getDataSourceSettings().getFields(); var field1 = new cfx.FieldMap(); field1.setName("Name"); field1.setUsage(cfx.FieldUsage.RowHeading); fields.add(field1); var field2 = new cfx.FieldMap(); field2.setName("Year"); field2.setUsage(cfx.FieldUsage.ColumnHeading); fields.add(field2); var fieldVal = new cfx.FieldMap(); fieldVal.setName("Sales"); fieldVal.setUsage(cfx.FieldUsage.Value); fields.add(fieldVal); var crosstab = new cfx.data.CrosstabDataProvider(); crosstab.setDataSource(items); chart1.setDataSource(crosstab); Thank you.

That is great news. Thank you very much. The jsFiddle examples will make it much easier for us to develop our charts. If you look at Highcharts (http://www.highcharts.com/) they have linked their chart properties in their web documentation to jsFiddle examples and provided the jsFiddle examples for all of their demos. The example does work now. Thank you for fixing it. RealTimeCharts.zip

How would I add the following data using the jQuery/JavaScript object syntax using the Lines gallery for each series? Each set of data should result in a different line series. The X axis should display dates and times. The primary Y axis should show the pressures and a secondary Y axis should show the flows. How would I set up the arrays and associate each set of data with each different series? Notice that each series can have the same or different number of values. Series 1 "Casing Pressure" 2012-01-21T02:45:10.280Z 79 2012-01-26T03:45:10.280Z 82 2012-02-10T02:45:10.280Z 93 2012-02-19T03:45:10.280Z 102 2012-03-21T02:45:10.280Z 128 2012-03-29T03:45:10.280Z 134 Series 2 "Tubing Pressure" 2012-01-21T02:45:10.280Z 379 2012-01-26T03:45:10.280Z 582 2012-02-10T02:45:10.280Z 293 2012-02-19T03:45:10.280Z 5102 2012-03-21T02:45:10.280Z 4128 2012-03-29T03:45:10.280Z 6134 Series 3 "Water Flow" 2012-01-21T15:45:22.280Z 321 2012-02-19T16:45:11.280Z 293 2012-03-21T17:45:34.280Z 456 2012-03-22T18:45:45.280Z 563 2012-02-22T16:45:11.280Z 212 2012-03-23T18:45:34.280Z 611 2012-03-24T22:45:45.280Z 123 Series 4 "Yesterday Water Flow" 2012-01-21T01:45:22.280Z 311 2012-02-19T02:45:11.280Z 299 2012-03-21T03:45:34.280Z 433 2012-03-28T04:45:45.280Z 560 2012-03-29T05:22:11.280Z 111 Series 5 "Oil Flow" 2012-01-21T15:45:22.280Z 23 2012-02-19T16:45:11.280Z 43 2012-03-21T17:45:34.280Z 51 Series 6 "Yesterday Oil Flow" 2012-01-21T01:45:22.280Z 78 2012-02-19T02:45:11.280Z 132 2012-03-21T03:45:34.280Z 134 2012-03-24T04:45:45.280Z 356 Thank you.

It would be great if all jChartFx documentation had corresponding jsfiddle example links. It would make it much easier for users to see running examples. For instance, here is the example above in jsFiddle http://jsfiddle.net/BEGMf/ Many of the examples shown in the documentation for the jquery/javascript object syntax do not work. One example is the "Using JQuery" example shown in the "Getting Started" "Mapping Fields to Chart Elements" http://www.jchartfx.com/demo.aspx?ID=7b9aa32a-8d95-4e8d-943d-1e27e13b3297 The field options used are not the same as the "No JS Framework" example. When the options are added to the "Using JQuery" example, the chart just shows random data and does not show the real data. The "dataSource" property for the "Using JQuery" example does not seem to work. I had to change it to "dataValues" to get any data to display. What must be changed to make this example work?

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>