Welcome Guest Search | Active Topics |

Axis flipping supported?
Options
Previous Topic Next Topic
dan
#1 Posted : Friday, December 14, 2012 10:11:40 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Does jqchart support flipping on the x-axis so that the graph is a mirror image of the default orientation?

Sometimes having 0 at the bottom of a y-axis and large positive numbers at the top counters interpretation of the data.

Eg. a line chart with rank on the y-axis and time on the x-axis. Series that hit ranks of 1, 2, 3 are actually the highest ranked series, though intuition says lines that approach 0 at the bottom of the chart are the least. It would be nice if the axis were flipped so they could approach 0 at the top of the graph.

If not supported, is the suggested workaround to make all the values negative, then clip off the '-' before displaying it anywhere?
Back to top
Ivan
#2 Posted : Friday, December 14, 2012 10:13:56 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
Is the reversed scale what you are looking for?

http://www.jqchart.com/jquery/chart/ChartAxes/ReversedScale
Best,
Ivan Petrov
jqChart Inc.
Back to top
dan
#3 Posted : Friday, December 14, 2012 11:42:25 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Exactly. Thanks!
Back to top
dan
#4 Posted : Friday, December 14, 2012 5:51:56 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Though there seems to be a bug if the y-axis title is set (unlike the example you provided).

When reversed is set to true and there is an axis title, some of the tick mark labels and the axis title will occupy the same space, making them illegible.
Back to top
Ivan
#5 Posted : Monday, December 17, 2012 3:03:28 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
Can you provide us your code, so we can look at this? I'm trying reproducing this issue, but in my test it looks ok.
Best,
Ivan Petrov
jqChart Inc.
Back to top
dan
#6 Posted : Thursday, December 27, 2012 3:10:48 PM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Ivan wrote:
Can you provide us your code, so we can look at this? I'm trying reproducing this issue, but in my test it looks ok.


Here is some completely butchered code, but it demonstrates the y-axis title/label overlap problem. Normally the source data and other chart details are fetched from the server but I've hard-coded it all here.

Also, please note another bug when "logrithmic:true," is uncommented: The chart is drawn correctly but the data points are not present, nor does mouseover work.


Code:

<html>
  <head>
<link rel="stylesheet" type="text/css" media="screen" href="/static/jquery/ui/css/custom-theme/jquery-ui-1.8.20.custom.css" />
<style>html, body {
    margin: 0;
    padding: 0;
    font-size: 75%;
    background-color:inherit;
    color:white;
    height: 100%;
    width: 1190px;
}
.ui-jqchart { position: relative; }
.ui-jqchart .ui-jqchart-tooltip {
    font-family: Segoe UI, Arial, sans-serif;
    position: absolute;
    white-space: nowrap;
    padding: .2em .4em;
    z-index: 9999;
    border: 1px solid #dddddd;
    color: #333333;
    background: white;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -o-box-shadow: 0 0 5px #aaa;
    -moz-box-shadow: 0 0 5px #aaa;
    -webkit-box-shadow: 0 0 5px #aaa;
    box-shadow: 0 0 5px #aaa;
}
* html .ui-jqchart .ui-jqchart-tooltip { background-image: none; }
body .ui-jqchart .ui-jqchart-tooltip { border-width: 2px; }
</style>
<script src="/static/jquery/1.8/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="/static/jquery/jqchart/js/jquery.jqChart.min.js" type="text/javascript"></script>
<script src="/static/jquery/ui/js/jquery-ui-1.8.20.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">

function formatToolTip() {
  return '<b>' + this.x + '<b>: ' + this.y + ' ';
}
function formatLabels() {
  return '<b>' + this.point.x + '<b>: ' + this.y + ' ';
}

var line_data = [];

