I want to create a line chart with 3 different series using ExtJS 4.2.1, but only one of them is displayed, I don't know what I'm doing wrong. I take data from XML file and add it to the store:
Ext.each(arrayOfHeaps, function(item) {
var storeObject;
if (item.description === 'HeapTotal') {
storeObject = {'heapTotalValue': item.value, 'heapTotalDate': new Date(item.date)};
}
else if (item.description === 'HeapUsed') {
storeObject = {'heapUsedValue': item.value, 'heapUsedDate': new Date(item.date)};
}
else {
storeObject = {'heapFreeValue': item.value, 'heapFreeDate': new Date(item.date)};
}
store.add(storeObject);
});
It seems to work fine. One element from store printed in console:
heapFreeDate:""
heapFreeValue:""
heapTotalDate:Thu May 11 2017 04:10:00 GMT+0200 (Środkowoeuropejski czas letni)
heapTotalValue:1607680
heapUsedDate:""
heapUsedValue:""
Code to create chart:
title: 'Wartość',
type: 'Numeric',
position: 'left',
fields: ['heapTotalValue', 'heapFreeValue', 'heapUsedValue'],
grid: true
},{
title: 'Czas',
type: 'Time',
position: 'bottom',
fields: ['heapTotalDate', 'heapFreeDate', 'heapUsedDate'],
dateFormat: 'H:i:s.u',
fromDate: new Date('2017-05-11T04:10:00.055+02:00'),
toDate: new Date('2017-05-11T12:30:00.005+02:00'),
grid: true
}],
series: [{
type: 'line',
id: 'tilingChart',
fields:['heapTotalValue', 'heapTotalDate'],
yField: 'heapTotalValue',
xField: 'heapTotalDate'
},{
type: 'line',
id: 'memoryChart',
fields:['heapFreeValue', 'heapFreeDate'],
xField: 'heapFreeValue',
yField: 'heapFreeDate'
},{
type: 'line',
id: 'defaultChart',
fields:['heapUsedValue', 'heapUsedDate'],
xField: 'heapUsedValue',
yField: 'heapUsedDate'
}]
The chart is created, but second and third series are ignored
Related
I want to create chart like this with highcharts, it is possible to set xAxis like image below?
I try to use tickpoints and tickinterval but still didn't get the result I wanted
Sample of actual data,
This is result I get now, i want to change xaxis into interval 30 minutes like first image
My code
$.ajax({
url: "",
type: 'GET',
dataType:'json',
success: function(data) {
// console.log(data) ;
var chartSeriesData=[];
var chartCatData=[];
$.each(data, function(i,item){
var series_name = item.time;
var series_data = item.power;
chartSeriesData.push(series_data);
chartCatData.push(series_name);
});
Highcharts.chart('power', {
title: {text: ''},
subtitle: {text: ''},
yAxis: {
title: {text: ''}
// ,min: 0, max: 0.010
},
xAxis: {
categories: chartCatData,
title: {
text: ''
},
labels: {
enabled: true
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
plotOptions: {
series: {
label: {
connectorAllowed: false
}
}
},
series: [
{
// name: 'Power',
data: chartSeriesData
}
],
Result console.log(data)
You should use datetime axis type and format your x values as timestamps in milliseconds.
const chartSeriesData = data.map(
item => [new Date(item.date).getTime(), item.power]
);
Highcharts.chart('container', {
xAxis: {
type: 'datetime',
tickInterval: 1000 * 60 * 30
},
series: [{
data: chartSeriesData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/vzepscjr/
API Reference: https://api.highcharts.com/highcharts/xAxis
How to minminum the labels of xaxis in apex chart using angular ?
intializationChartoption(series: number[]):void {
this.lineChartOptions = true
this.title ={
text: 'linechart'
};
this.xaxis= {
type: 'datetime',
labels: {
format: 'MM yyyy'
},
};
this.yaxis ={
show: false,
showAlways: false
}
console.log(this.yaxis)
this.series = [{
name: 'java',
data: series
}]
console.log(this.series)
this.dataLabels ={
enabled: false
}
this.markers ={
size: 0
}
this.chart = {
type: "area",
stacked: false,
height: 250,
animations: {
enabled: false},
zoom: {
type: "x",
enabled: false,
autoScaleYaxis: true
},
toolbar: {
show: false
},
};
}
I have given type date time for x axis but it is not working and in that line chart , values having 8000 data i.e coming from api .
kindly help me to format the data in line chart
As stated in the documentation, the tickAmount does not apply with type = 'datetime'. In my experience does not play good with type = 'category' either.
The solution I've found is to use type = 'numeric', but then you can override the numbers with your own labels. Like this:
xaxis: ApexXAxis = {
type: 'numeric',
tickPlacement: 'between',
tickAmount: 4,
decimalsInFloat: 0,
overwriteCategories: ['0am ', '7am', '3pm', '11pm'],
};
I am trying to create a gantt chart with Chart.js. I use horizontalBar chart type and this works fine if I populate numbers instead of dates, but it does not render when I pass dates as data.
Data structure: Task, Start Date, End Date
this.chartData = {
labels: ['Task 1', 'Task 2'],
datasets: [{
data: ['2019-01-20', '2019-01-30'],
}],
};
this.options = {
title: {
display: true,
text: 'Title of Chart',
},
legend: {display: false},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
},
}],
},
};
Template:
<chart class="chart" type="horizontalBar" [data]="chartData" [options]="options"></chart>
Tried another example
You are passing the values as strings. Try to pass as dates:
datasets: [{
label: 'Demo',
data: [{
t: new Date("2015-3-15 13:3"),
y: 12
},
I'm new using Highcharts and I have a chart with 7 series. Those series shows prices and now I need to show in the main chart tooltip the percentage difference between the prices of the main chart and just another one.
I was watching how to format the tooltip but I can't find how to solve this, maybe is easy or maybe not, so your help will be so appreciated.
Here you can see an example of my code:
series: [{
name: "User Price",
type:'line',
data: JSON.parse(data)
},
{
type: 'line',
name: 'Average Price',
color: "#E82315",
dataLabels: false,
visible: true,
data: JSON.parse(precio_medio)
},
{
type: 'line',
name: 'Other Price',
color: "#CC8604",
visible: false,
dataLabels: false,
data: [0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,
0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884,0.126884]
},
{
type: 'line',
name: 'Other Price 2',
color: "#F29D00",
visible: false,
dataLabels: false,
data: [0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368
,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368,0.124368]
}]
And I want to show in the tooltip the percentage difference between the User Price and the Average price.
Thanks you all in advance.
Try This
formatter:function() {
var pointPct='';
var baseValue= this.points[0].point.y;
var tooTipTxt='';
console.log(baseValue);
$.each(this.points, function(i, point) {
pointPct = (point.y)*100/baseValue;
tooTipTxt += "<span>"+pointPct+"</span> "
});
return tooTipTxt;
}
This is something about the ExtJs5 charts.I have trouble changing the bar chart's labels.
Codes is as below:
Ext.create('Ext.chart.CartesianChart', {
store: {
fields: ['pet', 'households', 'total'],
data: [{
pet: {name:'Cats'},
households: 38,
total: 93
}]
},
axes: [{
type: 'numeric',
position: 'left'
}, {
type: 'category',
position: 'bottom'
}],
series: [{
type: 'bar',
xField: 'pet',
yField: 'households',
label:{
field:'pet',
renderer:function(pet){
return 'Dear '+pet.name;
}
}
}]
});
You must have noticed that the field 'pet' is an object instead of a string.
The renderer in the series label returns the value I want it to be,but the label is still [object Object]!
Labels under the category(x axis in your code) are rendered by 'category' not the series.Try code below:
{
type: 'category',
position: 'bottom',
renderer:function(label){
return label.name;//the var 'label' represents the pet object.
}
}
By the way,I found another problem. No matter how many models are there in the chart store,only the first bar is displayed!