Jump to content
JChartFX Community
  • 0

jquery examples?


Doug

Question

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>

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>

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

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

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>

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...