picture chart
Hello everyone, i'm making chart by chart.js(follow above).
i want to move label on x-axis to bottom but still keep x-axis on top, i tried many way but i can't :((, please help me, thanks.
this my code js:
var ctx = document.getElementById("chartComparementUserCancle").getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)"
}
}],
xAxes: [{
position: "top"
}]
}
}
});
Here you go
var ctx = document.getElementById("chartComparementUserCancle").getContext('2d');
var myBarChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
legend: {
display: false
},
scales: {
yAxes: [{
gridLines: {
color: "rgba(0, 0, 0, 0)"
}
}],
}
}
});
We use Higcharts/Highstocks. (great job!)
We need to render in one chart:
one or many timelines
the chart navigator
marking facts flags
maybe other curves
So we need to use Highstocks
You can see an adaptation of the best base we found here :
http://jsfiddle.net/g4KLk/100/
customrange are representing a duration in seconds
We need to display the navigator in order to be able to zoom on specifiq a timerange
In order to get customrange detailed seconds by seconds, we've had to render a point each second on the last line int the graph.
Any solution to get what we want without having to display a "seconds line" ?
And by the way, is there a solution in order to custom the color of each customrange ?
Regards !
The based JSFidle here :
// WGV chart demo
$(function() {
$.getJSON('//www.highcharts.com/samples/data/jsonp.php?filename=aapl-ohlcv.json&callback=?', function(data) {
var inputs = [{
name: 'Bookmark',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 1, 00),
to: Date.UTC(2013, 9, 27, 9, 1, 01)
}, {
from: Date.UTC(2013, 9, 27, 9, 20),
to: Date.UTC(2013, 9, 27, 9, 21)
}]
}, {
name: 'Mic 1',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 3, 00),
to: Date.UTC(2013, 9, 27, 9, 6, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 18, 00),
to: Date.UTC(2013, 9, 27, 9, 23, 00)
}]
}, {
name: 'Mic 2',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 3, 00),
to: Date.UTC(2013, 9, 27, 9, 9, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 16, 00),
to: Date.UTC(2013, 9, 27, 9, 18, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 42, 00),
to: Date.UTC(2013, 9, 27, 9, 44, 00)
}, {
from: Date.UTC(2013, 9, 27, 9, 49, 00),
to: Date.UTC(2013, 9, 27, 10, 05, 00)
}]
}, {
name: 'Lights',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}, {
name: 'Brakes',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}, {
name: 'Siren',
intervals: [{ // From-To pairs
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00)
}]
}];
// re-structure the tasks into line seriesvar status = [];
var status = [];
$.each(inputs.reverse(), function(i, input) {
var item = {
name: input.name,
data: []
};
$.each(input.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to
});
// add a null value between intervals
if (input.intervals[j + 1]) {
item.data.push(
[(interval.to + input.intervals[j + 1].from) / 2, null]
);
}
});
status.push(item);
});
// split the data set into ohlc and volume
var volume = [],
dataLength = data.length;
for (i = 0; i < dataLength; i++) {
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// set the allowed units for data grouping
var groupingUnits = [
['millisecond', // unit name
[1, 2, 5, 10, 20, 25, 50, 100, 200, 500] // allowed multiples
],
[
'second', [1, 2, 5, 10, 15, 30]
],
[
'minute', [1, 2, 5, 10, 15, 30]
],
[
'hour', [1, 2, 3, 4, 6, 8, 12]
],
[
'day', [1]
]
];
// create the chart
$('#container').highcharts('StockChart', {
chart: {
renderTo: 'container',
marginTop: 40
},
credits: {
enabled: false
},
rangeSelector: {
enabled: false,
inputEnabled: false,
selected: 3,
buttons: [{
type: 'second',
count: 1,
text: '1s'
}, {
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'day',
count: 1,
text: '1d'
}, {
type: 'all',
text: 'All'
}]
},
navigator: {
adaptToUpdatedData: false,
// ^-- This should be false when loading data asynchronously,
// to prevent circular loading
margin: 5,
// maskInside: false,
series: {
lineWidth: 0,
marker: {
enabled: false
}
}
},
title: {
text: '' // title above chart
},
xAxis: {
type: 'datetime',
events: {
afterSetExtremes: function(e) {},
setExtremes: function(e) {
var min = e.min,
max = e.max;
$('#report').html('Start Time: ' + min + ',<br/> Stop Time: ' + max + ',<br/> e.trigger: ' + e.trigger);
}
},
plotBands: [{ // mark the weekend
color: '#222',
from: Date.UTC(2013, 9, 27, 9, 1, 00),
to: Date.UTC(2013, 9, 27, 9, 7, 00),
label: {
text: 'Missing Video',
style: {
color: '#888'
}
}
},
{ // mark the weekend
color: '#222',
from: Date.UTC(2013, 9, 27, 9, 11, 00),
to: Date.UTC(2013, 9, 27, 9, 55, 00),
label: {
text: 'Missing Video',
style: {
color: '#888'
}
}
}, ],
},
yAxis: [{
height: '60%',
opposite: false,
tickInterval: 1,
tickWidth: 0,
labels: {
formatter: function() {
if (inputs[this.value]) {
return inputs[this.value].name;
}
},
align: 'right',
x: -20,
y: 4
},
showLastLabel: true
}, {
height: '40%',
top: '60%',
opposite: false,
offset: 60,
lineWidth: 1,
tickWidth: 0,
labels: {
align: 'right',
formatter: function() {
return this.value + ' MPH';
},
x: 52,
y: 4
},
showLastLabel: true,
title: {
text: 'Speed',
align: 'middle',
opposite: false,
style: {
color: '#fff'
}
}
}],
plotOptions: {
series: {
states: {
hover: {
lineWidth: 2
}
}
},
line: {
linecap: 'square',
marker: {
enabled: true // shows markers for all graphs points
},
point: {
events: {
click: function() {
// let's show the data value of the selected point (on click)
$('#click-value').html(Highcharts.dateFormat('%m/%d/%Y at %H:%M:%S', this.x));
}
}
}
}
},
series: [{
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[0].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[1].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[2].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[3].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[4].data,
dataGrouping: {
units: groupingUnits
}
}, {
states: {
hover: {
lineWidth: 10
}
},
lineWidth: 10,
marker: {
enabled: false, // hide markers for interval bars
lineWidth: 1,
radius: 5
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
},
name: '',
data: status[5].data,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'GPS Speed',
data: [
[Date.UTC(2013, 9, 27, 9, 1, 00), 32],
[Date.UTC(2013, 9, 27, 9, 2, 33), 40],
[Date.UTC(2013, 9, 27, 9, 3, 00), 55],
[Date.UTC(2013, 9, 27, 9, 6, 00), 55],
[Date.UTC(2013, 9, 27, 9, 9, 00), 65],
[Date.UTC(2013, 9, 27, 9, 11, 00), 66],
[Date.UTC(2013, 9, 27, 9, 14, 00), 67],
[Date.UTC(2013, 9, 27, 9, 16, 00), 71],
[Date.UTC(2013, 9, 27, 9, 18, 00), 78],
[Date.UTC(2013, 9, 27, 9, 20, 00), 81],
[Date.UTC(2013, 9, 27, 9, 23, 00), 83],
[Date.UTC(2013, 9, 27, 9, 30, 00), 85],
[Date.UTC(2013, 9, 27, 9, 35, 00), 85],
[Date.UTC(2013, 9, 27, 9, 38, 00), 92],
[Date.UTC(2013, 9, 27, 9, 42, 00), 90],
[Date.UTC(2013, 9, 27, 9, 44, 00), 88],
[Date.UTC(2013, 9, 27, 9, 46, 00), 87],
[Date.UTC(2013, 9, 27, 9, 49, 00), 85],
[Date.UTC(2013, 9, 27, 9, 50, 00), 80],
[Date.UTC(2013, 9, 27, 9, 53, 00), 75],
[Date.UTC(2013, 9, 27, 9, 55, 00), 70],
[Date.UTC(2013, 9, 27, 10, 02, 00), 65],
[Date.UTC(2013, 9, 27, 10, 04, 00), 60],
[Date.UTC(2013, 9, 27, 10, 05, 00), 40],
[Date.UTC(2013, 9, 27, 10, 08, 00), 35]
],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}, {
name: 'Patrol Speed',
data: [
[Date.UTC(2013, 9, 27, 9, 1, 00), 30],
[Date.UTC(2013, 9, 27, 9, 2, 33), 33],
[Date.UTC(2013, 9, 27, 9, 3, 00), 37],
[Date.UTC(2013, 9, 27, 9, 6, 00), 40],
[Date.UTC(2013, 9, 27, 9, 9, 00), 48],
[Date.UTC(2013, 9, 27, 9, 11, 00), 52],
[Date.UTC(2013, 9, 27, 9, 14, 00), 55],
[Date.UTC(2013, 9, 27, 9, 16, 00), 60],
[Date.UTC(2013, 9, 27, 9, 18, 00), 66],
[Date.UTC(2013, 9, 27, 9, 20, 00), 68],
[Date.UTC(2013, 9, 27, 9, 23, 00), 80],
[Date.UTC(2013, 9, 27, 9, 30, 00), 88],
[Date.UTC(2013, 9, 27, 9, 35, 00), 90],
[Date.UTC(2013, 9, 27, 9, 38, 00), 80],
[Date.UTC(2013, 9, 27, 9, 42, 00), 75],
[Date.UTC(2013, 9, 27, 9, 44, 00), 63],
[Date.UTC(2013, 9, 27, 9, 50, 00), 46],
[Date.UTC(2013, 9, 27, 9, 55, 00), 35],
[Date.UTC(2013, 9, 27, 10, 08, 00), 28]
],
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
});
$("#slider").slider({
value: 0,
min: Date.UTC(2013, 9, 27, 9, 1, 00),
max: Date.UTC(2013, 9, 27, 10, 08, 00),
step: 0.0001,
slide: function(event, ui) {
//$("#slider1").slider("value", ui.value);
$("#slider-value").html(ui.value);
}
}).find('.ui-slider-handle').append('<div class="line"></div>');
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 10px;
background: #323334
}
p {
font-family: Helvetica, Arial;
color: #aaa;
font-size: 14px;
}
a, a:visited, a:hover {
color: #FFDD45;
text-decoration: underline;
outline: none;
}
#container {
min-height: 400px;
min-width: 310px;
position: relative;
z-index: 1;
}
.ui-slider {
margin: 0 22px 0 110px;
}
.ui-slider .ui-slider-handle {
background: url('https://revivemarketing.github.io/images/playhead_top.png') no-repeat 50% 50% !important;
border: none !important;
width: 18px !important;
height: 20px !important;
margin-left: -.75em;
cursor: pointer;
outline: none;
}
#slider.ui-slider .ui-slider-handle {
background: url('https://revivemarketing.github.io/images/playhead_bottom.png') no-repeat 50% 50% !important;
}
.ui-slider {
position: relative;
text-align: left;
background: #6F7073 !important;
border-color: #303030 !important;
border-left: none;
border-right: none;
box-shadow: 0px 1px 1px 0px #000 inset !important;
height: .75em;
border-radius: 0;
}
.line {
width: 2px;
background: #FF2600;
border-left: #9A0900 1px solid;
bottom: 15px;
left: 8px;
height: 68px;
z-index: 100;
position: absolute;
pointer-events: none;
box-shadow: 1px 0 0 0 #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://revivemarketing.github.io/js/highcharts-dark.js"></script>
<div id="container"></div>
<div id="slider"></div>
<p id="slider-value"></p>
<p id="click-value"></p>
<p id="report"></p>
I'm trying to change yAxis type of a Highcharts 3.0ß bubble chart to logarithmic, but - when it displays something - it displays a single series, and a single bubble... here's an simple example, based on "official" bubble chart demo : http://jsfiddle.net/FtdYf/
$(function() {
$('#container').highcharts({
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
title: {
text: 'Highcharts bubbles with radial gradient fill'
},
xAxis: {
gridLineWidth: 1
},
yAxis: {
startOnTick: false,
endOnTick: false,
type:'logarithmic'
},
series: [{
data: [
[9, 81, 63],
[98, 5, 89],
[51, 50, 73],
[41, 22, 14],
[58, 24, 20],
[78, 37, 34],
[55, 56, 53],
[18, 45, 70],
[42, 44, 28],
[3, 52, 59],
[31, 18, 97],
[79, 91, 63],
[93, 23, 23],
[44, 83, 22]
],
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(69,114,167,0.5)']
]
}
}
}, {
data: [
[42, 38, 20],
[6, 18, 1],
[1, 93, 55],
[57, 2, 90],
[80, 76, 22],
[11, 74, 96],
[88, 56, 10],
[30, 47, 49],
[57, 62, 98],
[4, 16, 16],
[46, 10, 11],
[22, 87, 89],
[57, 91, 82],
[45, 15, 98]
],
color: 'rgba(170,70,67,0.5)',
marker: {
fillColor: {
radialGradient: { cx: 0.4, cy: 0.3, r: 0.7 },
stops: [
[0, 'rgba(255,255,255,0.5)'],
[1, 'rgba(170,70,67,0.5)']
]
}
}
}]
});
});
So here's my question : is logarithmic axis (X and Y) possible on a bubble chart, and if so, why do it displays just a single series and a single bubble ?
Thanks for help !
You can set tickPositions or create your own tickPositioner. For example: http://jsfiddle.net/Fusher/FtdYf/2/