Get linear distribution on jqplot line chart ticks - javascript

I would like to provide tickInterval on jqPlot chart renderer to get linear distribution on xaxis.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
} PlotChart(chartData);
jsfiddle example
Above is an example of the chart how it currently look.
I would like to provide the points 1, 5, 10, 15, 20 on the xaxis (tickInterval - 5) and in relation to 1,3,5,15 plots needs to be in coordinate plane to map the values [[1, 224], [3, 672], [5, 1120],[15,2240]]
Where currently its distributed as per the xticks which is uneven. Any help is welcome!
I tried to get it using min/max and tickInterval property, but seems like its not coming up fine.

If you want to provide tickIntervals on your x-axis then you can do it this way.
$.jqplot.config.enablePlugins = true;
var chartData = [[1, 224], [3, 672], [5, 1120],[15,2240]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', [chartData], {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
renderer: $.jqplot.CanvasAxisLabelRenderer,
rendererOptions: {
smooth: true
},
pointLabels: {
show: true
}
},
axes: {
xaxis: {
label: 'Number of Cookies',
min:0,
max:20,
tickInterval:5,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%d'
}
},
yaxis: {
label: 'Calories',
tickOptions: {
formatString: '%.2f'
}
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData);
jsFiddle link
You can calculate min, max and tickInterval before plotting the graph.
I hope this helps.

By NOT using renderer: $.jqplot.CategoryAxisRenderer you'll get it going your way

Related

How animate pie chart jqplot?

I use jqplot and make a pie chart.
How I can animate it?
My code:
$(document).ready(function () {
jQuery.jqplot.config.enablePlugins = true;
plot = jQuery.jqplot('chart', [
[
['a', 32.1],
['b', 17.0]
]
], {
seriesColors: ["#ff0070", "#00557d"],
seriesDefaults: {
shadow: false,
renderer: jQuery.jqplot.PieRenderer,
rendererOptions: {
fill: false,
sliceMargin: 10,
showDataLabels: true,
startAngle: 120,
dataLabelThreshold: 5,
dataLabelPositionFactor: 0.6
}
},
legend: {
show: true
}
});
});
How can I animate open this chart on circle?

Highcharts: xAxis with vertical gridlines

I need to create a line chart where the xAxis would show vertical gridlines instead of horizontal ones, just like in "charts: {inverted: true}" case (example on the screen below).
vertical gridlines effect
Unfortunately, that solution isnt' entirely accurate because it switches the order of the data as well, so in fact the Distance scale ends up at the side of the chart, while it should be at the bottom of it, like here:
proper data order but with horizontal gridlines
My question is: is there a way to make gridlines display vertically without switching the order of the data?
Here's the exemplary chart from Highcharts demo, where I would like to change the display of the gridlines:
$(function () {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
labels: {
formatter: function () {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
labels: {
formatter: function () {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [[0, 15], [10, -50], [20, -56.5], [30, -46.5], [40, -22.1],
[50, -2.5], [60, -27.7], [70, -55.7], [80, -76.5]]
}]
});
PS I would prefer not to tamper with the order of the data that's being passed to the function.
Have you consider using xAxis.gridLineWidth and xAxis.gridLineColor parameters?
http://api.highcharts.com/highcharts/xAxis.gridLineWidth
http://api.highcharts.com/highcharts/xAxis.gridLineColor
$(function() {
$('#container').highcharts({
chart: {
type: 'spline',
inverted: false
},
xAxis: {
reversed: false,
gridLineWidth: 1,
labels: {
formatter: function() {
return this.value + 'km';
}
},
},
yAxis: {
title: {
text: 'Temperature'
},
gridLineWidth: 0,
labels: {
formatter: function() {
return this.value + '°';
}
},
},
legend: {
enabled: false
},
series: [{
name: 'Temperature',
data: [
[0, 15],
[10, -50],
[20, -56.5],
[30, -46.5],
[40, -22.1],
[50, -2.5],
[60, -27.7],
[70, -55.7],
[80, -76.5]
]
}]
});
});
Here you can see an example how it can work:
http://jsfiddle.net/r3wd8j7t/1/

Hide 0 valued stack bar in stacked bar chart of JQPlot

I am generating stacked bar chart using JQPlot where few stacks could have O values. my requirement is that I don't want to show O level of that stat which value is 0. please let me know what JQPLOT API I should use for that
My Code :
function getChart2()
{
var s1 = [32.40, 80.00, 80.00, 16.94, 72.12, 78.10, 80.00];
var s2 = [0.00, 12.34, 3.68, 0.00, 0.00, 0.00, 15.67];
var ticks = ['A', 'B', 'C', 'D','E','F','G'];
plot3 = $.jqplot('chartdiv', [s1, s2], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
fillToZero: true, barDirection: 'horizontal'
},
pointLabels: {show: true}
},
axes: {
xaxis: {
pad: 1.05,
tickOptions: {formatString: '%.2f %'},
formatter:function() {if(this.x > 0.00) {
return this.x;
} }
},
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
}
I used hideZeros:true option for this and it is working now.
pointLabels: {show: true,hideZeros:true,labelsFromSeries:true,xpadding: 6}
Hey guys thanks for helping me
I managed to solve my problem
i used it for to solve my problem:
stackSeries: true,
captureRightClick: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true,
barWidth: 40,
},
pointLabels: {
show: true,
formatString: '%s',
formatter: function val(x, y) {
//my Solution
if (y != 0)
return y.toString().toHHMMSS();
},
},
},

