Related
error image click here
dummy arrays example :
plant_arr = ["abc","dbc","asd"]
opr_no_arr = ["company1","company2","company3"]
draft_arr = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Pending For Creation = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
Created = [0:{x:"abc",y:"comapny1"},1:{x:"bds",y:"comapny2"},2:{x:"dbc",y:"comapny3"}]
name: "Pending For Creation",
data: draft_arr,
color:"#000000"
},{
name: "Created",
data: created_arr,
color:'#FF0000'
},{
name: "Execution In Progress",
data: execution_arr,
color:'#FFAE42'
},
{
name: "Completed",
data: completed_arr,
color:'#28a745'
}],
chart: {
height: 350,
type: 'scatter',
zoom: {
enabled: true,
type: 'xy'
},
},
xaxis: {
type: 'category',
//tickAmount: 10,
categories: plant_arr,
}, this is working
yaxis:
{
//type: 'category',
// tickAmount:1,
// categories : opr_no_arr,
labels: {
maxWidth: "auto",
formatter: (val : string, index) => opr_no_arr[index], //error cant show particaular labels
},
title: {
text: "OPR",
style: {
colors: "#000000"
}
}
},
legend: {
position: "top",
horizontalAlign: "right"
}
};
this.first_chartRef = new ApexCharts(document.getElementById('first'), chartOptions);
this.first_chartRef.render();
}
this the image of the output red line are output required
yaxis:
{
type: 'category',
tickAmount:6,
categories : opr_no_arr,
labels: {
maxWidth: "auto",
},
} keep it like this and check ?
We've been trying to find a way to do this through Apexcharts.
We have multiple series with a shared x-axis (date), but different y-axis scales, which we're trying to normalize so we can show multiple data points together.
The only examples we can find for doing this have been supporting only 2 series at maximum:
https://apexcharts.com/docs/chart-types/multiple-yaxis-scales/
Our series may have values like:
[10,12,14,15,16]
[0.3,0.4,0.6,0.7,0.4]
[131,127,150,129,144]
We cannot have these sharing the same y-axis as then the 2nd series would look very squished. Somehow, we're trying to find a way to visually display all these 3 on the same graph in a way that the individual differences are still visible.
So really what we're doing is we're "normalizing" the different y-axis ranges, while still preserving the exact original value.
We're open to alternatives other than Apexcharts too.
Are you trying to plot two series on the same yaxis scale?
if so here's a workaround modelling multiple series with two y-axis
otherwise, if you're just trying to plot as many axes as series, here's an example modeling multiple series with an axis for each serie
First example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
min:0,
max:200,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
min: 0,
max: 1,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
min: 0,
max: 200,
axisTicks: {
show: true,
},
axisBorder: {
show: false
},
labels: {
show:false,
},
title: {
text: "",
},
tooltip: {
enabled: false
}
}
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};
Second example :
var options = {
series: [
{
name: "Serie 1",
type: "line",
data: [10,12,14,15,16]
},
{
name: "Serie 2",
type: "line",
data: [0.3,0.4,0.6,0.7,0.4]
},
{
name: "Serie 3",
type: "line",
data: [131,127,150,129,144]
}
],
chart: {
height: 350,
type: "line",
stacked: false
},
dataLabels: {
enabled: false
},
stroke: {
width: 2
},
xaxis: {
categories: [2009, 2010, 2011, 2012, 2013]
},
yaxis: [
{
seriesName: "Serie 1",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 1",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 2",
opposite: true,
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#FEB019"
},
labels: {
style: {
colors: ["#FEB019"]
}
},
title: {
text: "Axe 2",
style: {
color: "#FEB019"
}
},
tooltip: {
enabled: true
}
},
{
seriesName: "Serie 3",
axisTicks: {
show: true
},
axisBorder: {
show: true,
color: "#008FFB"
},
labels: {
style: {
colors: ["#008FFB"]
}
},
title: {
text: "Axe 3",
style: {
color: "#008FFB"
}
},
tooltip: {
enabled: true
}
},
],
legend: {
horizontalAlign: "left",
offsetX: 40
}
};
I can't find a way to rotate the text labels for the "Name" labels up top. I am working in Observable notebook. Here is the code:
vegalite({
width: 50,
data: { values: StackVega },
mark: 'bar',
encoding: {
column: {
field: "new_name",
type: "nominal",
spacing: 2,
title: "Name"
// rotate:
},
y: {
type: "quantitative",
aggregate: "sum",
field: "new_rate",
title: "Rate",
axis: { grid: false }
},
x: { type: "nominal", field: "stat", axis: { title: "" } },
color: {
type: "nominal",
field: "stat",
scale: { range: ["#675193", "#ca8861"] }
}
},
config: {
view: { stroke: "transparent" },
axis: { domainWidth: 1 }
}
})
I have tried to add axis: { labelAngle: -50 } but that didn't do anything.
For the column encoding, you need to use header: {labelAngle: -50}.
See Header for more information.
Here is an example adapted from https://vega.github.io/editor/#/examples/vega-lite/bar_grouped (open in editor):
Anyone know how to add treemap upon click event on line chart point? Here's my JSFiddle link:
https://jsfiddle.net/ssoj_tellig/d6pfv1bg/19/
When I click on the line chart on the point 0.63 at the third week of sample5, I'd like a treemap to appear at the bottom with the values loaded in var mytreemap_data (or any other values for the demo, doesn't matter). I'd like to understand how it'd work.
Many thanks for your help!
var mytreemap_data = [1528675200000,0.1,0.2,0.3,0.15,0.25]
// How can we show a tree map at the bottom with the values above
// upon clicking on the point 0.63 for the third week of sample 5 ??
const chart_1 = new Highcharts.stockChart('mychart_1', {
chart: {
zoomType: 'x',
type: 'spline',
},
xAxis: {
type: 'datetime',
tickInterval: 86400000 * 7, //show each week
ordinal: false,
labels:{
formatter: function() {
return Highcharts.dateFormat('%d %b %Y', this.value);
},
align: 'right',
rotation: -90,
},
},
yAxis: {
opposite: false,
min: 0,
max: 1,
tickInterval: 0.1,
title: {
text: 'Score'
}
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'top'
},
credits : {
enabled : false
},
navigator :{
enabled: true
},
scrollbar :{
enabled: true
},
rangeSelector: {
enabled: true,
allButtonsEnabled: true,
buttons: [{
type: 'month',
count: 1,
text: '1m'
}, {
type: 'all',
text: 'All'
}],
selected: 1
},
series: [{
name: 'sample1',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.38747025807155444],[1528675200000,0.42678078180915674],[1529280000000,0.4091743882448146],
[1529884800000,0.4238743811604633],[1530489600000,0.39724984766613747],[1531094400000,0.39441610665405447],[1531699200000,0.41417484302834673],
[1532304000000,0.39208450506752085],[1532908800000,0.4026164523657783]],
}, {
name: 'sample2',
data: [[1527465600000,0.44242020440407213],[1528070400000,0.40747025807155444],[1528675200000,0.44678078180915674],[1529280000000,0.4291743882448146],
[1529884800000,0.4438743811604633],[1530489600000,0.41724984766613747],[1531094400000,0.41441610665405447],[1531699200000,0.43417484302834673],
[1532304000000,0.41208450506752085],[1532908800000,0.4226164523657783]],
}, {
name: 'sample3',
data: [[1527465600000,0.42242020440407213],[1528070400000,0.42747025807155444],[1528675200000,0.46678078180915674],[1529280000000,0.4491743882448146],
[1529884800000,0.4638743811604633],[1530489600000,0.43724984766613747],[1531094400000,0.43441610665405447],[1531699200000,0.45417484302834673],
[1532304000000,0.43208450506752085],[1532908800000,0.4426164523657783]],
}, {
name: 'sample4',
data: [[1527465600000,0.52242020440407213],[1528070400000,0.48747025807155444],[1528675200000,0.52678078180915674],[1529280000000,0.5091743882448146],
[1529884800000,0.5238743811604633],[1530489600000,0.49724984766613747],[1531094400000,0.49441610665405447],[1531699200000,0.51417484302834673],
[1532304000000,0.49208450506752085],[1532908800000,0.5026164523657783]],
}, {
name: 'sample5',
data: [[1527465600000,0.62242020440407213],[1528070400000,0.58747025807155444],[1528675200000,0.62678078180915674],[1529280000000,0.6091743882448146],
[1529884800000,0.6238743811604633],[1530489600000,0.59724984766613747],[1531094400000,0.59441610665405447],[1531699200000,0.61417484302834673],
[1532304000000,0.59208450506752085],[1532908800000,0.6026164523657783]],
}],
plotOptions: {
series: {
label: {
connectorAllowed: false,
},
pointstart: 1527465600000,
// pointInterval = 2,
tooltip: {
valueDecimals: 2
},
}
},
responsive: {
rules: [{
condition: {
maxWidth: 500
},
}]
}
});
document.getElementById('button').addEventListener('click', e => {
var series = chart_1.series[0];
var series1 = chart_1.series[1]
var series2 = chart_1.series[2];
if (series.visible & series1.visible & series2.visible) {
series.hide();
series1.hide();
series2.hide();
e.target.innerHTML = 'Show samples 1-3';
} else {
series.show();
series1.show();
series2.show();
e.target.innerHTML = 'Hide samples 1-3';
}
})
Use click event callback function for a point and create another chart with treemap series, for example:
plotOptions: {
series: {
point: {
events: {
click: function() {
Highcharts.chart('treemapContainer', {
series: [{
type: 'treemap',
data: mytreemap_data
}]
})
}
}
},
...
}
}
Live demo: https://jsfiddle.net/BlackLabel/rh7cfxLj/
API Reference: https://api.highcharts.com/highcharts/plotOptions.series.point.events.click
I have bar chart with grouping dynamic data.
I'm getting data from database with no problem I put my data screenshot below
When i want to bind data on chart i'm grouping data I have data in [Jan,Feb,April]
But chart just shows April on x-axis??? Its grouping wrong and put data wrong place
Here my js code
var stocksDataSource = new kendo.data.DataSource({
data: myDearData,
group: {
field: "MshStok"
},
sort: {
field: "TotalPurchase",
dir: "desc"
}
});
$("#yearly-stock-prices").kendoChart({
dataSource: stocksDataSource,
theme: "flat",
autoBind: false,
seriesDefaults: {
type: "area",
overlay: {
gradient: "none"
},
markers: {
visible: false
},
majorTickSize: 0,
opacity: .8
},
series: [{
field: "TotalPurchase"
}],
valueAxis: {
line: {
visible: true
},
labels: {
template: "#= ChangeFormatMoney(value) #",
skip: 2,
step: 2,
color: "#727f8e"
}
},
categoryAxis: {
field: "Months",
labels: {
format: "MMM",
color: "#727f8e"
},
line: {
visible: true
},
majorTicks: {
visible: false
},
majorGridLines: {
visible: false
}
},
tooltip: {
visible: true,
template: "#= series.name # - #= ChangeFormatMoney(value) #"
},
legend: {
visible: true
}
});
Do you have any idea for this?
Thanks
See final entry here: http://www.telerik.com/forums/strange-behaviour-in-category-assignment-grouping-for-charts-bug
Try defining your category field in the series object (series.categoryAxis) instead of the categoryAxis (categoryAcis.field):
series: [{
field: "TotalPurchase",
categoryField: "Months"
}],
DEMO