Solved

jQplot Bar chart tick value

Posted on 2014-12-23
5
373 Views
Last Modified: 2015-01-02
I am using jqPlot to create a 4 quadrant chart.  Is there anyway I can make the 2 bottom charts show positive numbers.  I don't need the negative symbol in what I am trying to do.

4 quadrant
Any help/suggestion will be appreciated.

Thanks!
0
Comment
Question by:Isaac
  • 3
  • 2
5 Comments
 
LVL 25

Expert Comment

by:lenamtl
ID: 40521854
Hi,

Do you mean you want to display negative number without the minus -
or you want to display other values (positive value)?
0
 
LVL 5

Author Comment

by:Isaac
ID: 40522163
I want to display the negative number without the minus.  is that possible?
0
 
LVL 5

Author Comment

by:Isaac
ID: 40522181
Here's the HTML code:
<style>
#testTarget2, #testTarget4, #testTarget, #testTarget3{
	width:400px;
	height:400px;
}
#testTarget2, #testTarget4, #testTarget, #testTarget3{
float: left;
}
#testTarget {
clear: left;
}
}
</style>
  <div id="testTarget2" style="width:400px; height:400px;"></div>  
  <div id="testTarget4" style="width:400px; height:400px;margin-left:-17px"></div>
  
  <div id="testTarget" style="width:400px; height:400px;"></div>  
  <div id="testTarget3" style="width:400px; height:400px;margin-left:-17px"></div>

Open in new window



Here's the javascript code:
//------------------------------------------Quadrant 1 (Top Left)
    var s2 = [200, 600, 700, 350];
    var ticks = ['>15', '11-15', '6-10', '0-5'];
    var plot2 = $.jqplot('testTarget2', [s2], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true},
             pointLabels: {show: true}
        },
        series:[
            {label:'Airfare'}
        ],
            axesDefaults: {
        		showTicks: true,
        		showTickMarks: true       
    	},
        
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                showTicks: true,
        		showTickMarks: true
 
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                //tickOptions: {formatString: '$%d'},
                showTicks: false,
        		showTickMarks: false  
            }
        }
    });


//------------------------------------------Quadrant 2 (Top Right)
    var s4 = [95, 150, 135, 175];
    var ticks = ['1-5', '6-10', '11-15', '>15'];
     
    var plot4 = $.jqplot('testTarget4', [s4], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true},
             pointLabels: {show: true}
        },
        series:[
            {label:'Airfare'}
        ],        
            axesDefaults: {
        		showTicks: true,
        		showTickMarks: true       
    	},

        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,        		showTicks: true,
        		showTickMarks: true    
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                //tickOptions: {formatString: '$%d'},
                     // same options as axesDefaults
	            showTicks: false,        // wether or not to show the tick labels,
	            showTickMarks: false    // wether or not to show the tick marks

            }
        }
    });


//Quadrant 3 (Bottom left)
    var s1 = [-250, -350, -150, -500];
    var ticks = ['May', 'June', 'July', 'August'];
     
    var plot1 = $.jqplot('testTarget', [s1], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true},
             pointLabels: {show: true}
        },

        series:[

            {label:'Airfare'}
        ],   
            axesDefaults: {
        showTicks: false,
        showTickMarks: false       
    },
        
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            },

        }
    });


//------------------------------------------Quadrant 4 (bottom right)
 var s3 = [-700, -600, -250, -175];
    var plot3 = $.jqplot('testTarget3', [s3], {
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: {fillToZero: true},
             pointLabels: {show: true}
        },
        series:[
            {label:'Airfare'}
        ],
            axesDefaults: {
        showTicks: false,
        showTickMarks: false       
    },

        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks
            }
        }
    });

Open in new window

0
 
LVL 5

Author Comment

by:Isaac
ID: 40522201
0
 
LVL 25

Accepted Solution

by:
lenamtl earned 500 total points
ID: 40525452
You can try Math.abs(x)
which is convert negative number to positive

demo
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_abs
0

Featured Post

Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

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…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

830 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