when I draw chart using jqplot, both end point of the chart does not show label, and I am not sure why. Please help
Here is my code (self-contained code, with all resources loaded)
<html>
<head>
</head>
<body>
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]]}" class="soluongdonhangngay170" style="display:none;">
<div style="height: 550px" class="soluongdonhangngay170170" />
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/org.richfaces.resources/javax.faces.resource/org.richfaces/jquery.js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jquery.jqplot.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.dateAxisRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.categoryAxisRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.logAxisRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasTextRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisTickRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.canvasAxisLabelRenderer.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.highlighter.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.pointLabels.js?ln=js"></script>
<script type="text/javascript" src="http://app.fahasa.com:8084/ReportEngine/faces/javax.faces.resource/jqplot/jqplot.enhancedLegendRenderer.js?ln=js"></script>
<script>
jQuery(function(){
var labels = ["Đơn Hàng Theo Ngày"];
alert(jQuery(".soluongdonhangngay170").val());
displayLineChartWithToggleLegend($(".soluongdonhangngay170").val(),$(".soluongdonhangngay170170"), labels, "Số Lượng Đơn Hàng Ngày");
});
function displayLineChartWithToggleLegend(data, target, label, chartTitle){
if(data === "") return;
var chartJsonData = $.parseJSON(data);
var dataPlot = chartJsonData.data;
var ticks = chartJsonData.tick;
var showPointLabel = true;
if(chartJsonData.data.length > 4){
showPointLabel = false;
}
target.jqplot(dataPlot, {
title: chartTitle,
animate: true,
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
seriesDefaults: {
showMarker: true
},
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
placement: "outsideGrid",
labels: label,
location: "ne",
rowSpacing: "5px",
rendererOptions: {
// set to true to replot when toggling series on/off
// set to an options object to pass in replot options.
seriesToggle: 'normal',
seriesToggleReplot: {resetAxes: true}
}
},
axes: {
xaxis: {
label: 'Date',
ticks: ticks,
tickInterval: 20,
tickOptions: {
showGridline: false,
angle: -60,
fontFamily: 'Helvetica',
fontSize: '8pt'
},
}
},
grid: {
drawBorder: false,
shadow: false,
// background: 'rgba(0,0,0,0)' works to make transparent.
background: "white"
},
series: [
{
pointLabels: {
show: showPointLabel
},
rendererOptions: {
// speed up the animation a little bit.
// This is a number of milliseconds.
// Default for a line series is 2500.
animation: {
speed: 2000
},
smooth: true
}
}
]
});
target.bind('jqplotDataMouseOver', function(ev, seriesIndex, pointIndex, data) {
var idx = seriesIndex;
$('tr.jqplot-table-legend').removeClass('legend-row-highlighted');
$('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
$('tr.jqplot-table-legend').eq(idx).addClass('legend-row-highlighted');
var dateFull = chartJsonData.dateFull;
$(this).find(".jqplot-title").html(dateFull[data[0] - 1][1] + " - " + data[1]);
$('tr.jqplot-table-legend').eq(idx).children('.jqplot-table-legend-label').addClass('legend-text-highlighted');
});
target.bind('jqplotDataUnhighlight', function(ev, seriesIndex, pointIndex, data) {
$('tr.jqplot-table-legend').removeClass('legend-row-highlighted');
$('tr.jqplot-table-legend').children('.jqplot-table-legend-label').removeClass('legend-text-highlighted');
$(this).find(".jqplot-title").html(chartTitle);
});
}
</script>
</body>
</html>
I have this issue before but my X-Axis values was numbers and fixed it by adding ratio (Adjustment) about 20% from the max value to just gain more space and that did the trick Here I recommend you to add one more value in the X Values(X Ticks) without a related Value in the Y Values (ticks) to extend (add more space) the X Axis (if you have the same issue with Y Axis use the same technique) Have a look Here on Plunker
<input id="dashboardForm:j_idt49:4:hiddenChartData" type="text" name="dashboardForm:j_idt49:4:hiddenChartData" value="{"data":[[843,1312,745,683,832,829,772,740,792,672,550,323]],"dateFull":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"],[13,"13/06"]],"tick":[[1,"01/06"],[2,"02/06"],[3,"03/06"],[4,"04/06"],[5,"05/06"],[6,"06/06"],[7,"07/06"],[8,"08/06"],[9,"09/06"],[10,"10/06"],[11,"11/06"],[12,"12/06"]**,[13,"13/06"]**]}" class="soluongdonhangngay170" style="display:none;">
Hope this help.
You need to enable highlighter with this code in your target.jqplot(dataPlot, {...}) call...
highlighter: {
show: true,
sizeAdjust: 7.5
},
Use this CSS to style your tooltip ;)
.jqplot-highlighter-tooltip {
background: #fff;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.5);
padding: 2px 3px;
}
Hope that helps ;)
I was facing a similar issue with the data labels not displaying at the edge of my trends.
One solution is to increase the edgeTolerance in the jqplot.pointLabels.js file from the default (-10) to the desired value:
$.jqplot.PointLabels = function(options) {
...
// prop: edgeTolerance
// Number of pixels that the label must be away from an axis
// boundary in order to be drawn. Negative values will allow overlap
// with the grid boundaries.
this.edgeTolerance = -1000;
...
$.extend(true, this, options);
};
Related
I have created a chart using the HighCharts javascript library, the problem I have is that my y-Axis labels are cut by the Y-Axis vertical line. I would like to add more space in the y-axis label gutter area to allow for the labels to be fully visible and so i can add some annotations to the in that area, see image below:
Ideally I would like to add 40px, to the Y-Axis gutter. I have read through the api reference and tried using "yAxis.labels.padding", "yAxis.margin" and "yAxis.offset".
My code is as follows:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#container {
height: 400px;
width: 350px;
}
.highcharts-tick{display: none;}
.highcharts-grid-line{opacity: 0.2}
</style>
</head>
<body>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div id=container2></div>
<script type="text/javascript">
$(function() {
const options = {
chart: {
backgroundColor: '#1B191B', // Background Color
type: 'line',
zoomType: "",
},
rangeSelector : {
enabled: false,
selected : 2,
inputEnabled: false
},
title: {
text: 'APPLE INC', // Title of the Chart
align: 'left',
style: {
color: '#dedbde', // Custom CSS for the title
fontWeight: 'bold'
}
},
scrollbar: { enabled: false },
exporting: {
enabled: false
},
yAxis: {
lineWidth: 2,
tickWidth: 1,
labels: {
style: {
color: '#dedbde'
},
align: 'right',
},
opposite: true,
offset: -1
},
xAxis: {
labels: {
style: {
color: '#dedbde'
}
},
gridLineWidth: 1,
},
navigator: {
enabled: false
},
series: [{
name: 'AAPL Stock Price',
data: [],
type: 'areaspline',
threshold: null,
color: '#5861B3',
tooltip: {
valueDecimals: 2
},
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}]
}
const url = 'https://demo-live-data.highcharts.com/aapl-c.json'
const chart = Highcharts.stockChart('container', options)
$.getJSON(url, function(data) {
chart.series[0].setData(data)
// Execute callback
if (chart.options.chart.events && chart.options.chart.events.dataLoad) {
const dataLoad = chart.options.chart.events.dataLoad.bind(chart)
dataLoad(data)
}
})
})
</script>
</body>
</html>
Been banging my head around this for while, but I cant seem to figure it out any help would be very much appreciated. Thanks
In Highstock, the yAxis is inverted by default, so aligning the labels is reversed as well.
The only thing you need to change is setting yAxis.labels.align to 'left'.
Demo:
https://jsfiddle.net/BlackLabel/10ae8g9d/
I trying to get highcharts to draw a linked graph. It works when I have not so much data in my data set. Now I have tried to put a dataset with ~30.000 points. I see the mouse over with the points, but the line is not plot?
I have read about turboThreshold: and have set it to turboThreshold: 40000 but it does still not plot the line??
Any ideas what I do wrong?
/Jesper
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.chart {
min-width: 200px;
max-width: 1250px;
height: 350px;
margin: 0 auto;
}
</style>
<!-- http://doc.jsfiddle.net/use/hacks.html#css-panel-hack -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
</style>
<title>Highcharts Demo</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<script type='text/javascript'>//<![CDATA[
/*
The purpose of this demo is to demonstrate how multiple charts on the same page can be linked through DOM and Highcharts events and API methods. It takes a standard Highcharts config with a
small variation for each data set, and a mouse/touch event handler to bind the charts together.
*/
/**
* In order to synchronize tooltips and crosshairs, override the
* built-in events with handlers defined on the parent element.
*/
$('#container').bind('mousemove touchmove touchstart', function (e) {
var chart,
point,
i,
event;
for (i = 0; i < Highcharts.charts.length; i = i + 1) {
chart = Highcharts.charts[i];
event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
point = chart.series[0].searchPoint(event, true); // Get the hovered point
if (point) {
point.highlight(e);
}
}
});
/**
* Override the reset function, we don't need to hide the tooltips and crosshairs.
*/
Highcharts.Pointer.prototype.reset = function () {
return undefined;
};
/**
* Highlight a point by showing tooltip, setting hover state and draw crosshair
*/
Highcharts.Point.prototype.highlight = function (event) {
this.onMouseOver(); // Show the hover marker
this.series.chart.tooltip.refresh(this); // Show the tooltip
this.series.chart.xAxis[0].drawCrosshair(event, this); // Show the crosshair
};
/**
* Synchronize zooming through the setExtremes event handler.
*/
function syncExtremes(e) {
var thisChart = this.chart;
if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
Highcharts.each(Highcharts.charts, function (chart) {
if (chart !== thisChart) {
if (chart.xAxis[0].setExtremes) { // It is null while updating
chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, { trigger: 'syncExtremes' });
}
}
});
}
}
// Get the data. The contents of the data file can be viewed at
// https://github.com/highcharts/highcharts/blob/master/samples/data/activity.json
$.getJSON('http://vels.dk/beer/getdata.php?name=velsdk002', function (activity) {
$.each(activity.datasets, function (i, dataset) {
// Add X values
dataset.data = Highcharts.map(dataset.data, function (val, j) {
return [activity.xData[j], val];
});
$('<div class="chart">')
.appendTo('#container')
.highcharts({
chart: {
marginLeft: 40, // Keep all charts left aligned
spacingTop: 20,
spacingBottom: 20
},
title: {
//text: dataset.name,
text: null,
align: 'left',
margin: 0,
x: 30
},
credits: {
enabled: false
},
legend: {
enabled: false
},
xAxis: {
type: 'datetime',
crosshair: true,
events: {
setExtremes: syncExtremes
}
},
yAxis: {
title: {
text: dataset.name
},
opposite: true, //flytter skala til højre
labels: {
align: 'left',
x: 0,
y: -2
},
plotLines: [{
value: dataset.min,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Final Gravity - XX SG',
x: 30
}
}, {
value: dataset.max,
color: 'grey',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Estimated Starting Gravity - XX SG',
x: 30
}
}]
},
plotOptions: {
series: {
turboThreshold: 40000,
marker: {
enabled: false
}
}
},
series: [{
data: dataset.data,
name: dataset.name,
type: dataset.type,
color: Highcharts.getOptions().colors[i],
fillOpacity: 0.3,
tooltip: {
valueSuffix: ' ' + dataset.unit
}
}]
});
});
});
//]]>
</script>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "None"
}], "*")
}
</script>
</body>
</html>
I tried this code for changing the color of -260 range value, but it is not working. For this i used the scripts :
<script type="text/javascript" src="../js/jqplot/jquery.min.js"></script>
<script type="text/javascript" src="../js/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../js/jqplot/jqplot.categoryAxisRenderer.min.js "></script>
<script type="text/javascript" src="../js/jqplot/jqplot.barRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/jquery.jqplot.min.css" />
This is the render script that i used to change the color. In this script, $.jqplot.ColorGenerator is not working properly.
<script>
var s1 = [460, -260, 690, 820];
$(document).ready(function() {
// Can specify a custom tick Array.
// Ticks should match up one for each y value (category) in the series.
var ticks = ['May', 'June', 'July', 'August'];
$.jqplot.ColorGenerator = function(P) {
if (this.idx == null)
this.idx = -1; // keep track of our idx
this.next = function()
{
this.idx++; // get the next color
if (s1[this.idx] < -200) // is the value in our data less 200
return 'red';
else
return 'blue';
}
this.get = function() // this is not used but it needed to be defined
{
return 'blue';
}
}
var plot1 = $.jqplot('chart1', [s1], {
animate: true,
animateReplot: true,
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true,
animation: {speed: 2500},
varyBarColor: true,
useNegativeColors: false
}
},
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[
{label:'Hotel'},
{label:'Event Regristration'},
{label:'Airfare'}
],
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid'
},
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
// 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'}
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
linePattern: 'dashed',
name: "threshold",
y: -250,
color: "#d4c35D",
shadow: false,
showTooltip: true,
tooltipFormatString: "Threshold=%'d",
showTooltipPrecision: 0.5
}}
]
}
});
});
</script>
I want to get the correct x axis label when user zooms the chart and click on a specific bar
when clicking on the bar on (02/14/14 - xaxis) the alert shows the (02/19/14 - xaxis) label.
It returns the correct date when the zoom(selection) is not firing. but after zooming the chart and clicking on the bar it populate a wrong date.
I am new to flot charts. please help me. thanks.
[<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Stack Zoom Click</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="plot.css" rel="stylesheet" type="text/css">
<link href="master.css" rel="stylesheet" type="text/css">
<!--\[if lte IE 8\]><script language="javascript" type="text/javascript" src="excanvas.min.js"></script><!\[endif\]-->
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.valuelabels.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.stack.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.time.js"></script>
<script language="javascript" type="text/javascript" src="jquery.flot.selection.js"></script>
<script type="text/javascript">
$(function() {
var dataset = \[{
data: \[
\[1391279400000, -588\],\[1391365800000, -1324\],\[1391452200000, -1525\],\[1391538600000, -588\],\[1391625000000, -1525\],\[1391711400000, -588\],
\[1391797800000, -1324\],\[1391884200000, -1525\],\[1391970600000, -588\],\[1392057000000, -1234\],\[1392143400000, -588\],\[1392229800000, -1324\],
\[1392316200000, -1525\],\[1392402600000, -588\],\[1392489000000, -1525\],\[1392575400000, -588\],\[1392661800000, -1324\],\[1392748200000, -1525\],
\[1392834600000, -588\]
\],
color:'#9D538E',
label: "Out"
},
{
data: \[
\[1391279400000, 3221\],\[1391365800000, 2496\],\[1391452200000, 1050\],\[1391538600000, 3221\],\[1391625000000, 1050\],\[1391711400000, 3221\],
\[1391797800000, 2496\],\[1391884200000, 1050\],\[1391970600000, 2221\],\[1392057000000, 1050\],\[1392143400000, 3221\],\[1392229800000, 2496\],
\[1392316200000, 1050\],\[1392402600000, 3221\],\[1392489000000, 1050\],\[1392575400000, 3221\],\[1392661800000, 2496\],\[1392748200000, 1050\],
\[1392834600000, 2221\]
\],
color:'#702BD7',
label: "Intake"
}, {
data: \[
\[1391279400000, 1000\],\[1391365800000, -1000\],\[1391452200000, -475\],\[1391538600000, 1000\],\[1391625000000, -475\],\[1391711400000, 1000\],
\[1391797800000, -1000\],\[1391884200000, -475\],\[1391970600000, 1000\],\[1392057000000, -475\],\[1392143400000, 1000\],\[1392229800000, -1000\],
\[1392316200000, -475\],\[1392402600000, 1000\],\[1392489000000, -475\],\[1392575400000, 1000\],\[1392661800000, -1000\],\[1392748200000, -475\],
\[1392834600000, 1000\]
\],
color:'#2082F2',
label: "Net"
}\];
var plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
timeformat: "%m/%d/%y",
tickSize: \[1, "day"\],
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
var overview = $.plot("#overview", dataset, {
xaxis: {
mode: 'time',
ticks: \[\]
},
yaxis: {
ticks: \[\],
},
series: {
bars: {
fill: 1,
show: true,
},
},
grid: {
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
},
selection: {
mode: "x"
},
legend: {show: false}
});
// now connect the two
$("#placeholder").bind("plotselected", function (event, ranges) {
//Reset Chart resolution dropdown
$(".chartResolution").val("0");
// do the zooming
plot = $.plot("#placeholder", dataset, {
xaxis: {
mode: 'time',
min: ranges.xaxis.from,
max: ranges.xaxis.to,
},
series: {
bars: {
fill: 1,
show: true,
barWidth: 100*100*4000,
},
valueLabels: {
show: true,
showAsHtml: true,
},
},
grid: {
hoverable: true,
clickable: true,
borderWidth: 2,
markings: \[ { yaxis: { from: 0, to: 0 }, color: "#fff" }\],
backgroundColor: { colors: \["#000000", "#000000"\] }
}
});
// don't fire event on the overview to prevent eternal loop
//overview.setSelection(ranges, true);
});
//bind the plotselected function
$("#overview").bind("plotselected", function (event, ranges) {
plot.setSelection(ranges);
});
$("#placeholder").bind("plotclick", function (event, pos, item) {
if (item) {
var tickClicked = item.series.xaxis.ticks\[item.dataIndex+1\].label;
alert(tickClicked);
}
});
});
</script>
</head>
<body style="background-color:#222222; color:white;">
<div id="content">
<div class="demo-container" style="margin-top:1%;">
<div id="placeholder" class="demo-placeholder"></div>
<p class="notifyMessage">Please click and drag and select a range to zoom Revert to all data</p>
<div id="overview" class="psycho" style="width:950px;height:150px;"></div>
</div>
</div>
</body>
</html>][1]
The problem is this line of code:
var tickClicked = item.series.xaxis.ticks[item.dataIndex+1].label;
When your plot is unzoomed you have one tick per datapoint (bar). When you zoom, however, you end up with in between ticks, so the finding a tick by item.dataIndex isn't going to work.
I'm guessing you care more about the data associated to the bar (and not really the tick) so get the bar x value and format it back to a date string.
var tickClicked = $.plot.formatDate(new Date(item.datapoint[0]),"%m/%d/%Y");
EDITS
Instead of making another .plot call on zoom redraw the chart with (this is how I do it in my applications using flot):
var opts = plot.getOptions();
opts.xaxes[0].min = ranges.xaxis.from;
opts.xaxes[0].max = ranges.xaxis.to;
opts.yaxes[0].min = ranges.yaxis.from;
opts.yaxes[0].max = ranges.yaxis.to;
plot.setupGrid();
plot.draw();
I have a problem correctly displaying JQPlot stacked bars horizontal.
My Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Vertical Graph</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="script/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="script/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="script/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="script/jqplot.pointLabels.min.js"></script>
<link rel="Stylesheet" type="text/css" href="css/jquery.jqplot.min.css" />
</head>
<body>
<div id="test" style="width:auto; height:auto;"></div>
<script type="text/javascript">
$(document).ready(function () {
var s1 = [1, 6, 7, 10];
var s2 = [3, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('test', [s1, s2, s3], {
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barDirection: 'horizontal',
// Put a 30 pixel margin between bars.
barMargin: 30,
// Highlight bars when mouse button pressed.
// Disables default highlighting on mouse over.
highlightMouseDown: true
},
pointLabels: { show: true }
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
legend: {
show: true,
location: 'nw',
placement: 'inside'
}
});
// Bind a listener to the "jqplotDataClick" event. Here, simply change
// the text of the info3 element to show what series and ponit were
// clicked along with the data for that point.
$('#chart3').bind('jqplotDataClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);
}
);
$(window).resize(function () {
plot3.replot({ resetAxes: true });
});
});
</script>
</body>
</html>
Sorry that I can't post an image but I don't have enough reputation.
Thank you, but I get solved it another way.
Here ist my code:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
// Don't pad out the bottom of the data range. By default,
// axes scaled as if data extended 10% above and below the
// actual range to prevent data points right on grid boundaries.
// Don't want to do that here.
padMin: 0
}
},
Change this in this:
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
},
so it works ;)