i want to create kendo ui area chart that looks like this
I got this so far
Ho do i get vertical border slopes?
demo http://codepen.io/lev-savranskiy/pen/GWXMJJ
{
series: [{
type: "line",
data: [100,100,86,73,66,63,59,56,55,52],
name: "",
color: "#599333",
axis: "perc",
labels: {
visible: true,
format: "{0}%",
background: "transparent"
}
}, {
type: "area",
opacity: 1,
data: [100,100,86,0,0,0,0,0,0,0],
name: "Glance/Delete (0-2 seconds)",
color: "#A3DE73",
axis: "time"
}, {
type: "area",
opacity: 1,
data: [0,0,86,73,66,63,0,0,0,0],
name: "Skim (3-7 seconds)",
color: "#7BC143",
axis: "time"
}, {
type: "area",
opacity: 1,
data: [0,0,0,0,0,63,59,56,55,52],
name: "Read (8-15 seconds)",
color: "#599333",
axis: "time"
}
],
valueAxis: [{
name: "time",
min: 0,
max: 110,
visible: false
}, {
name: "perc",
labels: {
template: "#= value # %"
},
min: 0,
max: 110
}],
categoryAxis: {
categories: [0 ,2, 4, 6, 8, 10, 12, 14, 16, 18, 20],
labels:{
template: '#= value#s'
},
justified: true
}
}
}
description - i do not really know what to add here
Use null instead of 0 on the area series and then set
missingValues: "gap",
API: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.missingValues
Updated CODEPEN
Related
I am building an echarts scatter graph that contains 6 points. I would like to manually assign a label to each point, like I did with the label of X and Y axis.
Is there a way to achieve this? I searched in Apache Echarts docs but I did not find any useful setting for assigning a label to "data" values.
Here is the source code of my graph:
option = {
xAxis: {
data: ['Low', 'Med', 'High'],
name: "Value",
},
yAxis: {
min: '5',
name: "Score",
},
series: [
{
type: 'scatter',
symbolSize: 20,
data: [
[2,9.8],
[1,8.8],
[2,5.9],
[1,9.8],
[1,10.0],
[3,9.8],
[2,10.0],
[1,9.8],
[2,5.9],
[1,9.8]
],
label: {
show: true,
position: 'right',
color: "black",
fontSize: 16,
},
}
],
grid:{
show: true,
backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(255, 102, 102)'
},
{
offset: 1,
color: 'rgb(153, 255, 153)'
}])
},
};
You could specify the labels as an additional value in the data array:
data: [
[ 2, 9.8, "label1" ],
[ 1, 8.8, "label2" ],
...
Then use a formatter function in your label definition, to select the third element of the data array as the label:
label: {
...
formatter: function(d) {
return d.data[2];
}
I also found this solution, working as well as Chris one:
series: [
{
type: 'scatter',
symbolSize: 15,
data: [
{value: [2,9.8] , name: 'value1'},
{value: [1,8.8] , name: 'value2'},
{value: [2,5.9] , name: 'value3'},
],
label: {
show: true,
position: 'right',
formatter: params => params.name,
color: "black",
fontSize: 16,
},
I have a chart with average CPU (AVG-CPU) and Max CPU (MAX_CPU). AVG-CPU is BAR while MAX-CPU is Line chart. I'm trying to use 2 yaxis (left is AVG_CPU / right is MAX_CPU). However, when I change min/max on the yaxis for AVG_CPU in order to scale it better, the MAX_CPU lines go off the chart (they don't show anymore).
Here is the code w/o scaling AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
]
Here is results:
Here is code when I try to scale the AVG-CPU
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 50,
interval: 5,
axisLabel: {
formatter: '{value} %'
}
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: {
formatter: '{value} %'
} }
],
And here is the results:
Note that the MAX_CPU lines are gone. They seem to be off the chart because I scaled the AVG-CPU.
Any Ideas or suggestions would be welcomed.
#JimRitchhart, both series use the same yAxis and type: 'line' just didn't fit in new range in view frame when you change max value. For display both series need explicitly bind each to yAxis index.
series: [{
type: 'bar',
yAxisIndex: 0,
//...
},
{
type: 'line',
yAxisIndex: 1,
//...
}]
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data:['Label']
},
xAxis: {
data: ["Category1","Category2","Category3","Category4","Category5","Category6"]
},
yAxis: [
{
id: 'AvgAxis',
type: 'value',
name: 'Average CPU %',
min: 0,
max: 30,
interval: 5,
axisLabel: { formatter: '{value} %' }
},
{
id: 'MaxAxis',
type: 'value',
name: 'Max CPU %',
min: 0,
max: 100,
interval: 10,
axisLabel: { formatter: '{value} %' }
}
],
series: [{
yAxisIndex: 0,
name: 'Average',
type: 'bar',
data: [5, 7, 4, 3, 4, 6],
},
{
yAxisIndex: 1,
name: 'Max',
type: 'line',
data: [65, 80, 96, 70, 70, 80],
}
]
};
myChart.setOption(option);
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts-en.common.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
I'm trying to use rotated labels in my graph. However, the labels are getting cropped. How can I make more space in the bottom so that the labels can fit?
options = {
xAxis: {
type: "category",
data: axis,
axisLabel: {
show: true,
interval: 0,
rotate: 45,
},
axisTick: {
show: true,
interval: 0
}
},
yAxis: {
type: "value",
data: axis,
min: 1,
minInterval: 1,
maxInterval: 1,
max: 15,
axisTick: {
interval: 1
}
},
series: [
{
type: "bar",
stack: "minmax",
itemStyle: {
normal: {
color: "rgba(0,0,0,0)"
}
},
data: maxs
},
{
type: "bar",
stack: "minmax",
data: mins,
itemStyle: { color: "#63869e" }
},
{
symbolSize: 20,
data: scatter,
type: "scatter",
itemStyle: { color: "black" },
},
]
};
To contain the label you can use:
options = {
grid: {
containLabel: true,
}
}
Space can be added with grid option bottom:
options = {
grid: {
bottom: 100,
}
}
I'm successfully graphing a bunch of data points using Chartjs 2 with React, with a category Y-axis, but would like to label them with their category label. They're currently showing "undefined" as a tooltip value:
Here's what I've got right now (not working):
labels: this.state.graphData.eventWeekArray,
datasets: [
{
label: title,
labels: data,
fill: false,
lineTension: 0.1,
borderColor: colorArray()[counter],
borderCapStyle: 'butt',
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
pointBorderWidth: 1,
pointHoverRadius: 6,
pointHoverBackgroundColor: 'rgba(75,192,192,1)',
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 3,
pointRadius: 1,
pointHitRadius: 1,
showLine: true,
steppedLine: true,
spanGaps: true,
data: data,
year: dataYear,
measurement: 'state'
}
]
Using options and scaleLabel doesn't work, either:
const options = {
legend: {
display: true
},
scales: {
xAxes: [
{
scaleLabel: {
display: true,
labelString: 'Weeks'
},
ticks: {
autoSkip: true,
autoSkipPadding: 20
}
}
],
yAxes: [
{
type: 'category',
labels: this.state.eventLabelArray
},
{
type: 'linear',
labels: this.state.brixLabelArray
}
]
}
};
I'm using HighCharts to display charts on my site.
What I'd like to achieve is just a line chart with (zoomable) Date-Time X-Axis and numbers in Y-Axis.
But the result is messed up:
I load data by an ajax call, create an array and use chart.series[0].setData(chartData); to set the chart's data. Below is a sample for chartData:
[[1343071800000, 17], [1343158200000, 171], [1343244600000, 291], [1343075400000, 18],
[1343161800000, 74], [1343248200000, 293], [1343165400000, 183], [1343251800000, 296]]
Also, I use DotNetHighCharts since I'm using ASP.NET MVC 3, but the generated javascript to create the chart is as follows:
chart = new Highcharts.Chart({
chart: { renderTo:'chart_container' },
legend: { align: 'left', borderWidth: 0, floating: true, layout: 'horizontal', verticalAlign: 'top', y: 20 },
plotOptions: { series: { cursor: 'pointer', marker: { lineWidth: 1 }, point: { events: { click: function() { alert(Highcharts.dateFormat('%A, %b %e, %Y', this.x) +': '+ this.y +' visits'); } } } } },
subtitle: { text: 'Source: Google Analytics' },
title: { text: 'Daily visits at www.highcharts.com' },
tooltip: { crosshairs: true, shared: true },
xAxis: { gridLineWidth: 1, labels: { align: 'left', x: 3, y: -3 }, tickInterval: 604800000, tickWidth: 0, type: 'datetime' },
yAxis: [{ labels: { align: 'left', x: 3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, showFirstLabel: false, title: { text: '' } }, { gridLineWidth: 0, labels: { align: 'right', x: -3, y: 16, formatter: function() { return Highcharts.numberFormat(this.value, 0); } }, linkedTo: 0, opposite: true, showFirstLabel: false, title: { text: '' } }],
series: [{ name: 'All visits' }]
Your dataset is not in chronological order. So the charting system is joining all the points as best it can.
For time-based series it is always best to sort your time from earliest to latest.