[[["09251A0428",90],["10251A0547",37]],[["09251A0428",4],["10251A0547",54]]]
Above data contains two series. x values of each series are same. if the x values are numeric the jqplot displays line chart with two series as normal. but we need to display strings on x axis and for each string corresponding series values.
How to set strings on xaxis for multiple series line chart of jqplot?
I have preapared an example for you based on the data you gave:
JsFiddle link
$.jqplot.config.enablePlugins = true;
var chartData = [[["09251A0428",90],["10251A0547",37]],[["09251A0428",4],["10251A0547",54]]];
function PlotChart(chartData) {
var plot2 = $.jqplot('chart1', chartData, {
title: 'Mouse Cursor Tracking',
seriesDefaults: {
pointLabels: {
show: true
}
},
axes: {
xaxis: {
pad: 1,
// a factor multiplied by the data range on the axis to give the
renderer: $.jqplot.CategoryAxisRenderer,
// renderer to use to draw the axis,
tickOptions: {
formatString: '%b %#d'
}
},
yaxis: {
}
},
highlighter: {
sizeAdjust: 7.5
},
cursor: {
show: true
}
});
}
PlotChart(chartData);
Related
In jqplot, why is the auto scaling on bar charts so very different from on line charts?
Using the exact same data, I get these two plots:
The options I use for the two plots are:
var bar_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { highlightMouseOver:false, barMargin:5, shadowOffset:1 } },
axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { tickOptions:{show:false} } },
};
and
var line_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { rendererOptions: { smooth: true } },
axes: { xaxis: { min:1, max:30, tickInterval:1, pad:0 }, yaxis: { tickOptions:{show:false} } },
};
The line plot looks really good, but the bar chart is next to useless with the scaling shown.
Why is the default scaling so different between the two plots, and how can I get the scaling on the bar plot to be the same as the line graph?
EDIT:
I have created a simpler example, with data as follows:
[38.23, 39.33, 41.67, 40.21, 45.01, 44.47, 37.04]
And the resulting graph shown is this:
Adding a y-axis scale, shows that the data is starting from 0.
I changed my plot code to this...
var home_bar_options = {
axesDefaults: { labelRenderer: $.jqplot.CanvasAxisLabelRenderer },
seriesDefaults: { renderer: $.jqplot.BarRenderer, rendererOptions: { highlightMouseOver:false, barMargin:5, shadowOffset:1 } },
axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer }, yaxis: { min:30, max:50 } }
};
But the plot doesn't change, and completely ignores the 'min' and 'max' values that I have entered for the y-axis scale.
Why is this?
I have not found any 'proper' way to move the axis on the bar chart, but I have managed to find a workaround.
My page is in PHP, and the data is coming from a mysql database.
So, after I have the data, and before I draw the bar chart plot, I get the minimum data value, and subtract that value from all my data!
So if my data is
35, 38, 36, 42, 40
I subtract 35 from all data, giving a new data set of
0, 3, 1, 7, 5
The bar chart will then plot this in a much better looking way!
Because I don't need to see actual data numbers, just the trend, this works ok for me - but wouldn't work if you needed a y-axis with a scale.
If anyone has a 'proper' way to properly adjust the bar plot y-axis away from zero, then I would be very happy to hear it!
But, for now, my workaround will suffice!
I am making a stacked multi chart bar graph like this one
http://nvd3.org/examples/multiBar.html
Till now I am able to push my values on Y- axis and X axis too but the problem I am facing is that the all the values are not getting displayed on the x axis but only 10 values are getting displayed . I am using nvD3 library in my angular code . and displaying date on x axis.
$scope.options1 = {
chart: {
type: 'multiBarChart',
height: 600,
margin: {
top: 20,
right: 20,
bottom: 200,
left: 45
},
clipEdge: false,
duration: 500,
stacked: true,
groupSpacing: 0.1,
useInteractiveGuideline: true,
showMaxMin: false,
xAxis: {
axisLabel: 'Timeline',
showMaxMin: false,
tickFormat: function(d) {
return d3.time.format('%d-%m-%y')(new Date(d))
},
xScale:d3.time.scale(),
rotateLabels: '-70'
},
yAxis: {
axisLabel: 'Pending Bills',
axisLabelDistance: -20,
groupSpacing: 0.1,
tickFormat: function(d) {
return d3.format(',f')(d);
}
}
}
};
generating ticking value array using this function
$scope.options1.chart.xAxis.tickValues = function() {
var xTick = _.map(data.data.data[0].values, function(value) {
return value.x;
});
xTick = _.sortBy(xTick, function(date){ return new Date(date); });
console.log(xTick);
return xTick;
}
the output of the console.log(xTick) is something like this which is all dates -
["2015-09-01", "2015-09-02", "2015-09-03", "2015-09-04", "2015-09-05",
"2015-09-06", "2015-09-07", "2015-09-08", "2015-09-09", "2015-09-10",
"2015-09-11", "2015-09-12", "2015-09-13", "2015-09-14", "2015-09-15",
"2015-09-16", "2015-09-17", "2015-09-18", "2015-09-19", "2015-09-20",
"2015-09-21", "2015-09-22", "2015-09-23", "2015-09-24", "2015-09-25",
"2015-09-26", "2015-09-27", "2015-09-28", "2015-09-29", "2015-09-30",
"2015-10-01", "2015-10-02", "2015-10-03", "2015-10-04", "2015-10-05",
"2015-10-06", "2015-10-07", "2015-10-08", "2015-10-09", "2015-10-10",
"2015-10-11", "2015-10-12", "2015-10-13", "2015-10-14", "2015-10-15",
"2015-10-16", "2015-10-17", "2015-10-18", "2015-10-19", "2015-10-20"]
as much I read about the it. all the dates should be get plotted on x axis but they are not
If you want to display all the ticks on X-Axis, you can add this option to your chart options :
"reduceXTicks": false,
For extended option page you can visit :
Angular NVD3 - MultiBarChart
Hope it helps.
chart: {
type: 'chartType',
xAxis: {
ticks:8
}
}
You can try "ticks" property if you want to display a specific number of ticks on the axis.
hFollowing is the code for barclustered jqplot. can anyone please guide me gow to create a highlighted array in following code dynamically
$(document).ready(function(){
// For horizontal bar charts, x an y values must will be "flipped"
// from their vertical bar counterpart.
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,
// Show point labels to the right ('e'ast) of each bar.
// edgeTolerance of -15 allows labels flow outside the grid
// up to 15 pixels. If they flow out more than that, they
// will be hidden.
pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
// Rotate the bar shadow as if bar is lit from top right.
shadowAngle: 135,
// Here's where we tell the chart it is oriented horizontally.
rendererOptions: {
barDirection: 'horizontal'
}
},
axes: {
yaxis: {
renderer: $.jqplot.CategoryAxisRenderer
}
}
});
});
You have a problem with your Javascript syntax and algorithm. The loop should looks like :
VData="9,453,470,232|488,378,375,142|365,275,255,434|217,317,479,89";
var a = new Array();
var split_fst = VData.split("|")
for(m=0;m<split_fst.length;m++) {
var split_snd = split_fst[m].split(",");
a[m] = new Array();
for(j=0;j<split_snd.length;j++){
a[m][j]=split_snd[j];
}
}
Your a variable now looks like : `[["9","453","470","232"],["488","378","375","142"],["365","275","255","434"],["217","317","479","89"]]
I'm new to jqplot, when I want to draw a bar chart, x axis is date, interval is 1 day. This is part of my code:
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize:'10pt',
},
},
axes:{
xaxis:{
renderer:$x_renderer,
tickOptions:{
formatString:'%Y-%#m-%#d',
},
rendererOptions:{
tickOptions:{
angle:-90,
}
},
label:'$label',
tickInterval:'86400000',
},
yaxis:{
tickOptions:{
formatString:'%.2f',
},
autoscale:true
},
},
highlighter:{
show:true,
},
But I find the width of each bar is too large to cover each other. How to fix it?
Thanks!
The AnthonyLeGovic answer is indeed correct, but if you need to change the column width according to the number of data points you can do the following:
// Get the size of the container of the plot
var width = jQuery(containerName).width();
// Divide by the number of data points.
width = width / number_of_data_points;
// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;
// Set the value
$.jqplot(containerName, [data],
{
// whatever
// ...
seriesDefault:
{
renderer: $.jqplot.BarRenderer,
rendererOptions: { barWidth: width }
}
// whatever
// ...
}
Note that I'm not taking into account the width of the legend. The legend width can only be obtained after plotting, so if you want to reduce the column width considering even the width of the legend you must do it after plotting, and then replot.
I've prepared a fiddle that shows an example.
Hope it helps.
You can specify it in your series options :
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Don't forget to include barRenderer plugins.
For more documentations about bar chart on jqplot please take a look at : Jqplot documentation
I added below code and I got the result.
The reason behind my width was coming too large because of bar-width were not set in series Default block.
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Thanks to :AnthonyLeGovic
I want to put a label to the CanvasOverlay Horizontal line and show it in the graph. Haven't found any documentation related to it. But was not successful. Any pointer to fix this issue would be appreciated.
var line3 = [['02/01/2012 00:00:00', '02/01/2012 01:00:00'], ['02/02/2012 00:00:00', '02/01/2012 06:00:00'], ['02/03/2012 00:00:00', '02/01/2012 06:00:00'], ['02/04/2012 00:00:00', '02/01/2012 06:00:00']];
var plot2 = $.jqplot('chart1', [line3], {
title:'Mouse Cursor Tracking',
axes:{
xaxis:{
min:'2012-02-01',
max:'2012-02-10',
Label: 'Day',
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%b %#d'
},
tickInterval:'1 day'
},
yaxis:{
min:'2012-02-01 00:00:00',
max:'2012-02-01 24:00:00',
Label: 'Time',
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{
formatString:'%H'
},
tickInterval:'2 hour'
}
},
highlighter: {
show: false
},
cursor: {
show: true,
tooltipLocation:'sw'
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'pebbles',
y: new $.jsDate( '2012-02-01 05:00:00').getTime(),
lineWidth: 3,
color: 'rgb(100, 55, 124)',
shadow: true,
lineCap: 'butt',
xOffset: 0
}},
{dashedHorizontalLine: {
name: 'bam-bam',
y: new $.jsDate( '2012-02-01 10:00:00').getTime(),
lineWidth: 4,
dashPattern: [8, 16],
lineCap: 'round',
xOffset: '25',
color: 'rgb(66, 98, 144)',
shadow: false
}}
]
}
});
I recently had this same problem and came up with a solution that seems to work pretty well. First of all, you'll need to create a new function so that you can pass in the plot object "plot2". You can then access the various properties of your axes to help calculate where jqplot is rendering your horizontal line.
function applyChartText(plot, text, lineValue) {
var maxVal = plot.axes.yaxis.max;
var minVal = plot.axes.yaxis.min;
var range = maxVal + Math.abs(minVal); // account for negative values
var titleHeight = plot.title.getHeight();
if (plot.title.text.indexOf("<br") > -1) { // account for line breaks in the title
titleHeight = titleHeight * 0.5; // half it
}
// you now need to calculate how many pixels make up each point in your y-axis
var pixelsPerPoint = (plot._height - titleHeight - plot.axes.xaxis.getHeight()) / range;
var valueHeight = ((maxVal - lineValue) * pixelsPerPoint) + 10;
// insert the label div as a child of the jqPlot parent
var title_selector = $(plot.target.selector).children('.jqplot-overlayCanvas-canvas');
$('<div class="jqplot-point-label " style="position:absolute; text-align:right;width:95%;top:' + valueHeight + 'px;">' + text + '</div>').insertAfter(title_selector);
}
You're essentially grabbing the size of your graph's div, then subtracting out the # of pixels that make up the graph's title and the text of the x-axis labels. Then you can calculate how many pixels make up each point in your y-axis. Then it's just a matter of seeing where your line fits within the range and applying your label accordingly. You may have to tweak it in a few places, but this should work pretty well.