Is it possible to make this graph using jqplot?

Is it possible to make the graph using jqplot, as given below? The closest possible graph to this is stacked but using that coloring as well as point labels are a problem.
This jsfiddle contains my effort to make this bar chart along with it's legend and point labels. So is it possible to make it look like the image.
var barchart = $.jqplot('chart1', [s1, s2, s3], {
animate: true,
grid: {
background: 'white',
drawBorder:false,
shadow: false
},
seriesColors: ['#73C6E8', '#F28570', '#727272'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 20,
barWidth: 25,
barMargin:10,
fillToZero: true
},
pointLabels: { show: true }
},
series: [
{ label: 'USA' },
{ label: 'India' },
{ label: 'South Africa' }
],
legend: {
show: true,
placement: 'outsideGrid',
location:'se',
background:'white',
border: 'white',
fontFamily: 'Gotham Medium',
fontSize:'12px',
renderer: $.jqplot.EnhancedLegendRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:xticks,
showTicks:false
},
yaxis: {
pad: 1.05,
ticks: yticks,
showTicks:false,
rendererOptions: {drawBaseline: false}
}
}
});
I believe it would be much easier to achieve with highchart: http://www.highcharts.com/demo/column-stacked
This is only stack bar example you customize everything, legend, color, size, label, etc etc.
good luck

JqPlot- How to decrease the width of grids and ticks

I am trying to deploy barchart using jqplot. Now How to decrease the width of grids and ticks?
I have removed the gridline by setting showGridline to false, But its still showing vertically.
My screen.
I want the x-axis ticks to appear something like this.
my js code.
$(document).ready(function () {
var s1 = [10, 20, 30, 40];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 15
}
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});
May be someone can help?
To remove the gridlines, apply below property on both x-axis and y-axis:
tickOptions: {
showGridline: false
}
In you code you have set the barWidth to 15px. before drawing the graph please make sure the width of the div is no less more than the number of x-axis tixks * 15 (approx).
or
Adjust the width of each bar at runtime based on the width of your div.
Here is the example which solves your problem:
JsFiddle link
HTML Code:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:310px; height:300px;"></div>
Js code:
$(document).ready(function () {
var s1 = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var plot1 = $.jqplot('chart1', [s1], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 2,
barWidth: 25
},
shadow: false
},
grid: {
drawBorder: false,
background: '#ffffff',
// CSS color spec for background color of grid
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
markSize: 4
}
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
pad: -1.05,
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {
showGridline: false
}
},
yaxis: {
pad: 1.05,
tickOptions: {
formatString: '%d',
showGridline: false
}
}
}
});
});

Categories

Resources