I am using highcharts with angular 4.
I want to create a chart to show the result something like this:
Where:
GHRM and HR Scanner are application name.
We are showing some data groupwise (application wise here)
To achieve the above result I have tried using columnrange chart type in highcharts.
But the result of above link differs from my requirement. As you can see the result of above link:
Can any one help me to know how I can customize the categories view in this case to achieve the result as shown in first screen shot.
Getting that kind of look with grouped categories plugin would be a rather a hard task to accomplish.
Another approach is using a separate x axis for each set of categories (GHRM and HR Scanner in your case).
Axes can be positioned via left & top properties and sized via height properties. These options are not documented yet but they work. They accept relative values in percents (e.g. 30%) and absolute values in pixels (e.g. 200px).
xAxis: [{
categories: ['Category 1'],
tickWidth: 0,
height: '30%',
offset: 0,
title: {
text: 'First x axis',
rotation: 0,
align: 'high'
}
}, {
categories: ['Category 2', 'Category 3'],
tickWidth: 0,
height: '60%',
top: '40%',
offset: 0,
title: {
align: 'high',
text: 'Second x axis',
rotation: 0
}
}],
plotOptions: {
series: {
grouping: false,
groupPadding: 0,
pointPadding: 0,
borderWidth: 0
}
},
series: [{
data: [
[1, 7]
],
}, {
data: [
[2, 4],
[3, 8]
],
xAxis: 1
}]
Live demo: http://jsfiddle.net/BlackLabel/s3k3s944/
grouping has to be disabled so that columns are always centered. pointPadding, groupPadding and borederWidth force columns to occupy maximum vertical range.
All other options of axes configuration can be found in the Highcharts API: https://api.highcharts.com/highcharts/
So I'm looking for a way to make one of the lines on my chart NOT smooth and the other smooth. There is a master option to make every line on the chart smooth but not a particular line that I know of.
Here is my chart of what it looks like
PS. Im using JQ Plots http://www.jqplot.com/index.php
Here is my JS code.
//STOCK HIGH VS LOW
var line1 = [['2017-11-27',175.0800],['2017-11-28',174.8700],['2017-11-29',172.9200],['2017-11-30',172.1400],['2017-12-01',171.6700],['2017-12-04',172.6200],['2017-12-05',171.5200],['2017-12-06',170.2047],['2017-12-07',170.4400],['2017-12-08',171.0000],['2017-12-11',172.8900],['2017-12-12',172.3900],['2017-12-13',173.5400],['2017-12-14',173.1300],['2017-12-15',174.1700],['2017-12-18',177.2000],['2017-12-19',175.3900],['2017-12-20',175.4200],['2017-12-21',176.0200],['2017-12-22',175.4240],['2017-12-26',171.4700],['2017-12-27',170.7800],['2017-12-28',171.8500],['2017-12-29',170.5900],['2018-01-02',172.3000],['2018-01-03',174.5500],['2018-01-04',173.4700],['2018-01-05',175.3700],['2018-01-08',175.6100],['2018-01-09',175.0600],['2018-01-10',174.3000],['2018-01-11',175.4900],['2018-01-12',177.3600],['2018-01-16',179.3900],['2018-01-17',179.2500],['2018-01-18',180.1000],['2018-01-19',179.5800],['2018-01-22',177.7800],['2018-01-23',179.4400],['2018-01-24',177.3000],['2018-01-25',174.9500],['2018-01-26',172.0000],['2018-01-29',170.1600],['2018-01-30',167.3700],['2018-01-31',168.4417],['2018-02-01',168.6200],['2018-02-02',166.8000],['2018-02-05',163.8800],['2018-02-06',163.7200],['2018-02-07',163.4000],['2018-02-08',161.0000],['2018-02-09',157.8900]];
var line2 = [['2017-11-27',173.3400],['2017-11-28',171.8600],['2017-11-29',167.1600],['2017-11-30',168.4400],['2017-12-01',168.5000],['2017-12-04',169.6300],['2017-12-05',168.4000],['2017-12-06',166.4600],['2017-12-07',168.9100],['2017-12-08',168.8200],['2017-12-11',168.7900],['2017-12-12',171.4610],['2017-12-13',172.0000],['2017-12-14',171.6500],['2017-12-15',172.4600],['2017-12-18',174.8600],['2017-12-19',174.0900],['2017-12-20',173.2500],['2017-12-21',174.1000],['2017-12-22',174.5000],['2017-12-26',169.6790],['2017-12-27',169.7100],['2017-12-28',170.4800],['2017-12-29',169.2200],['2018-01-02',169.2600],['2018-01-03',171.9600],['2018-01-04',172.0800],['2018-01-05',173.0500],['2018-01-08',173.9300],['2018-01-09',173.4100],['2018-01-10',173.0000],['2018-01-11',174.4900],['2018-01-12',175.6500],['2018-01-16',176.1400],['2018-01-17',175.0700],['2018-01-18',178.2500],['2018-01-19',177.4100],['2018-01-22',176.6016],['2018-01-23',176.8200],['2018-01-24',173.2000],['2018-01-25',170.5300],['2018-01-26',170.0600],['2018-01-29',167.0700],['2018-01-30',164.7000],['2018-01-31',166.5000],['2018-02-01',166.7600],['2018-02-02',160.1000],['2018-02-05',156.0000],['2018-02-06',154.0000],['2018-02-07',159.0685],['2018-02-08',155.0300],['2018-02-09',150.2400]];
var plot2 = $.jqplot('chart1', [line1, line2], {
title: 'AAPL High vs Low',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: { show: true },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p' },
min: 'November 20 2017',
tickInterval: '1 month'
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
canvasOverlay: {
show: true,
objects: [
{horizontalLine: {
name: 'average',
y: 171.21, //**AVERAGE_FLOAT_VALUE**
lineWidth: 2,
color: '#FF5555',
shadow: false
}}
]
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'High' },
{ label: 'Low' }
],
});
If it cant be done in JQ Plots, do you guys know of any other charts that can do this.
Pretty much Im looking for a chart to look like this in the end.
Replying kinda late but..
Yes you can do it in jqplot as well.
Instead of using a seriesDefaults option, go directly and add it in each series you want:
series: [
{
// custom line
lineWidth:2,
markerOptions: { style:'diamond' }
},
{
// here is your smooth line
rendererOptions: {
smooth: true,
},
markerOptions: { style:"circle" }
}
]
Disclaimer: I read it on the internet . . . but apparently d3 can do this (https://gist.github.com/thiyagu-p/3925981). Also, if you Google 'd3 moving average and volume' you get some interesting results. YMMV.
I don't know about jqPlot but you could certainly do this with RGraph:
https://www.rgraph.net/demos/svg-line-trading.html
And if you wanted the gray decorative bar at the back you could use another Bar chart to get this effect before drawing the Line charts and give it some dummy data of:
[1,0,1,0,1,0,1,0,1,0,1,0,1,0,1]
I need to convert this Highcharts.JS chart to C3.JS chart
http://i.imgur.com/iwk3pyO.png
This was the Highcharts.JS code:
var chart = new Highcharts.Chart({
xAxis: {
title: {
text: 'Values'
}
},
yAxis: {
title: {
text: ' Frequency',
align: 'high',
offset: 23
}
},
legend: {
enabled: false
},
tooltip: {
enabled: false
},
series: [
{
data: []
}
]
});
Upon converting to C3.JS, I encounter a problem with the x-values. The bar chart of C3.JS, by default, assigns values to each bar as 0, 1, 2, ... n instead of the values that I wanted which is the following:
var xData = [0.1384261, 0.2337903, 0.3291545, 0.4245187, 0.5198829, 0.6152470999999999, 0.7106113000000001, 0.8059755, 0.9013397000000001, 0.9967039];
I tried to somehow "trick" it to show the x values as labels but the problem here is the red region at the back. I set the region to be displayed in 0 to 1 values but you'll notice in C3.JS that the region is place in the first and second bars instead of after the last graph since its value is less than 1.
https://jsfiddle.net/joefclarin/dh5epj0v/
Maybe a little bit late, but in case someone still needs it (or to use numerical X axis in bar chart). Here is an idea:
Instead of
regions: [
{start: 0, end: 1, class: 'red-color'}
]
You need to hack the end value according to how many items are less than 1 in your categories?. You code would be probably like this:
function fctGetItemLessThan1(xData){
//implement your count logic here + return value
}
then in your chart option:
...
regions: [
{start: fctGetItemLessThan1() - 1, end: fctGetItemLessThan1(), class: 'red-color'}
]
...
In your case, fctGetItemLessThan1() - 1 = 9, the result is as follow
How do I specify my own colors for the bars in a jqPlot stacked bar chart? I am talking about setting different colors for single bars. I have gone through a couple of examples, but all of them use the default colors. Is there a way to explicitly set the colors for the bars in a stacked bar chart?
Here is the code I have now:
var s1=[11,28,22,47,11,11];
var s2=[0,6,3,0,0,0];
var s3=[1,0,3,0,0,0 ];
var dataArray = [s1, s2, s3];
var ticks = bcdarr;
var options = {
title: ' STATUS',
stackSeries: true,
seriesDefaults: {
renderer:$.jqplot.BarRenderer,
pointLabels: {
show: true
},
rendererOptions: {
barWidth: 25,
varyBarColor: true,
},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
},
yaxis: {
//autoscale: true,
//label: 'Application Count',
min : 0,
tickInterval : 5,
max:50
}
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer ,
tickOptions: {
angle: -30,
fontSize: '10pt'
}
}
};
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each.
As almas shaikh implied, the setting which changes the colors of the sections of the bars in a stacked barchart is the seriesColors attribute. This is an array with the colors defined as text strings as you would provide for CSS, or a style.
In the example from which you took the above image to get (working JSFiddle):
You can add:
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
The complete function call would be:
$(document).ready(function(){
var s1 = [2, 6, 7, 10];
var s2 = [7, 5, 3, 4];
var s3 = [14, 9, 3, 8];
plot3 = $.jqplot('chart3', [s1, s2, s3], {
//Define colors for the stacked bars:
seriesColors: ["#FDF396", "#ABFD96", "#96A0FD"],
// Tell the plot to stack the bars.
stackSeries: true,
captureRightClick: true,
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// 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: 'e',
placement: 'outside'
}
});
// 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);
}
);
});
Additional (point labels):
The best place to look for documentation on how to do things is the API Documentation. It has documentation on each component and plugin and the options available for each. [Restated here and at the top of the answer because I only just added the link.]
Documentation for the point labels is in the plugin API documentation for : PointLabels (plugins/jqplot.pointLabels.js).
Specifically, the options to show the point labels are specified in
{
seriesDefaults:{
pointLabels: {show: true}
}
}
To show the labels, but not those that are zero, you would use:
{
seriesDefaults:{
pointLabels: {
show: true,
hideZeros: true
}
}
}
Try this:
Within your jqplot you are missing seriesColors. Use it something like below:
$.jqplot('chart3', [s1, s2, s3], {
seriesColors:['#000000', '#ffffff', '#000000'],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
blah blah