function build_data()
{
  dataset1 = new Array();
    datapoint = new Array();
    datapoint.push(new Date('Thu Sep 27 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(38);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Fri Sep 28 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(14);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sat Sep 29 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(438);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sun Sep 30 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(440);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Mon Oct 01 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(537);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Tue Oct 02 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(533);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Wed Oct 03 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(534);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Thu Oct 04 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(636);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Fri Oct 05 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(738);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sat Oct 06 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(838);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sun Oct 07 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(887);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Mon Oct 08 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(916);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Tue Oct 09 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(937);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Wed Oct 10 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1041);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Fri Oct 19 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1203);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sat Oct 20 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1241);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Sun Oct 21 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1344);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Mon Oct 22 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1439);
    dataset1.push(datapoint);
    datapoint = new Array();
    datapoint.push(new Date('Tue Oct 23 2012 00:00:00 GMT+0100 (GMT Summer Time)'));
    datapoint.push(1726);
    dataset1.push(datapoint);

  series1={"data": dataset1,
        "markers":{"size": 3},
        "title": "Series 1",
        "type":"Line",
       }
 
  line_data.push(series1);
  update_chart();
}

function update_chart() {
  $('#chart').jqChart({
    title: get_title_theme(),
    animation: animation_theme,
    height: 600,
    width: 1000,
    background: background_theme,
    legend: legend_theme,
    axes: [
        {type: 'dateTime',
         location: 'bottom',
         strokeStyle: '#AAAAAA',
         majorTickMarks: {strokeStyle: '#AAAAAA'},
         labels: {strokeStyle: undefined,
                  fillStyle: '#AAAAAA',
                  angle: -30,
                  hoursIntervalStringFormat: 'mmm d HH:MM',
                  daysIntervalStringFormat: 'd mmmm yyyy',
                  weeksIntervalStringFormat: 'd mmmm yyyy',
                  monthsIntervalStringFormat: 'mmmm yyyy',
                  yearsIntervalStringFormat: 'yyyy'}},
        {type: 'linear',
         lineWidth: 0,
         location: 'left',

         //logarithmic: true,

           reversed: true,

         majorTickMarks: {lineWidth: 0},
         minorGridLines: {lineWidth: 1},
         labels: {strokeStyle: undefined,
                  fillStyle : '#AAAAAA',
                  lineWidth: 1},
         title: {text: 'Axis Label Here',
                 strokeStyle: undefined,
                 fillStyle: '#AAAAAA'}}],
    paletteColors : palette_theme,
    watermark: watermark_theme,
    series: line_data,
    tooltips: {background: 'white'}
  });
  $('#chart').bind('tooltipFormat', function (e, data) {
      var tooltip = '<span style="font-size:150%;"><span style="color:'+data.series.fillStyle+';">'+data.series.title+': </span><span style="color:black;">' + data.y + '</span></span>';
      return tooltip;
  });
}

function get_title_theme(){
  return {
      text: 'Sample chart',
      strokeStyle: undefined,
      font: '15px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif',
      fillStyle: 'white',
      lineWidth: 1
  };
}
var animation_theme = {
      delayTime: 0,
      duration: 0.1
    };
var background_theme = {
      type: 'linearGradient',
      x0: 0,
      y0: 0,
      x1: 0,
      y1: 1,
      colorStops: [{offset:0, color: '#606060'}, {offset:1, color: '#101010'}]
    };
var legend_theme = {
      visible: true,
      font: '12px sans-serif',
      textFillStyle: 'white',
      textStrokeStyle: undefined,
      textLineWidth: 1,
      background: 'black',
      border: { lineWidth: 1, strokeStyle: 'white' }
   };
var palette_theme = {
       type: 'customColors',
       customColors: ['#960B59', '#E2188B', '#C4488C', '#F067A6', '#F179AF', '#F49CC4', '#E70379', '#F067A6', '#A71D67', '#FF56AA', '#800244', '#FEAFD7', '#FE83C4', '#FF2BAD', '#FF72E7', '#FF60A0', '#FF91DC', '#FF7595']
    };
var watermark_theme = {
      text: 'www.companywebsite.com',
      fillStyle: 'rgba(255,255,255,0.5)',
      font: '14px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif',
      hAlign: 'right',
      vAlign: 'bottom'
};

$(document).ready(function() {
  build_data();
});
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
Back to top
 |  Edit by user
Ivan
#7 Posted : Friday, December 28, 2012 6:22:34 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
Thank you for the sample.

Try using this version:
www.jqchart.com/tests/jqChartJQueryPlugin_3_6_1_0.zip

and let me know if everything is working like expected.
Best,
Ivan Petrov
jqChart Inc.
Back to top
dan
#8 Posted : Friday, December 28, 2012 8:22:08 AM(UTC)
Rank: Member

Groups: Registered
Joined: 10/22/2012(UTC)
Posts: 12

Thanks: 2 times
Was thanked: 0 time(s) in 0 post(s)
Ivan wrote:
Thank you for the sample.

Try using this version:
www.jqchart.com/tests/jqChartJQueryPlugin_3_6_1_0.zip

and let me know if everything is working like expected.


Thanks, this version fixes both issues.
I will need the non-trial build of this so that the custom watermark appears properly, though.
Back to top
Ivan
#9 Posted : Friday, December 28, 2012 9:07:50 AM(UTC)
Rank: Administration

Groups: Administrators, Moderator, Registered
Joined: 11/5/2012(UTC)
Posts: 131

Thanks: 0 times
Was thanked: 15 time(s) in 15 post(s)
We've sent you an email about this.
Best,
Ivan Petrov
jqChart Inc.
Back to top
Users browsing this topic
Guest (3)
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

FlatEarth Theme by Jaben Cargman (Tiny Gecko)
Powered by YAF 1.9.4 | YAF © 2003-2010, Yet Another Forum.NET
This page was generated in 0.224 seconds.