jquery examples?

Doug · February 14, 2013

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

angelr · February 15, 2013

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>

Doug · February 15, 2013

Thank you for your response.

Using your example above, gets me a javascript error.

uncaught exception: undefined

DanielL_550 · February 19, 2013

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>

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>

maddybucks · February 20, 2013

It'll be more convenient to us, if we have the online practice space here to see the instant output...

Doug · February 20, 2013

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,

DanielL_550 · February 21, 2013

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?

angelr · February 22, 2013

Following your recommendation, we are going to publish a jsfiddle for each one of our samples. We will keep you posted when all jsfiddle

DanielL_550 · February 22, 2013

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

brandonguy · March 10, 2014

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>

maries · April 10, 2014

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

jquery examples?

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation