Is it possible to make the graph using jqplot, as given below? The closest possible graph to this is stacked but using that coloring as well as point labels are a problem.
This jsfiddle contains my effort to make this bar chart along with it's legend and point labels. So is it possible to make it look like the image.
var barchart = $.jqplot('chart1', [s1, s2, s3], {
animate: true,
grid: {
background: 'white',
drawBorder:false,
shadow: false
},
seriesColors: ['#73C6E8', '#F28570', '#727272'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barPadding: 20,
barWidth: 25,
barMargin:10,
fillToZero: true
},
pointLabels: { show: true }
},
series: [
{ label: 'USA' },
{ label: 'India' },
{ label: 'South Africa' }
],
legend: {
show: true,
placement: 'outsideGrid',
location:'se',
background:'white',
border: 'white',
fontFamily: 'Gotham Medium',
fontSize:'12px',
renderer: $.jqplot.EnhancedLegendRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks:xticks,
showTicks:false
},
yaxis: {
pad: 1.05,
ticks: yticks,
showTicks:false,
rendererOptions: {drawBaseline: false}
}
}
});
I believe it would be much easier to achieve with highchart: http://www.highcharts.com/demo/column-stacked
This is only stack bar example you customize everything, legend, color, size, label, etc etc.
good luck
Related
Basically, I am pulling data using AJAX from MySQL to plot line chart.
Now I want different colors for points on my line chart based on data. As in if data falls within the range it will be a different color and outside range it will be a different color. Someone please suggest or guide. Code used below:
I have tried using Flot threshold plugin which is available below but it's not working.
var offset = 0;
//plot(html);
var options = {
colors: ["#3fcf7f"],
threshold: {
below: 200,
colors: ["#ff7070"]
},
series: {
lines: {
show: true,
lineWidth: 1,
fill: true,
fillColor: {
colors: [{
opacity: 0.0
}, {
opacity: 0.2
}]
},
},
points: {
radius: 5,
show: true
},
shadowSize: 2
},
grid: {
color: "#fff",
hoverable: true,
clickable: true,
tickColor: "#f0f0f0",
borderWidth: 0
},
//colors: ["#ff7070"],
xaxis: {
mode: 'time',
timeformat: '%d/%m/%y',
//rotateTicks: 90
},
yaxis: {
ticks: 5,
tickDecimals: 0,
},
tooltip: true,
tooltipOpts: {
content: "%y.1 on %x.4",
defaultTheme: false,
shifts: {
x: 0,
y: 20
}
}
};
console.log(html.data);
console.log(html.data[0][0]);
data.push(html);
// A null signifies separate line segments
$.plot("#flot-color", data, options);
There is no colors property, and the color and threshold properties belong inside the series property. Change your options to this:
var options = {
series: {
color: "#3fcf7f",
threshold: {
below: 200,
color: "#ff7070"
},
lines: {
...
Fiddle that shows a working chart.
Im using highchart for my website that requires a chart and It renders good (no problem at all) however, due to conflict requirements, I want the legend to be put on the bottom (below the chart, move it from the right side to the bottom side) and make it horizontally centered anyone knows how to make it? I tried this (refer below)
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'right',
y:40
},
my overall chart code is
$('#chart_portfolio').highcharts({
chart: {
borderColor: '#ff0000',
width: null,
height: null
},
title: {
text: false,
x: -20 //center
},
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center'
},
xAxis: {
categories: portfolio_creation_date //this is an array
},
yAxis: {
title: {
text: false
},
plotLines: [{
value: 0,
width: 1,
color: '#ff0000'
}]
},
tooltip: {
shared: true,
crosshairs: true
},
series: [{
name: 'Future',
data: portfolio_future, //this is an array
color: '#0f00ff'
}, {
name: 'In Grace Period',
data: portfolio_ingrace_period, //this is an array
color: '#fda800'
}, {
name: 'Arrears',
data: portfolio_in_arrears, //this is an array
color: '#f40404'
}, {
name: 'Good standing',
data: portfolio_good_standing, //this is an array
color: '#4da74d'
}]
}); //end of highcharts
but sadly not working. Please refer below image for a sharp detail.
Simply remove options, to use default ones: http://jsfiddle.net/ctfcnsrL/1/
legend: {
// enabled: true,
// floating: true,
// verticalAlign: 'bottom',
// align:'center'
},
Try this One
legend: {
enabled: true,
floating: true,
verticalAlign: 'bottom',
align:'center',
},
http://jsfiddle.net/ctfcnsrL/
I am using the jqPlot chart in one of my project.
I am creating the chart same as like below.
http://i.stack.imgur.com/p8QiA.jpg
The charts are working fine, but the line chart values should not get stack. But, in my code, the line series values also getting stacked.
For Example: Over all Stacked bar chart value is 10, the line chart value is 50. But, In my scenario the line chart value is plotting at the position 60 instead of 50.
My Code is below.
plot = $.jqplot(chartId, [d1, d2, d3], {
seriesColors: ["#d82b25", "#707b7f", "#083a6d"],
title: titles,
stackSeries: true,
animate: true,
animateReplot: true,
cursor: {
style: 'pointer',
show: true,
zoom: false,
looseZoom: false,
showTooltip: false
},
series:[
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 0,
highlightMouseOver: false
}
},
{
pointLabels: {
show: false
},
renderer: $.jqplot.BarRenderer,
showHighlight: true,
yaxis: 'yaxis',
rendererOptions: {
animation: {
speed: 2500
},
barWidth: 12,
barPadding: 20,
barMargin: 20,
highlightMouseOver: false
}
},
{
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
],
legend: {
show: true,
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions: {
numberRows: 2
},
location: 's',
placement: 'outside',
labels: types,
yoffset: 52
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
tickOptions: {
fontFamily: 'Arial, sans-serif',
fontSize: '10pt'
},
pad: 0
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
drawMajorGridlines: false,
tickOptions:{
renderer: $.jqplot.CategoryAxisRenderer,
angle:-90
}
},
yaxis: {
showGridline: false,
tickOptions: {
formatString: "%.1f"
},
rendererOptions: {
forceTickAt0: true
},
label:'Volume($ Billions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
},
y2axis: {
showGridline: false,
tickOptions: {
show: true,
formatString: "%.1f"
},
rendererOptions: {
alignTicks: true,
forceTickAt0: true
},
label:'US($ Millions)',
labelRenderer: $.jqplot.CanvasAxisLabelRenderer
}
},
grid:{
background: '#ffffff',
borderColor: '#333333',
borderWidth: 1.0,
gridLineColor: '#575757'
},
highlighter: {
show: true,
showLabel: true,
tooltipAxes: 'y',
sizeAdjust: 7.5,
tooltipLocation : 'ne'
}
});
Please kindly some one help me to solve this.
Thanks in advance...
If to look at the source code of the jqPlot framework and search for stackSeries line, you can find that it is used so:
if (this.stackSeries && !series.disableStack)
And according to the documentation the disableStack property is what you need.
true to not stack this series with other series in the plot. To render properly, non-stacked series must come after any stacked series in the plot’s data series array.
Your line non-stacked series is placed after the bar stacked series, so this parameter will work properly. Use it so:
series:[
{ //...
},
{ // ...
},
{
disableStack: true,
yaxis: 'y2axis',
rendererOptions: {
animation: {
speed: 2000
}
},
markerOptions: {
show: false
}
}
]
I have quite a large dataset displaying in a highcharts line chart. Tooltips are enabled but the displaying of the tooltip is quite erratic, especially when zoomed in.
You can see the dataset here: http://jsfiddle.net/ARfcB/2/
$(function () {
$('#container').highcharts({
chart: {
type: 'line',
zoomType: "x"
},
plotOptions: {
line: {
marker: {
enabled: true
},
animation: true
}
},
legend: {
enabled: true,
layout: "vertical",
align: 'right',
verticalAlign: 'middle'
},
tooltip: {
enabled: true,
shared: false
},
xAxis: {
type: "datetime"
},
yAxis: {
title: {
text: 'Up/Down'
},
labels: {
style: {
color: "blue"
}
},
min: 0,
max: 1,
tickInterval: 1,
categories: ['Down', 'Up']
},
credits: {
enabled: false
},
series: "large dataset on jsfiddle page"
});
});
The graph basically shows an up/down value for each series. When the mouse is hovering over the 'down' values, no tooltip displays.
When zooming in its even worse. Tooltips are displayed but for a point other than the one that is hovered over; and never for the 'down' values.
I'm wondering is this just because the dataset is quite large or is it an issue with highcharts itself.
Thanks in advance for the help.
Your data should be sorted via x ascending.
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