I am trying to mimic the chart provided in the link Link_here
with my customized data. I get the chart as date v/s temperature. But I don't see the plot of the line chart for t1 field on my chart.
Could some one help me figure out the error.
var storea = Ext.create('Ext.data.Store', {
model: 'WeatherPoint',
data: [
{ temperature: 58, t1 : 23, date: new Date(2013, 1, 1, 8) },
{ temperature: 63, t1 : 52, date: new Date(2013, 1, 1, 9) },
{ temperature: 73, t1 : 56, date: new Date(2013, 1, 1, 10) },
{ temperature: 78, t1 : 67, date: new Date(2013, 1, 1, 11) },
{ temperature: 81, t1 : 87, date: new Date(2013, 1, 1, 12) }
]
});
var chart = Ext.create('Ext.chart.Chart', {
style: 'background:#fff',
animate: true,
store: storea,
shadow: true,
theme: 'Category1',
legend: {
position: 'right'
},
axes: [{
type: 'Numeric',
minimum: 0,
position: 'left',
fields: ['temperature', 't1'],
title: 'Number of Hits',
minorTickSteps: 1,
grid: {
odd: {
opacity: 1,
fill: '#ddd',
stroke: '#bbb',
'stroke-width': 0.5
}
}
}, {
type: 'Category',
position: 'bottom',
fields: ['date'],
title: 'Month of the Year'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'date',
yField: 'temperature',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
xField: 'date',
yField: 't1',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
smooth: true,
fill: true,
xField: 'name',
yField: 'data3',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
var win = Ext.create('Ext.Window', {
width: 800,
height: 600,
minHeight: 400,
minWidth: 550,
hidden: false,
maximizable: true,
title: 'Line Chart',
renderTo: Ext.getBody(),
layout: 'fit',
tbar: [{
text: 'Save Chart',
handler: function() {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function(choice){
if(choice == 'yes'){
chart.save({
type: 'image/png'
});
}
});
}
}, {
text: 'Reload Data',
handler: function() {
// Add a short delay to prevent fast sequential clicks
window.loadTask.delay(100, function() {
storea.loadData(generateData(8));
});
}
}],
items: chart
});
This is what I get with the above code :
When I added fields: ['temperature', 't1', 'date'], to the store it worked for me.
http://jsfiddle.net/x_window/Kce8n/
Related
I have been trying to sum the columns, but also show the the data between the columns.
I've been looking for documentation but haven't found it. I do not know if it is the correct place where I ask the question
Used the option dataLabels.
dataLabels: {
enabled: true,
formatter: function (val) {
return val + "%";
},
offsetY: -20,
style: {
fontSize: '12px',
colors: ["#304758"]
}
},
var options = {
series: [{
name: 'PRODUCT A',
data: [44, 55, 41, 67, 22, 43]
}, {
name: 'PRODUCT B',
data: [13, 23, 20, 8, 13, 27]
}],
chart: {
type: 'bar',
height: 350,
stacked: true,
toolbar: {
show: true
},
zoom: {
enabled: true
}
},
responsive: [{
breakpoint: 480,
options: {
legend: {
position: 'bottom',
offsetX: -10,
offsetY: 0
}
}
}],
plotOptions: {
bar: {
horizontal: false,
borderRadius: 10
},
},
xaxis: {
type: 'datetime',
categories: ['01/01/2011 GMT', '01/02/2011 GMT', '01/03/2011 GMT', '01/04/2011 GMT',
'01/05/2011 GMT', '01/06/2011 GMT'
],
},
legend: {
position: 'right',
offsetY: 40
},
fill: {
opacity: 1
}
};
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
<div id="chart"></div>
However, this just shows the sum of each column.
The intention is to create something called a 'fever chart'.
I have successfully displayed both charts, however, the bubble chart points are inheriting the color of each areaStyle attribute of the line series that it appears in and also preventing the tooltip and label for the bubble chart points from appearing.
To see what I mean please visit https://echarts.apache.org/examples/en/editor.html?c=area-stack and replace the option object with the following:
grid: {
left: '10%'
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if (params.data.length === 4) {
return `Project: ${params.data[3]}<br />
% Chain Completed: ${Math.round(
params.data[0]
)}<br />
% Buffer Consumed: ${Math.round(params.data[1])}`;
} else return;
}
},
xAxis: [
{
type: 'category',
boundaryGap: false,
show: false
},
{
type: 'value',
min: 0,
max: 100,
show: true,
position: 'bottom'
}
],
yAxis: [
{
type: 'value',
min: 0,
max: 120
}
],
series: [
{
name: 'green',
type: 'line',
color: 'green',
stack: 'Total',
areaStyle: { color: 'green', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [0, 80]
},
{
name: 'yellow',
type: 'line',
color: 'yellow',
stack: 'Total',
areaStyle: { color: 'yellow', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [20, 20]
},
{
type: 'line',
name: 'red',
color: 'red',
stack: 'Total',
areaStyle: { color: 'red', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [80, 0]
},
{
type: 'line',
name: 'black',
color: 'black',
stack: 'Total',
areaStyle: { color: 'black', opacity: 0.8 },
emphasis: {
focus: 'none'
},
data: [120, 120]
},
{
name: 'Bubble',
type: 'scatter',
data: [
[
49.82868330885952, //x
27.606461086637275, //y
1000000000, //size
'project 1' //name
],
[
49.82868330885952, //x
64.606461086637275, //y
100000000, //size
'project 2' //name
]
],
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
},
xAxisIndex: 1,
emphasis: {
focus: 'item',
scale: true,
label: {
show: true,
formatter: function (param) {
return param.data[3];
},
position: 'top'
}
},
itemStyle: {
shadowBlur: 10,
shadowOffsetY: 5,
opacity: 1,
color: '#000000'
}
}
]
};```
I solved this by setting the scatter series' zLevel attribute to 1.
name: 'Bubble',
type: 'scatter',
zLevel: 1,
data: [
[
49.82868330885952, //x
27.606461086637275, //y
1000000000, //size
'project 1' //name
],
[
49.82868330885952, //x
64.606461086637275, //y
100000000, //size
'project 2' //name
]
],
symbolSize: function (data) {
return Math.sqrt(data[2]) / 5e2;
}```
I have created one highchart in jsfiddle
Highcharts.chart('container', {
chart: {
type: 'areaspline',
},
title: {
text: 'Soverign Capped 1 year PD',
align: 'left',
backgroundColor: 'gray',
style: {
fontSize: "12px",
}
},
subtitle: {
text: '30 days moving average',
align: 'left',
style: {
color: 'gray',
fontSize: "8px",
}
},
xAxis: {
categories: [
'10/11/2019',
'11/11/2019',
'12/11/2019',
'1/11/2020',
'2/11/2020',
'3/11/2020',
'4/11/2020'
],
min: 0.5,
max: 5.5,
startOnTick: false,
endOnTick: false
},
yAxis: {
title: {
text: 'PD%',
align: 'high',
fontWeight: 'bold'
},
max: 25,
startOnTick: false,
endOnTick: false
},
tooltip: {
enabled: false
},
credits: {
enabled: false
},
plotOptions: {
series: {
marker: {
enabled: false
},
states: {
inactive: {
opacity: 1
}
},
dataLabels: {
enabled: true,
inside: true,
style: {
fontWeight: "bold",
},
formatter: function() {
if (this.x == "4/11/2020") {
return this.series.name;
}
}
}
},
enableMouseTracking: false,
tooltip: {
enabled: false
},
areaspline: {
fillOpacity: 1,
},
},
series: [{
color: '#fbb189',
name: 'Deitrioting',
showInLegend: false,
data: [25, 25, 25, 25, 25, 25, 25]
},
{
color: '#fff2d0',
name: 'Stable',
showInLegend: false,
data: [3, 4, 5, 5, 4, 10, 10]
}, {
color: '#c2e0b7',
name: 'Improving',
showInLegend: false,
data: [1, 3, 4, 3, 3, 5, 7]
},
{
name: '',
showInLegend: false,
type: 'spline',
data: [7.0, 6.9, 9.5, 12, 23, 4, 3]
}
]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
Currently, I have defined different colour for the different series. But for the last date, I want to set the red colour for all the series.
Can you help me with this?
Sample image attached below.
You can use zones:
plotOptions: {
...,
areaspline: {
...,
zones: [{
value: 5.5
}, {
color: 'red',
value: 6.5
}],
},
}
Live demo: https://jsfiddle.net/BlackLabel/m4u5zt8g/
API Reference: https://api.highcharts.com/highcharts/series.area.zones
I'm new using ApexChart and I am having issue with a bar chart. I create the ApexChart, but the columns does not look aligned.
var options777 = {
chart: {
id: 'test',
height: 350,
type: 'bar'
},
plotOptions: {
bar: {
columnWidth: '50%'
}
},
series: [{
name: 'Eligibility',
data: [ 438, 360, 171, 322, 248, 190, 121, 206, 3 ]
}],
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
grid: {
row: {
colors: ['#fff', '#f2f2f2']
}
},
xaxis: {
labels: {
rotate: -45
},
categories: [ "2020-04-27", "2020-04-22", "2020-04-20", "2020-04-24", "2020-04-23", "2020-04-28", "2020-04-25", "2020-04-21", "2020-04-19" ],
tickPlacement: 'on',
type: 'datetime'
},
yaxis: {
title: {
text: 'Eligibility',
},
},
fill: {
type: 'gradient',
gradient: {
shade: 'light',
type: "horizontal",
shadeIntensity: 0.25,
gradientToColors: undefined,
inverseColors: true,
opacityFrom: 0.85,
opacityTo: 0.85,
stops: [50, 0, 100]
},
}
};
var chart777 = new ApexCharts(
document.querySelector("#myChart"),
options777
);
chart777.render();
When the chart is rendered it looks like the image below. Why are the columns like that? Shouldn't it be one beside another?
Here is my working example, its works good but i try change color for zones when i click on chart:
<script type="text/javascript">
function minutesFromMidnight() {
var midnight = new Date();
midnight.setHours( 24 );
midnight.setMinutes( 0 );
midnight.setSeconds( 0 );
midnight.setMilliseconds( 0 );
return Math.floor(1440 -(( midnight.getTime() - new Date().getTime() ) / 1000 / 60));
}
$.getJSON('http://waluty.breakermind.com/symbols/getsymbolsm1chart.php?s=GBPJPY&callback=?', function (data) {
// Plot line id name
var PlotLineId="PlotLine";
// create the chart
var chart = new Highcharts.stockChart('container', {
chart: {
spacing: 20,
height: 600,
backgroundColor: '#2e2e40',
style: {
fontFamily: 'Roboto, sans-serif'
},
resetZoomButton: {
theme: {
display: 'none'
}
},
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands,function(){
if(this.id===PlotLineId)
{
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
});
zones: [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
}
}
},
// buttons navigation png
drilldown: {
activeAxisLabelStyle: {
color: '#202033'
},
activeDataLabelStyle: {
color: '#202033'
}
},
// Scroll chart navogator
navigator: {
enabled: true,
height: 50,
margin: 20,
maskFill: "rgba(102,133,194,0.2)",
maskInside: true,
outlineColor: "#3c3",
outlineWidth: 1,
handles: {
backgroundColor: "#3c3",
borderColor: "#202033"
}
},
// scroll bar bottom
navigation: {
buttonOptions: {
symbolStroke: '#3C3',
theme: {
fill: '#202033'
}
}
},
scrollbar: {
barBackgroundColor: '#3c3',
barBorderRadius: 5,
barBorderWidth: 0,
buttonBackgroundColor: '#ff3d00',
buttonBorderWidth: 0,
buttonBorderRadius: 5,
trackBackgroundColor: 'none',
trackBorderWidth: 8,
trackBorderRadius: 5,
trackBorderColor: '#202033'
},
rangeSelector : {
selected : 1
},
// disabled in css
rangeSelector : {
allButtonsEnabled: true,
buttons: [{
type: 'minute',
count: 1,
text: '1m'
}, {
type: 'minute',
count: 5,
text: '5m'
}, {
type: 'minute',
count: 15,
text: '15m'
}, {
type: 'hour',
count: 1,
text: '1h'
}, {
type: 'hour',
count: 4,
text: '4h'
}, {
type: 'day',
count: 1,
text: '1D'
}, {
type: 'week',
count: 1,
text: '1W'
}, {
type: 'month',
count: 1,
text: '1MN'
}, {
type: 'year',
count: 1,
text: '1Y'
}, {
type: 'all',
text: 'All'
}],
inputEnabled:false,
buttonTheme: {
fill: '#202033',
stroke: '#3c3',
style: {
color: '#707073'
},
states: {
hover: {
fill: '#339933',
stroke: '#000',
style: {
color: 'white'
}
},
select: {
fill: '#ff3d00',
stroke: '#fff',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#202033',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
title: {
text: 'Wykres <?php echo $s; ?>'
},
xAxis: [{
//alternateGridColor: '#FDFFD5',
plotLines: [{ // mark the weekend
color: '#ff3d00',
width: 2,
value: Date.UTC(2017, 2, 3),
dashStyle: 'longdashdot'
}],
tickInterval: 24 * 3600 * 1000,
// one day x label intervals (poziona skala)
type: 'datetime',
labels: {
style: {
color: '#3a3a4s',
fontSize: '1em'
}
},
}],
yAxis: [{
title: {
text: 'Exchange rate'
},
plotLines: [{
value: 0,
color: 'green',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter minimum'
}
}, {
value: 0,
color: 'red',
dashStyle: 'shortdash',
width: 2,
label: {
text: 'Last quarter maximum'
}
}],
//alternateGridColor: '#eee',
gridLineColor: "#202033",
gridLineDashStyle: "longdash",
gridLineWidth: 1,
labels: {
style: {
color: '#eee',
fontSize: '1em'
}
},
}],
series: [{
id: "main",
type: 'spline',
name: '<?php echo $s; ?>',
color: '#33CC33',
negativeColor: '#FF3D00',
data: data,
tooltip: {
color: '#fdcc66',
negativeColor: '#202033',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}">Profit / Loss {series.name}</span>: <b>{point.y:.3f}</b><br/>'
},
tooltip: {
color: '#fdcc66',
color: '#ff6600',
negativeColor: '#FFC4C4',
valueDecimals: 4,
valueSuffix: ' USD',
pointFormat: '<span style="color:{series.color}"> {series.data[0]} Profit / Loss {series.name}</span>: <b>{point.y}</b><br/>'
},
dataGrouping: {
units: [[
'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]
], [
'week',
[1]
], [
'month',
[1, 3, 6]
], [
'year',
null
]]
},
zones: [{
value: 0,
color: '#ff3300', dashStyle: 'solid'
}, {
value: 140,
color: '#ff3300'
}, {
color: '#3c3',
dashStyle: 'solid'
}]
}]
});
console.log(chart.series[0]);
// alert(chart.series[0].data[5].y);
console.log(chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3)));
var id = chart.series[0].xData.indexOf(Date.UTC(2017, 2, 3));
var price = chart.series[0].yData[id];
console.log(price);
//console.log(chart.get("container").data[5].y);
//alert(chart.series[0].data[data.length-1].y);
});
function getYPrice(series){
// get yPrice with date
var id = series.xData.indexOf(Date.UTC(2017, 2, 3));
return series.yData[id];
}
</script>
How change zones level on click (when i click on chart i draw line on yAxis (price) value and then i want change zones levels to this value)?
How can i do that?
You need to call update() method on a proper series - and set new zones for the series.
events: {
click: function(evt) {
var yValue = evt.yAxis[0].value;
var yAxis = evt.yAxis[0].axis;
$.each(yAxis.plotLinesAndBands, function() {
if (this.id === PlotLineId) {
this.destroy();
}
});
yAxis.addPlotLine({
value: yValue,
width: 2,
color: '#99ff00',
color: '#ff3D00',
dashStyle: 'solid',
id: PlotLineId
}, false);
var zones = [{
value: 0,
color: '#ff3300'
}, {
value: yValue,
color: '#ff3300'
}, {
color: '#3c3'
}]
this.series[0].update({
zones: zones
});
}
}
example: http://jsfiddle.net/5uaoyrwd/