Related
I am trying to create line chart with react-chart-2 and NextJs, and it seems to work fine on development.
But when I build project, I only got line chart with gray background. It very bad, how can I fix it. Thanks
What I want to get:
What I want to get
But what I really get:
What I really get
My code:
config = {
data: {
datasets: [
{
data: data ? data : [],
borderColor: '#ff0000',
borderWidth: 1,
radius: 0,
},
],
},
// text color "#fff"
Text: {
style: {
color: '#fff',
},
},
options: {
animation: false,
interaction: {
intersect: false,
},
plugins: {
legend: false,
},
scales: {
x: {
type: 'linear',
grid: {
display: false,
// borderColor: '#fff',
},
ticks: {
display: false,
},
},
y: {
grid: {
display: false,
borderColor: '#fff',
},
ticks: {
display: false,
},
},
},
},
},
My component:
<Line
options={config.options as any}
data={config.data as any}
/>
I have a chart with daily values of the month of October.
Two buttons: week and month.
Week plotband has to be identical with month plotband: First 2 days are green, next 5 days are blue in month plotband. When selecting week, the range date 1-7 should be same colour green and blue.
Highcharts.chart('container', {
chart: {
type: 'column',
},
title: {
text: 'How long time a TR has been placed in stages longer than 48 hours'
},
legend: {
enabled: true
},
subtitle: {
text: 'Input - verify should max be 48 hours = green zone'
},
data: {
csv: document.getElementById('csv').innerHTML
},
plotOptions: {
column: {
},
series: {
dataLabels: {
enabled: false,
format: '{point.y}'
}
}
},
tooltip: {
},
rangeSelector: {
buttonSpacing: 10,
enabled: true,
inputEnabled: false,
selected: 1,
buttons: [{
type: 'week',
count: 1,
text: 'Week'
}, {
type: 'month',
count: 1,
text: 'Month'
}],
},
xAxis: [{
id: 'one',
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
plotBands: [{
from: 1538352000000,
to: 1538524800000,
color: '#E8F5E9'
}, {
from: 1538524800000,
to: 1538870400000,
color: '#E0ECEC'
}, {
from: 1538870400000,
to: 1539475200000,
color: "#FFFDE7"
}, {
from: 1539475200000,
to: 1540944000000,
color: "#FFEBEE"
}],
}, {
id: 'two',
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
plotBands: [{
from: 1538352000000,
to: 1538524800000,
color: '#E8F5E9'
}, {
from: 1538524800000,
to: 1538870400000,
color: '#E0ECEC'
}],
}],
yAxis: {
min: 0,
max: 100,
title: {
text: 'TRADING RECORDS',
}
}
});
Please see jsfiddle
Is there a way to toggle between two xaxis with different plotBands: when clicking on the 'week' button, one plotband will display and when clicking on the 'month' button another plotband will display. So the colours of the plotband is relative to the dates?
I assume I have to use event functions like setExtremes and afterSetExtremes, but not sure how to do it?
Thanks much appreciated for help.
I managed to simulate the output with this function:
events: {
afterSetExtremes: function (e) {
if (e.trigger == "rangeSelectorButton" &&
e.rangeSelectorButton.text == "Week") {
// it is your button that caused this,
// so setExtrememes to your custom
// have to do in timeout to let
// highcharts finish processing events...
setTimeout(function () {
Highcharts.charts[0].xAxis[0].setExtremes(1538352000000, 1538524800000)
}, 1);
}
},
}
But it only work when selecting specific: setExtremes(1538352000000, 1538524800000)
I think a scaleable solution for any 7 days would require some sort of exception functionality for remove current plotband on xaxis with addplotband
Updated fiddle
I added custom buttons instead: https://forum.highcharts.com/viewtopic.php?t=31649
<div class="btn-group" data-toggle="buttons">
<button class="btn btn-custom" id="one">48 hours</button>
<button class="btn btn-custom" id="two">7 days</button>
<button class="btn btn-custom" id="three">14 days</button>
<button class="btn btn-custom" id="four">31 days</button>
<button class="btn btn-custom" id="all">All</button>
</div>
<div id="containerbenchmark"></div>
$.get('bm.csv', function (bmcsv) {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'containerbenchmark',
type: 'areaspline',
},
title: {
text: ''
},
legend: {
enabled: true
},
subtitle: {
text: 'Input - verify - close should max be 48 hours = green zone'
},
data: {
csv: bmcsv,
},
plotOptions: {
areaspline: {
stacking: 'normal'
},
series: {
dataLabels: {
enabled: false,
format: '{point.y}'
}
}
},
tooltip: {
/*headerFormat: '<span style="font-size: 16px">{point.key}</span><br/>',
pointFormat: '<span style="font-size: 14px; color:{series.color}">{series.name}: <span style="font-size: 14px">{point.y} {point.total}</span><br/>',
footerFormat: '<span style="font-size: 16px">{point.total}</span><br/>',*/
shared: true,
useHTML: true,
formatter: function () {
var tooltip = '<table><span style="font-size: 16px">' + Highcharts.dateFormat('%e/%b/%Y',
new Date(this.x)) + '</span><br/><tbody>';
//loop each point in this.points
$.each(this.points, function (i, point) {
tooltip += '<tr><th style="font-size: 14px; color: ' + point.series.color + '">' + point.series.name + ': </th>' +
'<td style="font-size: 14px; text-align: right">' + point.y + '</td></tr>'
});
tooltip += '<tr><th style="font-size: 16px">Total: </th>' +
'<td style="font-size: 16px; text-align:right"><span>' + this.points[0].total + '</span></td></tr>' +
'</tbody></table>';
return tooltip;
}
},
rangeSelector: {
selected: 2,
enabled: true,
inputEnabled: true,
inputDateFormat: "%m/%d/%Y",
inputEditDateFormat: "%m/%d/%Y",
inputDateParser: function (s) {
return Date.UTC(
parseInt(s.substr(6, 4)),
parseInt(s.substr(0, 2) - 1),
parseInt(s.substr(3, 2)),
12
)
}
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
millisecond: '%H:%M:%S.%L',
second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b \'%y',
year: '%Y'
},
plotBands: [{
from: 1538352000000,
to: 1538524800000,
color: '#cae8cc',
label: {
text: '> 48 hours',
style: {
color: 'black',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize: '14px'
}
}
}, {
from: 1538524800000,
to: 1538870400000,
color: '#d0e2e2',
label: {
text: '> 7 days',
style: {
color: 'black',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize: '14px'
}
}
}, {
from: 1538870400000,
to: 1539475200000,
color: "#fff9b3",
label: {
text: '> 14 days',
style: {
color: 'black',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize: '14px'
}
}
}, {
from: 1539475200000,
to: 1540944000000,
color: "#ffb3be",
label: {
text: '> 31 days',
style: {
color: 'black',
fontWeight: 'bold',
textTransform: 'uppercase',
fontSize: '14px'
}
}
}],
},
yAxis: {
min: 0,
title: {
text: 'TRADING RECORDS',
}
}
}, function (chart) {
// apply the date pickers
setTimeout(function () {
var rangeSelector = $('#containerbenchmark input.highcharts-range-selector');
rangeSelector.datepicker({
autoclose: true,
todayHighlight: true
}) /*.datepicker('update', new Date())*/ ;
var inputMin = rangeSelector.filter('[name=min]');
var inputMax = rangeSelector.filter('[name=max]');
inputMin.datepicker().on("changeDate", function (event) {
console.log(inputMin.datepicker("getDate"));
console.log(inputMin.datepicker("getUTCDate"));
});
}, 1000);
});
$('#one').click(function () {
toggleActiveState(false);
chart.xAxis[0].setExtremes(
1538352000000,
1538524800000
);
});
$('#two').click(function () {
toggleActiveState(false);
chart.xAxis[0].setExtremes(
1538524800000,
1538870400000
);
});
$('#three').click(function () {
toggleActiveState(false);
chart.xAxis[0].setExtremes(
1538870400000,
1539475200000
);
});
$('#four').click(function () {
toggleActiveState(false);
chart.xAxis[0].setExtremes(
1539475200000,
1540944000000
);
});
$('#all').click(function () {
chart.xAxis[0].setExtremes(
event.min,
event.max
);
});
});
I'm trying to create a chart with 2 horizontal lines using kendo, in order to draw those 2 lines, I'm using plotBands in the valueAxes.
I wish to draw the lines at the values warningMax and warningMin, the problem is that the values of them could be 3k or 350k, is there a way to adjust the thickness of the lines and place a min value in the axis to make sure that when values of series are too small, at least the red line would show at the top?
$("#DivId").kendoChart({
theme: 'bootstrap',
title: {
text: "Title Name",
font: "bold 24px Arial,Helvetica,sans-serif",
color: "black"
},
legend: {
position: "bottom"
},
chartArea: {
background: ""
},
seriesDefaults: {
type: "line",
style: "smooth",
labels: {
visible: false,
format: "{0:c}"
},
},
series: data.series,
valueAxes: [{
name: "axesName1",
plotBands: [
{
from: warningMax,
to: warningMax + 50,
color: "green"
},
{
from: WarningMin,
to: WarningMin + 50,
color: "red"
}
],
title: { text: "Axes Name1" },
labels: {
format: "n0"
},
color: "#428bca" // Dark Blue
}, {
name: "axesName2",
title: { text: "Axes Name2" },
labels: {
format: "p2"
},
color: "#5cb85c" // Green
}],
categoryAxis: {
categories: data.categories,
axisCrossingValues: [0, 31],
majorGridLines: {
visible: false
},
labels: {
rotation: "auto"
}
}
});
I would like to have top of the box and bottom of the box in different colors, and also top of the whisker and bottoom of the whisker in different color for each box (region).
But all of the lines in the box are in the same color (red) and top and bottom of the whisker are in the same color (green)
Live demo with steps to reproduce
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'All Patients'
},
legend: {
enabled: true
},
xAxis: {
categories: ['Asia Pacific', 'Europe', 'Latin America', 'North America', 'SWAC'],
title: {
text: ' '
}
},
yAxis: {
title: {
text: 'Annual Center Volume 2016'
},
tickInterval: 5,
min: 0,
max: 75
//plotLines: [{
// value: 932,
// color: 'red',
// width: 1,
// label: {
// text: 'Theoretical mean: 932',
// align: 'center',
// style: {
// color: 'gray'
// }
// }
//}]
},
plotOptions: {
boxplot: {
fillColor: '#F0F0E0',
lineWidth: 2,
upperQuartileColor: 'green',
lowerQuartileColor: 'green',
medianColor: '#0C5DA5',
medianWidth: 3,
stemColor: '#A63400',
stemDashStyle: 'solid',
stemWidth: 1,
whiskerColor: '#3D9200',
whiskerLength: '20%',
whiskerWidth: 3
}
},
series: [{
name: 'Region Runs',
showInLegend: false,
color: 'red',
data: [
[2, 4, 18, 43, 53],
[5, 9, 16.5, 32, 52],
[1, 3, 6, 11.5, 21],
[3, 9, 20, 38, 73],
[1, 2, 8, 16, 20]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: '75th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: 'Median',
type: 'line',
color:'#0C5DA5',
marker: {
symbol: 'square'
},
},
{
name: '25th Percentile',
type: 'line',
color: 'red',
marker: {
symbol: 'square'
},
},
{
name: '90th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
},{
name: '10th percentile',
type: 'line',
color: '#3D9200',
marker: {
symbol: 'square'
},
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
Box Plot Charts -->
<div id="pdfContentHolder" style="margin:auto; width: 720px; height: 800px;">
<div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto" >
</div>
</div>
https://jsfiddle.net/hew8nq5u/
Thanks in advance guys!
Currently it's not possible in Highcharts to have box bottom and top in different colors. Same with top and bottom whiskers. Here is an explanation and enhancement proposition from github issue (https://github.com/highcharts/highcharts/issues/6796):
Currently each box is a single SVG shape and a border is applied by
stroke parameter which cannot be "separated" for smaller edges. As a
result, you can apply only single color.
Your goal requires a rebuild core of boxplot, so we cannot threat it
as a bug, but feature request.
I already searched for this question for like more than 100 times and it´s always the same answers, but it doesn´t help me. So my question is:
How can I switch the views by click on a button in sencha touch 2?
I have 2 views:
first
Ext.define('Meet_Me.view.Menue', {
extend: 'Ext.Container',
alias: 'widget.Menue',
layot: 'card',
xtype: 'menue',
requires: [],
config: {
xtype: 'container',
layout: 'vbox',
centered: true,
items: [
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Erstellte Events anzeigen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'button1',
},
{
xtype: 'button',
text: 'Event erstellen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'event_erstellen_button'
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Event suchen',
width: 300,
height: 100,
margin: '30 5 5 30',
id: 'event_suchen_button'
},
{
xtype: 'button',
text: 'Teilnehmende Events anzeigen',
width: 300,
height: 100,
margin: '30 5 5 30',
badgeText: 'New',
id: 'teilnehmende_events_button'
}
]
},
{
xtype: 'container',
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Profil',
width: 350,
height: 100,
margin: '30 5 5 30',
//centered: true,
id: 'profil_button'
}
]
}
]
}
});
The important thing here is the Button with the id: 'button1'
The second view:
Ext.define('Meet_Me.view.Login', {
extend: 'Ext.Container',
alias: 'widget.Login',
xtype: 'login',
layot: 'card',
requires: [
'Ext.Panel',
'Ext.field.Email',
'Ext.field.Password',
'Ext.Button',
'Ext.Label'
],
config: {
items: [
{
title: 'Login',
xtype: 'panel',
itemId: 'homePanel',
layout: 'fit',
items: [
{
xtype: 'panel',
itemId: 'loginPanel',
//centered: true,
//margin: '5% 30% 0% 10%',
items: [
{
items: [
{
xtype: 'emailfield',
width: '70',
label: 'Email',
placeHolder: 'email#example.com'
},
{
xtype: 'passwordfield',
width: '70',
label: 'Passwort',
placeHolder: 'min. 6 Zeichen'
},
]
},
{
xtype: 'button',
id: 'loginButton',
margin: 20,
padding: 8,
text: 'Anmelden'
},
{
xtype: 'button',
itemId: 'registerButton',
margin: 20,
padding: 8,
text: 'Registrieren'
}
]
},
{
xtype: 'panel',
hidden: true,
itemId: 'welcomePanel',
items: [
{
xtype: 'label',
//centered: true,
html: 'Welcome!',
itemId: 'welcomeLabel'
}
]
}
]
}
]
}
});
and the Controller:
Ext.define('Meet_Me.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
'Meet_Me.view.Login',
'Meet_Me.view.Menue',
],
config: {
touchstarttime: 0,
control: {
'#button1': {
tap: 'btn1click'
}
}
},
btn1click: function (button, e, options) {
console.log('Button 1 was clicked');
Ext.Viewport.add({
xtype: 'Login'
});
}
});
The problem is that the Login is shown but the first view with the 4 buttons is still there. How do get the first view removed?
you can use Ext.Viewport.animateActiveItem()
If you want to use 'card' layout, setActiveItem() is change items.
See following fiddle.
https://fiddle.sencha.com/#fiddle/16hu