DanielL_550
-
Posts
5 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by DanielL_550
-
-
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.
-
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
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>
How do I use the Crosstab Data Provider with the jQuery/JavaScript object syntax?
in jQuery/jQuery UI
Posted
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.