[How do I use the Crosstab Data Provider with the jQuery/JavaScript object syntax?]

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.

[jquery examples?]

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

[Adding multiple series data with the jQuery/JavaScript object syntax]

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.

[jquery examples?]

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?

[jquery examples?]

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>