如何添加自定义日期范围以显示fusionchart?

时间:2014-01-27 09:34:42

标签: javascript php datepicker fusioncharts

我在php中制作折线图我想添加自定义日期,其中我选择开始日期和结束日期,并根据日期显示图表,我是如何做到这一点的? 这是我的代码:

 <?php
 $title='Product Management';
 include("merchantheader.php");
 include("DBConn.php");
 include("FusionCharts.php");
 $link = connectToDB();
 $strQuery="select Distinct DATE_FORMAT(transactions.transaction_date,'%c-%d-%Y') as transaction_date,sum(amount)as Amount from transactions group by  DATE_FORMAT(transactions.transaction_date,'%c-%d-%Y')";
    $result = mysql_query($strQuery) or die(mysql_error());
    $strXML = "<chart caption='Reports of transactions' showValues='0' useRoundEdges='1' palette='3'>";
    while($ors = mysql_fetch_assoc($result)){
    //Generate <set label='..' value='..' />
    $strXML .= "<set label='" .$ors['transaction_date'] ."' value='" . $ors['Amount'] ."' />";
    }
    //free the result set
    //mysql_free_result($result);
    //mysql_close($link);
    //Finally, close <chart> element
    $strXML .= "</chart>";

    //date_default_timezone_set($_SESSION['timezone']);
?>
<?php /*?><textarea ><?php print_r($strXML); ?></textarea><?php */?>    
    <!-- Include FusionCharts.js to provide client-side interactivity -->
    <script type="text/javascript" src="<?=MURL?>/Charts/FusionCharts.js"></script>  
    <link href="<?=MURL?>/assets/ui/css/style.css" rel="stylesheet" type="text/css" /> 
    <script type="text/javascript" src="<?=MURL?>/assets/ui/js/jquery.min.js"></script>
<script type="text/javascript" src="<?=MURL?>/assets/ui/js/lib.js">  </script>     
   <link rel="Stylesheet" type="text/css" href="<?=MURL?>/css/jpicker-1.1.6.min.css" />
<link rel="Stylesheet" type="text/css" href="<?=MURL?>/css/jPicker.css" />
<script src="<?=MURL?>/js/jpicker-1.1.6.min.js" type="text/javascript"></script>
  <div id="chartContainer">
 <?php
 FC_SetRenderer('javascript');
 echo renderChart('Charts/Line.swf', // Path to chart type
                '',         // Empty string when using Data String Method
                $strXML,    // Variable that contains XML string
                'Tracking', // Unique chart ID
                '850', '400', // Width and height in pixels
                false,      // Disable debug mode
                true        // Enable 'Register with JavaScript' (Recommended)
            );

&GT?;

我想制作自定义日期范围,如下图所示:

enter image description here

1 个答案:

答案 0 :(得分:1)

如果您愿意显示某些数据点的日期而不是所有数据点的日期,您可以将“labelStep”属性设置为XML数据的图表元素中的某个值“n”,您可以通过该属性选择显示每个第n个标签。

然而,根据你的截屏,第三个标签“11月”不会以规则的间隔出现,这是'n'的倍数。因此,对于这种情况,您需要以编程方式放置条件并在元素中将“showLabel”属性设置为“1”,同时生成图表XML字符串。