Jump to content
JChartFX Community

brandonguy

Members
 View Profile  See their activity

  • Posts

    1

  • Joined

  • Last visited

 Content Type 

Posts posted by brandonguy

  1. jquery examples?

    in jQuery/jQuery UI

    Posted

    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>

×
×
  • Create New...