I need to create a chart like this one
https://plus.google.com/u/0/photos/110303712770402448748/albums/5891900514264118753/5891900515184170482?sqi=100875929141897651837&sqsi=9f68aae7-20ae-4a7e-b08c-3df05cfb5f57&pid=5891900515184170482&oid=110303712770402448748
This is what i have riht now with highcharts
http://jsfiddle.net/bcMYf/
I need to know how to group the series of each line and how to represent a info using not just columns, but also lines.
I try using the above code to group de columns, that way one is above another, so what i need now is to represent the columns using lines, like in the image example.
column: {
grouping: false
}
Thanks.
Use objects as points instead of data module, see: http://jsfiddle.net/r9CJw/
series: [{
data: [{
x: 0,
y: 10
}, {
x: 2,
y: 15
}, {
x: 5,
y: 12
}]
}, {
data: [{
x: 0,
y: 8
}, {
x: 2,
y: 9
}, {
x: 5,
y: 10
}]
}, {
data: [{
x: 0,
low: 3,
y: 3.5
}, {
x: 2,
low: 5,
y: 5.5
}, {
x: 5,
low: 6,
y: 6.5
}]
}]
low option is to set where bar should start - now green bars looks like a line. There is only one problem - you need to calculate what value for a low should be to display proper y-value, and still have bar with proper height.
Related
I am looking for a way to manually specify x/y ticks locations on a chart.js chart, an equivalent of matplotlib's matplotlib.pyplot.xticks. The documentation explains how to create custom tick formats, but this works on automatically calculated tick locations. How can I specify the ticks locations?
This is the config that I am using:
var config = {
type: "line",
data: {
labels: [],
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
fill: false,
borderColor: "#1f77b4",
}],
},
options: {
scales: {
xAxes: [{
type: 'linear',
distribution: 'series',
ticks: {
min: 0.,
max: 7.,
},
}]
},
},
}
which produces this file:
I would like to specify xticks locations, e.g. [0., 3.5, 5.7, 6.1], so that the plot would look more like (not taking into account grid lines and smooth plot line):
Apparently with Chart.js v3, the accpted solution no longer works as expected. Trying afterBuildTicks as suggested by b1000 in his comment, it also didn't work.
To make it work with afterBuildTicks, you need to map the number values into objects that have the property value each ([{ value: 0 }, { value: 3.5 }, ... ]). This can be done as follows:
afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v }))
Please take a look at below runnable sample:
new Chart('line-chart', {
type: 'scatter',
data: {
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
showLine : true,
borderColor: '#1f77b4',
}]
},
options: {
scales: {
x: {
min: 0,
afterBuildTicks: axis => axis.ticks = [0, 3.5, 5.7, 6.1].map(v => ({ value: v }))
}
}
}
});
canvas {
max-height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.min.js"></script>
<canvas id="line-chart"></canvas>
For not drawing grid lines on the chart, you need to add the following to your axes as described at Grid Line Configuration.
gridLines: {
drawOnChartArea: false
}
In order to obtain the ticks at the desired position only, you would define xAxis.ticks as shown below and documented at Tick Option and Creating Custom Tick Formats.
ticks: {
...
stepSize: 0.1,
autoSkip: false,
callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
maxRotation: 0
},
Finally, to obtain a straight line between the data points, define lineTension: 0 on your dataset as explained at Line Styling.
Please have a look at your amended code below.
var config = {
type: "line",
data: {
labels: [],
datasets: [{
data: [{x: 1, y: 2}, {x: 5, y: 3}, {x: 6, y: 4}],
fill: false,
lineTension: 0,
borderColor: "#1f77b4",
}],
},
options: {
scales: {
xAxes: [{
type: 'linear',
ticks: {
min: 0.,
max: 7.,
stepSize: 0.1,
autoSkip: false,
callback: value => [0, 3.5, 5.7, 6.1].includes(value) ? value : undefined,
maxRotation: 0
},
gridLines: {
drawOnChartArea: false
}
}],
yAxes: [{
ticks: {
showLabelBackdrop: true
},
gridLines: {
drawOnChartArea: false
}
}]
},
},
};
new Chart('line-chart', config);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<canvas id="line-chart" height="80"></canvas>
I want to make a simple graph (just a line between two coordinates - (2,5) and (5,10)).
HtML
<canvas id="line" width="600" height="400"></canvas>
JavaScript
var lineData = {
type: "line",
data: {
datasets: [{
label: "Test",
data: [{
x: 2,
y: 5
}, {
x: 5,
y: 10
}],
}]
}
}
var line = document.getElementById('line').getContext('2d');
new Chart(line).Line(lineData);
Unfortunately, this doesn't show anything.
Please refer the code snippet below to render the chart correctly, or can visit the fiddle -> https://jsfiddle.net/pgv2jon3/1/
var lineData = {
type: "line",
data: {
datasets: [{
label: "Test",
data: [{
x: 2,
y: 5
}, {
x: 5,
y: 10
}],
}]
}
}
var ctx = document.getElementById('line').getContext('2d');
new Chart(ctx, lineData);
I just started using Ricksaw for animated graphs and I'm trying to set up my x-axes to list months. Not in a particular time series (yet), but just to correspond with specific data points. I have a fairly simple coding program to try and do this but I can't seem to modify the x-axes labels. Is there an easy way to do this? Also, how would I do something similar for the y-axis? Thanks!
< script >
var myGraph = new Rickshaw.Graph({
element: document.querySelector("#mychart"),
renderer: 'multi',
width: 500,
height: 250,
min: 0,
max: 18,
series: [{
name: "Population1",
color: "steelblue",
renderer: 'lineplot',
data: [{
x: 0,
y: 10,
}, {
x: 1,
y: 3,
}, {
x: 2,
y: 8,
}, {
x: 3,
y: 15,
}, {
x: 4,
y: 12,
}, {
x: 5,
y: 8,
}, {
x: 6,
y: 3,
}, {
x: 7,
y: 5,
}, {
x: 8,
y: 2,
}, {
x: 9,
y: 1,
}, {
x: 10,
y: 4,
}, ]
}, {
name: "Population2",
color: "green",
renderer: 'bar',
data: [{
x: 0,
y: 5,
}, {
x: 1,
y: 3,
}, {
x: 2,
y: 8,
}, {
x: 3,
y: 6,
}, {
x: 4,
y: 3,
}, {
x: 5,
y: 12,
}, {
x: 6,
y: 13,
}, {
x: 7,
y: 14,
}, {
x: 8,
y: 12,
}, {
x: 9,
y: 8,
}, {
x: 10,
y: 9,
}, ]
}]
});
var xTicks = new Rickshaw.Graph.Axis.X({
graph: myGraph,
orientation: "bottom",
element: document.querySelector("#xaxis")
});
var yTicks = new Rickshaw.Graph.Axis.Y({
graph: myGraph,
orientation: "left",
element: document.querySelector("#yaxis")
});
var graphHover = new Rickshaw.Graph.HoverDetail({
graph: myGraph
});
var myLegend = new Rickshaw.Graph.Legend({
graph: myGraph,
element: document.querySelector("#mylegend")
});
var toggling = new Rickshaw.Graph.Behavior.Series.Toggle({
graph: myGraph,
legend: myLegend
});
myGraph.render(); < /script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rickshaw/1.5.1/rickshaw.min.js"></script>
<body>
<div style="margin-bottom:10px; margin-left:20px" id="mylegend"></div>
<div style="display:block; float:left; width:20px; height:280px; padding-bottom:10px;" id="yaxis"></div>
<div>
<div style="margin-left:20px;" id="mychart"></div>
<div style="margin-left:20px" id="xaxis"></div>
</div>
</body>
try something like this
var xAxis = new Rickshaw.Graph.Axis.Time({
graph: graph,
tickFormat: function(x){
return new Date(x).toLocaleString();
},
ticks: 4
});
xAxis.render();
AS shown in image, i want to change Fill color by point (referring project state in my case so),
visual for my chart
code i have used so far to achieve this is below,
$(function () {
$('#ao-projectssummry-chart').highcharts({
type: "spline",
title: null,
borderRadius : null,
xAxis: {
categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
opposite: true
//type: 'datetime',
//min: Date.UTC(2011, 4, 31),
//max: Date.UTC(2012, 11, 6)
},
yAxis: {
min: 0,
max: 5,
title : null
},
plotOptions: {
series: {
lineWidth: 20,
borderRadius: null,
radius: 0
},
marker: {
radius : 0
}
},
credits : {
enabled : false
},
legend: {
enabled : false
},
series: [{
name: "Project 1",
data: [1, 1, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
},
{
name: "Project 2",
data: [2, {
y: 2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping : true
}
}, 2, 2, 2, {
y:2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
},
]
}]
});
});
so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?
Any help would be appreciated! thanks in advance.
Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.
Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.
The idea:
First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):
chart: {
type: "columnrange",
inverted: true
}
Update the axis settings accordingly (swap x for y).
Set your data with an x value, a low value (starting point), and a high value (end point).
Set the color to whatever you want:
data: [{
x: 1,
low: Date.UTC(2016,3,15),
high: Date.UTC(2016,4,21),
color: 'rgb(0,156,255)'
},{
x: 3,
low: Date.UTC(2016,2,7),
high: Date.UTC(2016,6,15),
color: "rgb(204,0,0)"
}]
To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).
Marker series:
{
name: 'Markers',
type: 'line',
data: [
{
x: 1,
y: Date.UTC(2016,2,15),
marker: {
fillColor:"#9CCB00"
}
}
Example:
https://jsfiddle.net/jlbriggs/x7c3t81n/
Output:
You need to specify that in the data array directly:
Example code:
data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]
Anything that you can specify in the plotOptions that affects the data point, you can specify in this way for a specific data point.
Any point for which you don't specify anything, follows the default options, or the options specified in the plotOptions.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/126/
Output:
I'm trying to use Highcharts to create a graph similar to what's shown below. As clear, the 1st column (100%) is a sum of all others. The approach I thought of was to have invisible series below each of the individual categories to give them their raised look. The only thing that's holding me back is the thought of the situation where I might have to deal with say 30+ categories (possible in our application). Is there any simpler way to achieve the same results?
I can't post the image directly as I'm a new user. Sorry.
http://i.stack.imgur.com/RBWIf.png
I would suggest taking a look at the "low" property which is shown here:
http://fiddle.jshell.net/8JP8T/
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column'
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr']
},
series: [{
data: [{
low: 1,
y: 2
}, {
low: 2,
y: 4
}, {
low: 0,
y: 4
}, {
low: 4,
y: 5
}]
}]
});
You'll still have to preprocess your data to get the correct y value and low value, but it seems doable?
For column chart, for each point you can specify the y value and the corresponding low to create a floating column.
series: [{
data: [
{y: 29.9, low: 20},
{y: 50, low: 20},
{y: 100, low: 50}
]
}]
See this example on jsfiddle.