jqChart - Trirand- x axis labels with dates

KCTechNet
KCTechNet used Ask the Experts™
on
I have a line chart that is being loaded from mySQL/PHP.  Each x-axis point is the first of the month, so Jan 2013, Feb 2013, etc... The tool-tips for the points all display the month correctly.  But the X-axis is not showing the months.  It starts off with 1 Jan for the first point, then 00:00:00.002, 00:00:00.004, etc.  I was given the following suggestion but it did not change anything:

$chart->setxAxis(array(
   "type"=> 'datetime',
   "dateTimeLabelFormats"=>array( 
      "month"=> "%e. %b",
      "year"=> "%b"
   )
));

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2011
Top Expert 2016

Commented:
Please post the script(s) that are giving you trouble and post a link to your test data so we can reproduce the issue and test any proposed solutions, thanks.

Author

Commented:
Sorry, I can't send a link as it is in a password protected website.  
I am trying to use:  http://www.trirand.net/demo/php/jqchart/

Here is all the code involved.  'Period' is a date field:
<?php
require_once 'jpSuitePHP/jq-config.php';
require_once ABSPATH."php/jqUtils.php";
require_once ABSPATH."php/jqGridPdo.php";
require_once ABSPATH."php/jqChart.php";
ini_set("display_errors","1");
$conn = new PDO(DB_DSN,DB_USER,DB_PASSWORD);

// Tell the db that we use utf-8
jqGridDB::query($conn,"SET NAMES utf8");

$sql = "Select fh.Period, dd.**
            From dealerdata dd
                    inner join fileHeader fh on dd.fileUID = fh.fileID
            Where dd.Dealer ='" .$dealerName. "'
            		and fh.Period between '" .$startPeriod. "' and '" .$endPeriod. "' 
            Order by Period";            

$chart = new jqChart($conn);
$chart->setChartOptions(array("defaultSeriesType"=>"line"));
$chart->setTitle(array('text'=> stripcslashes($dealerName)."-".$dealerCode ,"x"=>-20)) ;
$chart->setSubtitle(array("text"=>"Appointment Activity","x"=>-20)) ;
$chart->setLegend(array( "layout"=>"vertical","align"=>"right","verticalAlign"=>'top',"x"=>-10,"y"=>100,"borderWidth"=>0));
$chart->setyAxis(array("title"=>array("text"=>"# of Appointments"),"min"=>0));
/*
$chart->setxAxis(array("type"=>"datetime","tickInterval"=>7 * 24 * 3600 * 1000,"dateTimeLabelFormats"=>"%m/%y"));
$chart->setxAxis(array( "type"=>"datetime",
    "labels"=>array("formatter"=>"js:function(){return this.value;}") 
));

*/
$chart->setxAxis(array(
   "type"=> 'datetime',
   "startOnTick"=>true,
   "dateTimeLabelFormats"=>array(
      "month"=> "%b %Y"
   )
));

$chart->addSeries("Total Appts",str_replace("**", "Total_Appt_Set", $sql));
$chart->addSeries("DMS Appts",str_replace("**", "DMS_Appts", $sql));
$chart->addSeries("Xtime Appts",str_replace("**", "Total_Xtime_Appts", $sql));
$chart->addSeries("Phone Appts",str_replace("**", "Phone_Appts", $sql));
$chart->addSeries("CC Appts",str_replace("**", "CC_Appts", $sql));
$chart->addSeries("Web Appts",str_replace("**", "Web_Appts", $sql));
$chart->addSeries("% of Total",str_replace("**", "Total_Xtime_Percent_of_Total", $sql));
echo $chart->renderChart('',true,700, 350); 
?> 

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
can't send a link as it is in a password protected website
SSCCE

Please set that up so we can see the web page in action, thanks.

You might also want to post the code for the method called in this bit of code:

$chart->setxAxis(array(
   "type"=> 'datetime',
   "startOnTick"=>true,
   "dateTimeLabelFormats"=>array(
      "month"=> "%b %Y"
   )
));

Open in new window

Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
I finally got some advice from Trirand support but still struggling.  If I get it to work I will post the solution in case others can benefit.
Most Valuable Expert 2011
Top Expert 2016

Commented:
If you can give us some information we might be able to help.  But if it's all got to be kept a secret, then we can only guess, and that would just waste your time.  Looking at code that does not work is mostly unhelpful.  If we could see the data, and could see the method definition for setXAxis(), you might get a solution faster.
kept a secret?  I think we got off on the wrong foot?

I am using the php and js files included in trirand's plug in (i included a link in my original post).  I was hoping to find someone familiar with Trirand it since I just understand enough to go from the demo's they provide. But none of their examples on their website deals with working with dates from a recordset,

But here is what I ended up with in case anyone else has the same need:
$chart->setxAxis(array("type"=>"datetime", 
						"tickWidth"=>0,
            "labels"=>array( 
                "rotation"=> -45, 
                "align"=>"right", 
                "style"=>array("font"=>"normal 13px Verdana, sans-serif") 
              ),
						"tickInterval"=>30 * 24 * 3600 * 1000,
						   "dateTimeLabelFormats"=>array(
					      "month"=> "%b %Y"
					   )));

$sql = "Select fh.Period, Total_Appt_Set, DMS_Appts, Total_Xtime_Appts, Phone_Appts,
            CC_Appts, Web_Appts, Total_Xtime_Percent_of_Total 
            From dealerdata dd
                    inner join fileHeader fh on dd.fileUID = fh.fileID
            Where dd.Dealer ='" .$dealerName. "'
                and fh.Period between '" .$startPeriod. "' and '" .$endPeriod. "' 
            Order by Period";            

$res = mysql_query($sql);
while($row = mysql_fetch_assoc($res))
{
      $myPeriod=strtotime($row['Period'])*1000;
      $data1[]=array($myPeriod,(int)$row['Total_Appt_Set']);
      $data2[]=array($myPeriod,(int)$row['DMS_Appts']);
      $data3[]=array($myPeriod,(int)$row['Total_Xtime_Appts']);
      $data4[]=array($myPeriod,(int)$row['Phone_Appts']);
      $data5[]=array($myPeriod,(int)$row['CC_Appts']);
      $data6[]=array($myPeriod,(int)$row['Web_Appts']);
      $data7[]=array($myPeriod,(int)$row['Total_Xtime_Percent_of_Total']);
}

$chart->addSeries("Total Appts",$data1);
$chart->addSeries("DMS Appts",$data2);
$chart->addSeries("Xtime Appts",$data3);
$chart->addSeries("Phone Appts",$data4);
$chart->addSeries("CC Appts",$data5);
$chart->addSeries("Web Appts",$data6);
$chart->addSeries("% of Total",$data7);

Open in new window

Most Valuable Expert 2011
Top Expert 2016

Commented:
Glad you've got a good answer.  For my own understanding of the learning process, please tell me if I was unclear or was using unfamiliar terminology, because I want to be as clear as possible when I try to respond to questions here at EE.

Did you understand the SSCCE?

Did you understand "the method definition for setXAxis()?"

If I should have explained these concepts in different terms, I would like to know that!

Thanks and regards, ~Ray

Author

Commented:
yes, I understood.  thank you.  however, since I am using Trirand's js and php files (and they are min so impossible to read) I don't have access to look at the setxAxis method other than going to their online documentation. but basically that method was having issues with it being in a date format.  after I used strtodate it started working.

Author

Commented:
Trirand eventually responded to a post I made in their forum that pointed me to the right direction.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial