Get series Label name to display as a text - jqplot

I have a bar chart. Please find the below code of the bar chart. Also find the attached image which is the result of the given script.
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [14, 9, 3, 8];
var tickx = ["aaa", "bbb", "ccc"];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
highlightMouseDown: true
},
pointLabels: {show: true}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickx
}
}
});
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
On right click on the bar it will display the value of right clicked bar.
You Right Clicked: series: 2, point: 1, data: 2,9.
Here, the value 2 in the data value (data: 2,9) is the xaxis series number. Instead of series name i would like to get the tick used in the chart.
In this above script tick given is : ["aaa", "bbb", "ccc"];
I want the output displayed as
if the user clicks the series 1 axis. result should be
You Right Clicked: series: 2, point: 1, data: 1,7, series label: aaa.
Please help me to achieve this. Thanks in advance.
Regards,
Antony

Read my comment above. If you are after the xaxis category position on the right-click, use this:
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data + ' category label: ' + plot3.axes.xaxis.ticks[pointIndex]);
}
);
In your event handler.

Related

When i use highcharts then my DataTable lost his functionality.

I use jquery.dataTables.min.js for Data table..
then i try to use highcharts. but when i put highcharts code in document ready function then dataTable lost his functionality.. such as search box, scroll, design.
$(function() {
/*For Highcharts*/
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'my_chart',
type: 'line'
},
title: {
text: 'Monthly National Trend of SOMA-JECT Administration'
},
xAxis: {
categories: ['January', 'February', 'March']
},
yAxis: {
title: {
text: 'No. of SOMA-JECT Administration'
}
},
series: [{
name: 'Soma-JECT',
data: [1, 0, 4]
}, {
name: 'Sayana PRESS',
data: [5, 7, 3]
}]
});
/*For Data Table*/
$('#example').DataTable({
scrollX: true
});
});
Try to change order of scripts. highcharts scripts move to bottom of dataTable scripts then may be everything is OK.

How to show Profit or loss percentage for each month in a bar chart?

I have a bar chart where the first three series represent the expenses and the last series represent the revenue. I want to show the profit or loss for each month in percentage. Below is the image of current graph.
Here is my code for the same.
var s1 = [27362, 45273, 77020, 42059, 23764, 12803];
var s2 = [15920, 30220, 32800, 21900, 19500, 17300];
var s3 = [4100, 1800, 7150, 3600, 2400, 2400];
var s0 = [27208, 46371, 169374, 114879, 35692, 37669];
var ticks = ['March', 'April', 'May', 'June', 'July', 'August'];
$.jqplot.config.enablePlugins = true;
var plot3 = $.jqplot('chart1', [s1, s2, s3, s0], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
location: 'n',
},
rendererOptions: {
fillToZero: true,
barPadding: 0,
barMargin: 0,
barWidth: 55,
barDirection: 'vertical',
},
},
series: [
{
label: 'Equipment',
color: '#c5b47f'
},
{
label: 'Salaries',
color: '#eaa228'
},
{
label: 'O&M',
color: '#4bb2c5'
},
{
label: 'Revenue',
color: '#579575',
disableStack: true
}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I want it to show the profit or loss as shown below
I'm trying to achieve this by three different approaches.
1) First approach is with pointLabels. With pointLabel I have to use 'stackedValue:true' which does not give me individual value of the series in a stack. Secondly, the position of the pointLabel is above the stacked bar and not above the group.
2) Second approach is to add a trendline. But the problem is y-axis values are in absolute number and the values of the trendline will be in percentage. Is it possible to show the percentage series in the same chart ?
2) Third approach is to calculate the % profit or loss for each month and then display it by inserting a div into the graph for each month. Sounds tricky but is it feasible ?
Any different approach from your side most welcome.

Is it possible to have reqular bar and stacked bar in the same jqPlot chart?

