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
}
}
}
});
});
Related
I have a problem when I use Flot
I notice that it happens at the same minute but different second
2018/10/16 13:12:55 71.755
2018/10/16 13:12:09 71.700
2018/10/16 13:10:52 70.781
Here is my configuration:
//Display graph
$.plot($("#data-chart"), ds, {
colors: [$chrt_second, $chrt_fourth, "#666", "#BBB"],
grid: {
show: true,
hoverable: true,
clickable: true,
tickColor: $chrt_border_color,
borderWidth: 0,
borderColor: $chrt_border_color
},
zoom: {
interactive: true
},
pan: {
interactive: true
},
selection: {
mode: "xy"
},
xaxis: {
ticks: 5,
mode: "time",
timeformat: "%d/%m/%y",
},
yaxis: {
min: 0,
ticks: 5,
max: 110,
panRange: [-10000, 10000]
},
tooltip: true,
legend: {
show: true,
noColumns: 4, // number of colums in legend table
labelFormatter: null, // fn: string -> string
labelBoxBorderColor: "#000", // border color for the little label boxes
container: null, // container (as jQuery object) to put legend in, null means default on top of graph
position: "ne", // position of default legend container within plot
margin: [5, 10], // distance from grid edge to default legend container within plot
backgroundColor: "#efefef", // null means auto-detect
backgroundOpacity: 1 // set to 0 to avoid background
},
tooltipOpts: {
content: "<b>Date: %x</b> = <span>%y.3</span>",
dateFormat: "%d/%m/%y %H:%M:%S",
defaultTheme: false
},
});
Can someone help me?
I have created a barchart that works properly the way I want. Right now, I'm trying to add a linegraph to overlap the bars, but when I run the code, the linegraph appears, but the bars disappear. It seems pretty simple to add the linegraph, but for some reason it's not working. I'm not getting any mistakes in console either.
var x_text = ["Comodities","Consumer Discretionary","Utilities",
"Health & Biotech","Global Real Estate","Financials",
"Emerging Market Bonds","Technologies","Industrials",
"Oil & Gas","China Equities","S&P500"];
//
var trace1 = [{
x: x_text, // X axis (names)
y: zValues, // Values (y axis)
hoverinfo: zValues,
type: 'bar',
orientation:"v",
marker: {
color: color_list, // Color of bars
line: {
color: 'rbg(8,48,107)',
width: 1
}},
yauto: false,
showscale: true,
}];
var trace2 = {
x: x_text,
y: [-0.1,-0.1,2.3,3.3,1.0,0.4,0.9,3.0,-0.1,-1.4,3.0,0.2],
mode: 'lines',
line:{
color:'black'
},
type: 'scatter'
};
var layout = {
font:{
// Text size and color
size:16,
family:'helvetica',
color: "white"
},
annotations: arrow(),
xaxis: {
side: 'bottom',
orientation: "right"
},
yaxis: {
autosize: true,
tickfont: "white",
ticksuffix: "%",
// Y axis scale
autorange: false,
range :[-20,20]
},
// Graph position
margin: {
l: 90,
r: 90,
b: 120,
t: 20,
pad: 10
},
// Graph background colors
paper_bgcolor: "transparent",
plot_bgcolor:"transparent",
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv',data,layout);
Oh dam, my trace1 had braces+curly braces around the values, which worked for only the bar, but made it dissappear when the linegraph was called.
I try drawing a polar chart by 'HighChart' that each series have 2 data category between 0 to 100 that have overlap on other.
My problem is when data value is greater than 90, dataLabel of 2 category have overlap.
I want set dataLabel position dynamically by formatter function.
All my try to do this was failed.
Is there solution to solve this problem?
In below is my simplified code. And in this JSFiddle.net you can see result and edit it
var chart;
var options={
chart:
{
renderTo: 'container',
type: 'column',
polar: true
},
xAxis:
{
categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
},
yAxis:
{
gridLineWidth: 0,
labels:
{
enabled: false
}
},
colors: ['#F47414', '#A8CBFF'],
plotOptions:
{
column:
{
grouping: false,
shadow: false
},
series:
{
dataLabels:
{
enabled: true /// for use My solution, comment this line
/* ------------------------------------------------------------
/// My solution is using formatter to set y align based on value. But I don't know why this don't work.
enabled: true,
formatter: function ()
{
if (this.y>=90 && this.y<100)
{
console.log(this.series.options.dataLabels.y);
this.series.options.dataLabels.y =+ 20;
}
}
---------------------------------------------------------------*/
}
}
},
series:
[
{name: 'GoalPerecent', data:[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]},
{name: 'ActualPerecent', data:[95, 20, 23, 45, 98, 10, 35, 73, 33, 85, 64, 10]}
]
}
$(document).ready(function()
{
chart = new Highcharts.Chart(options);
});
In below code y axis values are not readable, I guess its overlapping.
How to set suitable y axis tick range:
$(document).ready(function(){
var line1 = [82,82];
var line2 = [22,22];
var line3 = [0,0];
var ticks = [1,2];$.jqplot('line', [line1, line2, line3], {
animate: true,
axesDefaults:{min:0,tickInterval: 1},
seriesDefaults: {
rendererOptions: {
smooth: true
}
},
series: [{lineWidth: 1.5, label: 'Passed'},
{lineWidth: 1.5, label: 'Failed'},
{lineWidth: 1.5, label: 'Skipped'}],
axes: {
xaxis: {
label: "Run Number",
ticks: ticks,
tickOptions: {
formatString: "%'d Run"
},
pad: 1.2,
rendererOptions: {
tickInset: 0.3,
minorTicks: 1
}
},
yaxis: {
label: "TC Number me"
,tickOptions: {
formatString: "%'d Tc"
},
}
},
highlighter: {
show: true,
sizeAdjust: 10,
tooltipLocation: 'n',
tooltipAxes: 'y',
tooltipFormatString: '%d : <b><i><span style="color:black;">Test Cases</span></i></b>',
useAxesFormatters: false
},
cursor: {
show: true
},
grid: {background: '#ffffff', drawGridLines: true, gridLineColor: '#cccccc', borderColor: '#cccccc',
borderWidth: 0.5, shadow: false},
legend: {show: true, placement: 'outside', location: 'e'},
seriesColors: ["#7BB661", "#E03C31", "#21ABCD"]
});
});
You have either to remove the tickInterval option in axesDefaults to let jqplot computes his own ticks or add the numberTicks option in axesDefaults in order to tell jqplot to draw x ticks where x is the number given to the numberTicks option.
If you use axesDefaults:{min:0, tickInterval:1}, jqplot will draw ticks from 0 to your maximal value with an interval of 1 unit (80+ ticks from 0 to 82).
If you use axesDefaults:{min:0}, jqplot will draw 5 ticks (by default) from 0 to your maximal value computing a same gap between two ticks.
If you use axesDefaults:{min:0, tickInterval:1, numberTicks:15}, jqplot will draw 15 ticks starting at 0 and with an interval of 1 unit (15 ticks from 0 to 14).
If you use axesDefaults:{min:0, numberTicks:15}, jqplot will draw 15 ticks from 0 to your maximal value computing a same gap between two ticks.
Choose the option which best fits.
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