I am using a jqplot plugin to get customised bar graph for my website. The labels in bar graph [ticks] should be rotated at an angle of -30deg in the x axis with some custom names. could some please guide me how to make possible.
Here is the below Jqplot Code i have used
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 2];
var s3 = [14, 9, 3, 8];
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'
}
});
$('#chart3').bind('jqplotDataRightClick',
function (ev, seriesIndex, pointIndex, data) {
$('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
}
);
});
Look into this
jQplot has a built in feature
http://www.jqplot.com/tests/rotated-tick-labels.php
First, include this plugin:
<script type="text/javascript" src="your path/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
then add this to your options.
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
}
},
Related
When I zooming first time when graph is loaded, data is missing in angular dygraph. Here are screenshots
after zooming
Here is my code
function getPopUpGraph() {
$scope.currentZoom = 1;
$scope.popUpGraph = {};
$scope.popUpGraph = {
data: [],
options: {
labels: ["Date", $scope.selectedDataPoint.LegendName, "TrendLine"],
showPopover: false,
//customBars: true,
legend: "onmouseover",
highlightSeriesOpts: {
strokeWidth: 2,
strokeBorderWidth: 1
},
animatedZooms: true,
interactionModel: Dygraph.defaultInteractionModel,
showRangeSelector: true,
rangeSelectorPlotLineWidth: 1,
rangeSelectorPlotStrokeColor: 'gray',
rangeSelectorPlotFillColor: 'gray',
highlightCircleSize: 4,
rangeSelectorAlpha: 0.9,
rangeSelectorForegroundLineWidth: 1.25,
rangeSelectorForegroundStrokeColor: 'dark gray',
visibility: [true, false],
series: {
'TrendLine': {
strokePattern: [3, 2, 3, 2]
},
},
//xlabel: 'Date',
ylabel: $scope.selectedDataPoint.Unit,
title: $scope.selectedDataPoint.LegendName,
legendEnabled: false,
colors: ["#ff0000"],
valueRange: null,
height: 300,
resizeEnabled: true,
strokeWidth: 2,
axes: {
x: {
axisLabelFormatter: function (d, gran) {
if ($scope.currentZoomLevel.name == '12h') {
return $filter('date')(d, 'h:mm a');
}
else
return $filter('date')(d, 'MMM dd h:mm');
},
valueFormatter: function (ms) {
return $filter('date')(ms, 'M/d/yy h:mm a');
}
}
},
drawCallback: function (g, is_initial) {
if (g.dateWindow_)
myPopUpRange(g.dateWindow_)
}
}
}
$scope.getPopGraphData($scope.currentZoom, 0);
}
Data is fetching from $scope.getPopGraphData function.
Iam calling some other functions in this main function. I think this is not a problem. In angular dygraph's demo , after zooming , range selector also changing. So data is showing correctly. In my case range selector is not changing on first time zooming.
Any solution? Thanks in advance...
I found the solution. In getPopUpGraph() function , there is a drawback function is calling. On disable the myPopUpRange() function, it is now working properly. myPopUpRange() is used for resetting the x axis value. But there is no need, as dygraph automatically assign the x axis range.
I try to use the plugin zoom from chartjs with the version 7 of the api.
I would like to be able to zoom when the selection of a zone of drag is finished.
Once zoomed, I would like to be able to move the chart to reach the other values.
I have try the v4,v5,v6 whith the zoom plugin but the result is always the same : When I try to select the drag zone all the chart move, it moves incredibly fast and its begin difficult to use it.
May be I don't use correctly the plugin but I've tried some other configuration the result is still the same..
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
responsive: false,
type: 'line',
data: {
labels: [0, 1, 3, 4, 5, 6],
datasets: [{
label: 'Test1',
data: [12, 19, 3, 5, 2, 3]
},{
label: 'Test2',
data: [14, 16, 4, 3, 1, 2]
}
]
},
options: {
pan: {
enabled: true,
mode: 'x',
},
zoom: {
drag: true,
enabled: true,
mode: 'xy'
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/0.5.0/chartjs-plugin-zoom.min.js"></script>
<canvas id="myChart" height=200/>
I solved this problem in my project:
first changed :zoom: {
sensitivity:0.5,
drag: true,
enabled: true,
mode: 'xy'
}
second changed plugin as in this post:
pan on chart.js also zoom on line charts
my plugin version is 5.
I am attempting to use a different symbol for one of my data series on my flot graph as it is at a much larger scale then the rest of the data. I am using this example as reference: http://www.flotcharts.org/flot/examples/symbols/index.html
Here is what I have so far:
My includes:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.flot.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
I then configure my flot options like so:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1},
series: { points : { show: true } }
};
I then actually plot the data:
$.plot('#placeholder', [{
data: my_data,
lines: { show : true},
points: { symbol: "square"},
color: '#CB4B4B',
label: 'My Data'
}], options);
}
However, flot is still graphing the points as the default circle. I get no error messages in firebug and I have even tried adding a logging message in the jquery.flot.symbol.js library itself to see if the "square" handler is even being called like so:
var handlers = {
square: function (ctx, x, y, radius, shadow) {
console.log("Square handler was called");
// pi * r^2 = (2s)^2 => s = r * sqrt(pi)/2
var size = radius * Math.sqrt(Math.PI) / 2;
ctx.rect(x - size, y - size, size + size, size + size);
},
I am getting no console messages so I am assuming the handler is not getting called correctly. Am I missing something here?
EDIT:
Example of data I am trying to plot:
var d1 = [
[1364342400000, 208],
[1364346000000, 107],
[1364353200000, 42],
[1364371200000, 1680],
[1364360400000, 52],
[1364349600000, 67],
[1364385600000, 1118],
[1364367600000, 163],
[1364382000000, 1359],
[1364378400000, 1468],
[1364389200000, 1023],
[1364356800000, 63],
[1364374800000, 1601],
[1364392800000, 556],
[1364364000000, 84],
],
d2 = [
[1364342400000, 86],
[1364346000000, 42],
[1364353200000, 13],
[1364371200000, 458],
[1364360400000, 10],
[1364349600000, 22],
[1364385600000, 453],
[1364367600000, 45],
[1364382000000, 369],
[1364378400000, 379],
[1364389200000, 358],
[1364356800000, 17],
[1364374800000, 471],
[1364392800000, 147],
[1364364000000, 16],
],
d3 = [
[1364342400000, 7],
[1364346000000, 5],
[1364382000000, 11709],
[1364371200000, 58336],
[1364360400000, 1],
[1364349600000, 1],
[1364367600000, 2],
[1364389200000, 1191],
[1364378400000, 9085],
[1364385600000, 4688],
[1364374800000, 9386],
[1364392800000, 1140],
[1364364000000, 1],
];
I have also edited my options parameter and how the plot function is called:
var options = {
grid: {hoverable : true},
xaxis: { mode: "time", timeformat: "%H:%M", tickLength: 1}
};
$.plot("#placeholder", [{
data: d1,
lines: { show : true },
points: { show: true},
color: '#EDC240',
label: "d1"
}, {
data: d2,
lines: { show : true },
points: { show : true},
color: '#AFD8F8',
label: "d2"
}, {
data: d3,
yaxis: 2,
lines: { show : true},
points: { show: true, symbol: "square"},
color: '#CB4B4B',
label: "d3"
}], options);
I am also sure that the symbol library is being included because I have added some logging itself to the library and that is showing up fine.
I see no issue with what you've done. I made a quick working example here: http://jsfiddle.net/ryleyb/shLtU/1/
I would guess that you haven't included the symbol library (even though you say you have).
Or show your data, might somehow be an issue there (doubtful?).
This is the full flot code I ran to make a working example (plus including flot and the symbol library):
$.plot('#placeholder', [{
data: [
[1, 1],
[2, 3],
[4, 4],
[5, 9]
],
lines: {
show: true
},
points: {
show: true,
symbol: "square"
},
color: '#CB4B4B',
label: 'My Data'
}]);
New to jqPlot and am struggling with the data and labels for Horizontal charts.
Here is the problem. My desired chart should look like this:
http://www.ifthen.biz/DesiredChart.png
My actual chart however, looks like this:
http://www.ifthen.biz/ActualChart.png
Cannot seem to get the point labels (in this case Yes and No) to correspond to the data for each question.
Each question has a Yes or No answer. For each Yes or No I tally the answers so that i can get the desired chart.
Please see the Code below:
<script>
$(document).ready(function() {
var q1 = [20, 58];
var q2 = [5, 21];
var plot1 = $.jqplot('quickStatsChart', [q1,q2], {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
shadowAngle: 60,
showMarker: false,
rendererOptions: {
barDirection: 'horizontal'
},
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ['Question 1', 'Question 2']
}
}
});
});
</script>
Any ideas how I can make this work?
++Tx
Here is the new code that I tried:
<script>
$(document).ready(function() {
// [ tally question 1, tally question 2]
var sX = [[[2,'q1'], [4,'q2']], // Yes'
[[5,'q1'], [1,'q2']]]; // No's
var plot1 = $.jqplot('quickStatsChart', sX, {
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
shadowAngle: 60,
showMarker: false,
rendererOptions: {
barDirection: 'horizontal'
},
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
</script>
The outcome is the same as the Actual Chart above.
Check this link As you can see the second number of the variables is the name of the yaxis
$(document).ready(function(){
var plot2 = $.jqplot('chart2', [
[[2,1], [4,2], [6,3], [3,4]],
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]], {
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
shadowAngle: 135,
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
Try deleting it is the only difference. If works change q1 with Yes and q2 with No
pointLabels:{
show: true,
location: 'e',
labels: ['Yes','No']
}
I have a figure including two lines (one horizontal line, and one parabolic curve), and I would like to show the value of the crossing over point as well as label it with text "MSY". I tried to use the option pointLabels, but it seemed like I did not find the right way. Can anyone give me some hints? Here is the demo of the problem.
jquery code:
$(document).ready(function() {
$.jqplot.config.enablePlugins = true;
var s1 = [[0.0, 0.0], [1.0, 0.036], [2.0, 0.064], [3.0, 0.084], [4.0, 0.096], [5.0, 0.1], [6.0, 0.096], [7.0, 0.084], [8.0, 0.063], [9.0, 0.036], [10.0, 0.0]];
$.jqplot('chart1', [s1], {
seriesDefaults: {
showMarker: false,
pointLabels: {
show: false
}
},
axes: {
xaxis: {
label: 'X label',
pad: 0
},
yaxis: {
label: 'Y label',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
legend: {
show: true,
location: 'ne',
placement: 'inside',
fontSize: '11px'
},
canvasOverlay: {
show: true,
objects: [
{
horizontalLine: {
y: 0.1,
color: 'rgb(100, 55, 124)',
show: true,
}}
]
},
pointLabels: {
show: true,
labels: [[5, 0.10]],
hideZeros: true
}
})
})
There is no straight solution but assuming the parabola to be uniform. I just made some assumptions to calculate the vertex of a parabola. Its just an approximation .And prepared an array that could be feeded to Series label.
var k = Math.round(s1.length / 2); //Assuming your Parabola to be uniform
var l = [];
var i=0;
while(i<(k-1))
{
l.push("");
i++;
}
l.push('MSY');
Now we have the l array now I would feed it to the series option so as to get the required result.
series: [
{
pointLabels: {
show: true,
labels: l
}}],
I have made the necessary changes in fiddle and updated it http://jsfiddle.net/JWhmQ/292/ .
I would recommend you to find a small plugin or build a small script which would give you the tip or vertex of the parabola and use the above for that. It would solve your problem.