Jump to content
JChartFX Community
  • 0
Doug

jquery examples?

Question

Would like to use this with jquery, but other than a brief example that I couldn't get to work in the documentation there is not any jquery examples.

Can anyone provide me with such and example?

TIA

Doug

Share this post


Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0

Here is an HTML for a small sample of JChartFX using JQueryUI:

<html>
<head>
    <title>jChartFX using JQueryUI</title>
   
    <style>
        #targetchart { width: 608px; height: 408px; padding: 4px; border: 1px solid #dddddd; background: #eeeeee }
        #targetchart h3 { text-align: center; margin: 0; }
 </style>
   
    <link type="text/css" href="Styles/jquery-ui-1.8.20.custom.css" rel="Stylesheet" />   
    <script type="text/javascript" src="Include/jquery.js">
    </script>
    <script type="text/javascript" src="Include/jquery-ui-1.8.20.custom.js">
    </script>       
    <script type="text/javascript" src="Scripts/jchartfx.system.js">
    </script>
    <script type="text/javascript" src="Scripts/jchartfx.coreBasic.js">
     </script>
    <script type="text/javascript" src="Scripts/jchartfx.advanced.js">
    </script>
    <script type="text/javascript" src="Scripts/jchartfx.ui.js">
    </script>
  

</head>
<body>
     <div class="ChartDiv1" id="targetchart" style="display:inline-block">
        <div id="myDiv" style="width:100%;height:100%;display:inline-block">
     </div>
     </div>

    
     <script language="javascript" type="text/javascript">
         var chart1;
         $(document).ready(function ($) {

            var items = [
            { "Sales": 2200, "Month": "Jan" },
            { "Sales": 1500, "Month": "Feb" },
            { "Sales": 2100, "Month": "Mar" },
            { "Sales": 2600, "Month": "Apr" },
            { "Sales": 3200, "Month": "May" },
            { "Sales": 3600, "Month": "Jun" },
        ];
             $("div", ".ChartDiv1").chart({
                 gallery: cfx.Gallery.Bar,                
                 titles : [{text: "<font color=\"#FF0000\">JChartFX using JQueryUI</font> ",richText: true}],                                 
                 dataValues: items,
                 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}]
                        },
             });
         });
     </script>

</body>
</html>

Share this post


Link to post
Share on other sites
  • 0

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>

Share this post


Link to post
Share on other sites
  • 0

This one works but seems to be extremely dependent on the version of jquery and jqueryui being used, as well as style sheets.

Perhaps you should publish the requirements before claiming compatibility with jquery.

 

Thanks,

Share this post


Link to post
Share on other sites
  • 0

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?

post-2107-1393974317367_thumb.jpg

Share this post


Link to post
Share on other sites
  • 0

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

Share this post


Link to post
Share on other sites
  • 0

Here is a quick and dirty php version of this example using a php array to define the data. Notice all the js is on the local source

 

<?php
$title = 'Mapping Fields to chart elements';
$xaxis='Date';
$yaxis='Open';
$min=22;
$max=26;

$dataz[0][$yaxis]=24.2;
$dataz[0][$xaxis]='2003-03-01T23:45:10.280Z';


$dataz[1][$yaxis]=21.3;
$dataz[1][$xaxis]='2003-03-02T23:45:10.280Z';

$dataz[2][$yaxis]=22.4;
$dataz[2][$xaxis]='2003-03-03T23:45:10.280Z';

$dataz[3][$yaxis]=24.3;
$dataz[3][$xaxis]='2003-03-04T23:45:10.280Z';

$dataz[4][$yaxis]=22.6;
$dataz[4][$xaxis]='2003-03-05T23:45:10.280Z';


foreach($dataz as $set){
$entries[]='{ "'.$yaxis.'": '.$set[$yaxis].', "'.$xaxis.'": "'.$set[$xaxis].'" }';   
    }
   
?><html>
<head>
    <title>jChartFX using JQueryUI</title>
  
    <style type="text/css">
        #targetchart { width: 608px; height: 408px; padding: 4px; border: 1px solid #dddddd; background: #eeeeee }
        #targetchart h3 { text-align: center; margin: 0; }
 </style>
     <link type="text/css" href="styles/custom.css"
        rel="Stylesheet" />

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery_ui.js"></script>
<script type="text/javascript" src="js/jchartfx.full.js"></script>
<script type="text/javascript" src="js/json.js"></script>



</head>
<body>
     <div class="ChartDiv1" id="targetchart" style="display:inline-block">
        <div id="myDiv" style="width:100%;height:100%;display:inline-block">
     </div>
     </div>

   
     <script language="javascript" type="text/javascript">
         var chart1;
         $(document).ready(function ($) {

             var items = [
             
             <?php
             $now_count=1;
             $countz= count($entries);
             foreach ($entries as $entry){
                 echo $entry;
                 if($now_count!=$countz){echo ',';};
                 $now_count++;
                 }
           ?>
        ];
             $("div", ".ChartDiv1").chart({
                 gallery: cfx.Gallery.Bar,
                 dataValues: items,
                 dataSourceSettings: {
                     fields: [{ name: "<?php echo $yaxis;?>", usage: cfx.FieldUsage.Value },

{ name: "<?php echo $xaxis;?>", usage: cfx.FieldUsage.XValue}]
                 },
                 titles: [{ text: "<?php echo $title;?>"}],
                 axisY:{
                    min:<?php echo $min;?>,
                    max:<?php echo $max;?>
                }
             });
         });
     </script>

</body>
</html>

Share this post


Link to post
Share on other sites
  • 0

thnx for the link to the jsfiddle example; explains a lot. 
if I follow that example I find a shift in the  two data ranges; the 5 values in the example are shown correct, the corresponding 'dates' are shifted.The first 'date is not showing at all..

What goes wrong here?

code behind.txt

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×