?
Solved

jqChart - Trirand- x axis labels with dates

Posted on 2014-03-02
9
Medium Priority
?
996 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 111

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 111

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
A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

 

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
 
LVL 111

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 111

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

Is Your Team Achieving Their Full Potential?

74% of employees feel they are not achieving their full potential. With Linux Academy, not only will you strengthen your team's core competencies but also their knowledge of of the newest IT topics.

With new material every week, we'll make sure that you stay ahead of the game.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

801 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