Solved

jqChart - Trirand- x axis labels with dates

Posted on 2014-03-02
9
960 Views
Last Modified: 2014-03-09
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

0
Comment
Question by:KCTechNet
  • 5
  • 4
9 Comments
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39900230
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.
0
 

Author Comment

by:KCTechNet
ID: 39902264
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

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39903670
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

0
 

Author Comment

by:KCTechNet
ID: 39904150
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.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39904336
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.
0
 

Accepted Solution

by:
KCTechNet earned 0 total points
ID: 39905414
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

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 39906172
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
0
 

Author Comment

by:KCTechNet
ID: 39908399
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.
0
 

Author Closing Comment

by:KCTechNet
ID: 39915663
Trirand eventually responded to a post I made in their forum that pointed me to the right direction.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now