I am trying to build a bar chart where 1st series represent the revenue and the next three represent different kind of expenses. So 1st series to be a single bar and the rest three series as stacked bar. Here is my code for the same.
var s0 = [15, 17, 19, 21];
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
var ticks = ['May', 'June', 'July', 'August'];
var plot3 = $.jqplot('chart1', [s0, s1, s2, s3], {
stackSeries: true,
animate: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
},
rendererOptions: {
fillToZero: true,
barMargin: 30,
barWidth: 50,
barPadding: 5,
barDirection: 'vertical'
},
},
series: [
{
disableStack: true,
label: 'Revenue'
},
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3'}
],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
fontSize: '13pt'
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
}
},
legend: {
show: true,
location: 'e',
placement: 'outside'
}
});
I have addded disableStack: true for the first series to exclude it from the stack but the chart still considers it as a part of the stack. Here is the output of my code.
Is there a way to fix this ? Thanks.
Yes. It is the order of the series you pass as argument that is not correct.
BEFORE the stacked series
AFTER the single bar series
and not viceversa...
So you have to move the first series as the last argument...
var plot3 = $.jqplot('chart', [s1, s2, s3, s0], {
and then you need to set the disableStack property on 'true' for the last series...
series: [
{label: 'Expense1'}, {label: 'Expense2'}, {label: 'Expense3',label: 'Revenue', disableStack: true}
],
...and you need to adjust the margins, widts and padding of the columns
as you prefer...

how to animate the move of a point from a position to another in a HighCharts scatterplot

In a HighCharts scatterplot I want to move a point from its position to another one using a smooth animation.
For example, in the scatteplot defined in the following code (jfiddle link):
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
min: -0.5,
max: 5.5
},
yAxis: {
min: 0
},
title: {
text: 'Scatter plot with regression line'
},
series: [{
type: 'scatter',
name: 'Observations',
data: [[1, 1.5], [2.8, 3.5], [3.9, 4.2]],
marker: {
radius: 4
}
}]
});
});
});
I want to move the first point from (1,1.5) to (2,2). Is it possible?
Yes, use point.update.
This accepts point options as parameter, so you can pass x and y values.
Take a look the following code:
chart.series[0].points[0].update({x: 2, y: 2});
Pass an object as the third parameter with your animation options, you can see the options on the refference section.
chart.series[0].points[0].update({x: 2, y: 2}, true, {duration: 500, easing: 'linear'});
Reference:
http://api.highcharts.com/highstock#Point.update()
animation types
Demo

jqplot text labels on y-axis

I'm trying to make a Gantt like chart in jqplot. I want to make two timelines in the same plot. As you can see by the code and jsFiddel, I've got this working for the most part.
I've added a few series manually (and added a series config) ofcourse this will be in a loop later.
The problem I have now is that on the Y-axis I don't want numbers, but the text labels of the series ("contact" and "Locatie"). It would be nice if this is done dynamically, but 'hardcoding' them is not a problem since I only need two at the moment.
I can't find an example that does this. Any ideas?
here's the jsFiddle: http://jsfiddle.net/NVbjv/1/
var seriesCnf = Array();
var loc = Array();
// add location values
loc.push([[1340877534000, 1, 'lagehaghorst'] , [1340877569000, 1, 'lagehaghorst' ]]);
seriesCnf.push({color: "#941B80", label: "Locatie"});
loc.push([[1340877779000, 1, 'weegnet'] , [1340877869000, 1, 'weegnet' ]]);
seriesCnf.push({color: "#941B80"});
loc.push([[1340877989000, 1, 'lagehaghorst'] , [1340878139000, 1, 'lagehaghorst' ]]);
seriesCnf.push({color: "#941B80"});
// add ignition values
loc.push([[1340877534000, 2, 'uit'], [1340877561000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false, label: "Contact"});
loc.push([[1340877561000, 2, 'aan'], [1340877779000, 2, null]]);
seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
loc.push([[1340877779000, 2, 'uit'], [1340877839000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false});
loc.push([[1340877839000, 2, 'aan'], [1340878019000, 2, null]]);
seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
loc.push([[1340878019000, 2, 'uit'], [1340878139000, 2, null]]);
seriesCnf.push({color: "#FF0000", showMarker:false});
plot1 = $.jqplot('container', loc,{
seriesColors: ["#941B80"],
title: "Tijdlijn",
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
formatString: '%R',
angle: 0
},
},
yaxis: {
min: 0,
tickInterval: 1,
}
},
seriesDefaults: {
showMarker:true,
pointLabels:{
show:true,
location:'s',
labelsFromSeries: true,
formatter: $.jqplot.DefaultTickFormatter,
}
},
series: seriesCnf,
grid: {
background: '#ffffff'
}
});

Resources