Related
I'm trying to recreate the ECharts "Multi Title Gauge" example (a gauge with three pointers in different colors) but using a dataset rather than the gauge data values in the series.data definition. While I can get this to work for a gauge with a single pointer, I cannot get it working for the "Multi Title Gauge".
I've been able to get this to work with line, bar and pie charts.
I did read that the datasets feature, while introduced in 5.0, is not supported by all chart types.
I was encouraged when I was able to get "Gauge Basic Chart" working with a dataset. But have not been able to get "Multi Title Gauge" to work with a dataset.
The closest I have gotten to having "Multi Title Gauge" use a dataset is by using multiple series' and datasets. Each dataset has only 1 value.
ChartOptions={
dataset: [
{ source: [ ["Series1"], [46] ] },
{ source: [ ["Series2"], [56] ] }
],
series: [
{
name: "Series1",
type: "gauge",
datasetIndex: 0,
progress: { show: true },
title: { offsetCenter: ["-60%", "82%"] },
detail: {
formatter: "R1",
offsetCenter: ["-60%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
},
{
name: "Series2",
type: "gauge",
datasetIndex: 1,
progress: { show: true },
title: { offsetCenter: ["0%", "82%"] },
detail: {
formatter: "R2",
offsetCenter: ["0%", "97%"]
},
min: 0,
max: 180,
splitNumber: 9,
axisTick: { splitNumber: 4 }
}
]
}
However, both pointers are blue - there is no automatic color change for the different series' and issues with the legend. There is quite a bit of repetition in the data configuration. Using a dataset would (as designed) separate the config from the data.
I have also tried a single dataset with multiple values and then using 'encode' in the series, but 'encode' seems to be ignored for Gauge.
My preference is to standardize on using a dataset for all my charts. But if it's not fully supported for Gauge, then I'll take a different approach.
Any insight would be appreciated.
I have a fairly simple ant column chart, this is it:
import React from "react";
import ReactDOM from "react-dom";
import { Column } from "#ant-design/plots";
const DemoColumn = () => {
const data = [
{
type: "Value 1",
value: 315801
},
{
type: "Value 2",
value: 222095
},
{
type: "Value 3",
value: 10800
}
];
const config = {
data,
loading: data.length === 0,
xField: "type",
yField: "value",
seriesField: "type",
yAxis: {
label: {
formatter: (v) => v
}
},
xAxis: false,
height: 200,
autoFit: false,
legend: {
position: "bottom",
flipPage: false
},
interactions: [
{
type: "element-active"
}
],
label: {
position: "top",
offsetY: 8,
formatter: ({ value }) => value
}
};
return <Column {...config} />;
};
ReactDOM.render(<DemoColumn />, document.getElementById("container"));
The problem is, that the number of Value 1 is hanging off the chart. I tried setting the padding but this did not help, it acutally screwed the whole chart up?!?
Here is also a fiddle: https://codesandbox.io/s/cool-microservice-gbrbm9?file=/index.js:0-929
Fixed it myself by adding
appendPadding: 10
There is an Open Bug in AntD GitHub [BUG] Label of column charts are being cut out if label position is set to 'top' officials for this issue. Some member of ant design team has given an answer as set limitInPlot: true in config. I tried that but didn't work.
I tried with adjusting height prop and offsetY in lable prop inside config. This is just tricky option for you to achieve what you want.
Option 1 -
label: {
position: "top",
offsetY: 15, // change offset to this then value will not crop as before but just overlap with chart.
formatter: ({ value }) => value
}
Option 2 -
xAxis: false,
height: 750, // increase the chart height and it will show the value with a gap. But this will create a scroll.
autoFit: false,
Option 3 -
You can use mix of above two options with adjusting right values. This will get what you want without a scroll. below values got this result.
xAxis: false,
height: 500, // adjust height
autoFit: false,
legend: {
position: "bottom",
flipPage: false
},
interactions: [
{
type: "element-active"
}
],
label: {
position: "top",
offsetY: 12, // adjust offset
formatter: ({ value }) => value
}
This is the sandboxcode.
Hope this will help to overcome your issue.
I'm trying to make a a combination of a candlestick chart (representing stock data) and a bar chart (representing volume).
I already have them displayed on one chart but the display and layout I'm having trouble with.
For one, the candlestick and bar data are placed side-by-side rather than stacked on top of each other. Another error is the scale of the volume data for the bar chart is not represented properly in the y-axis (which uses data from candlesticks as basis).
Here is my current code to render the chart:
chart = new Chart(ctx, {
type: 'candlestick',
data: {
labels: labelsData,
datasets: [{
label: "My Data",
data: chartData
},
{
label: 'Volume',
data: volData,
type: 'bar'
}]
}
});
labelsData contains the Date values for each item entry
chartData contains JSON object with c,h,l,o,t (close,high,low,open,date) to
represent stock data for each item entry
volData is an array containing numbers to represent volume for each item entry
What should I add to make the candlesticks and bars placed on the same column, as well as have the bars have their own scale so they do not overshoot the height of the chart?
It seems you need to scale the volume data since it's two different value units in Y,
It seems like currentlty there isn't support for this in chartJs I created a feature request, follow the link to see the two issues that were closed due to this.
https://github.com/apexcharts/apexcharts.js/issues/2068
With default configuration you're not easily able to add barcharts.
Here is steps you need to do;
Base config:
const config = {
// type: 'candlestick', // you must remove this, this option is braking the chart
data: {
datasets: []
},
options: {
parsing: false, // must be here, solves another stupid problem
spanGaps: true, // for better performance
animation: false, // for better performance
pointRadius: 0, // for better performance
plugins: {
title: {
display: false,
text: 'Fiyat Grafiği'
},
},
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
type: 'timeseries',
},
y: {
type: 'linear',
},
volume: {
type: 'linear',
beginAtZero: true,
position: 'right',
max: maxVolume * 10, // maxVolume should be the maximum number of volumes
grid: {
display: false, // for better presentation
},
ticks: {
display: false, // for better presentation
},
}
},
interaction: {
intersect: false,
mode: 'index',
},
}
};
Second step is preparing the datasets;
let dataSets = [
{
type: 'candlestick', // this must stay
label: 'Financial Graph',
data: data['klines'].map(function (kline) {
return {
'x': moment(kline['from']),
'o': kline['open_price'],
'c': kline['close_price'],
'h': kline['high_price'],
'l': kline['low_price']
};
}),
color: {
up: 'rgb(26, 152, 129)', // those colors are better than defaults
down: 'rgb(239, 57, 74)', // those colors are better than defaults
unchanged: '#999', // those colors are better than defaults
},
borderColor: {
up: 'rgb(26, 152, 129)',
down: 'rgb(239, 57, 74)',
unchanged: '#999',
},
order: 10,
yAxisID: 'y', // this must stay
},
{
type: 'bar',
label: 'Volume',
data: data['klines'].map(function (kline) {
return {
'x': moment(kline['from']), // i used moment, feel free to use your own time library
'y': kline.quote_asset_volume,
}
}),
backgroundColor: data['klines'].map(function (kline) {
return kline.open_price < kline.close_price ? 'rgb(26, 152, 129)' : 'rgb(239, 57, 74)' // for better presentation
}),
borderColor: '#fff',
borderWidth: 1,
order: 12,
yAxisID: 'volume', // this must stay
barPercentage: 0.5, // this must stay
barThickness: 6, // this must stay
maxBarThickness: 8, // this must stay
},
]
Result;
AS shown in image, i want to change Fill color by point (referring project state in my case so),
visual for my chart
code i have used so far to achieve this is below,
$(function () {
$('#ao-projectssummry-chart').highcharts({
type: "spline",
title: null,
borderRadius : null,
xAxis: {
categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
opposite: true
//type: 'datetime',
//min: Date.UTC(2011, 4, 31),
//max: Date.UTC(2012, 11, 6)
},
yAxis: {
min: 0,
max: 5,
title : null
},
plotOptions: {
series: {
lineWidth: 20,
borderRadius: null,
radius: 0
},
marker: {
radius : 0
}
},
credits : {
enabled : false
},
legend: {
enabled : false
},
series: [{
name: "Project 1",
data: [1, 1, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
},
{
name: "Project 2",
data: [2, {
y: 2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping : true
}
}, 2, 2, 2, {
y:2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
},
]
}]
});
});
so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?
Any help would be appreciated! thanks in advance.
Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.
Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.
The idea:
First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):
chart: {
type: "columnrange",
inverted: true
}
Update the axis settings accordingly (swap x for y).
Set your data with an x value, a low value (starting point), and a high value (end point).
Set the color to whatever you want:
data: [{
x: 1,
low: Date.UTC(2016,3,15),
high: Date.UTC(2016,4,21),
color: 'rgb(0,156,255)'
},{
x: 3,
low: Date.UTC(2016,2,7),
high: Date.UTC(2016,6,15),
color: "rgb(204,0,0)"
}]
To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).
Marker series:
{
name: 'Markers',
type: 'line',
data: [
{
x: 1,
y: Date.UTC(2016,2,15),
marker: {
fillColor:"#9CCB00"
}
}
Example:
https://jsfiddle.net/jlbriggs/x7c3t81n/
Output:
You need to specify that in the data array directly:
Example code:
data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]
Anything that you can specify in the plotOptions that affects the data point, you can specify in this way for a specific data point.
Any point for which you don't specify anything, follows the default options, or the options specified in the plotOptions.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/126/
Output:
I would like to have a flotchart that depicts the distribution of all data (x axis represents the values from 0 to 10, y axis for hour only starting from 7am to 7pm).
I could not figure out how I should set the configuration of flotchart in this regard.
Here is the json sample of my Dataset :
[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], [1409569200000, 7.63], [1409576400000, 3.14],
[1409644800000, 7.45],[1409648400000, 5.71], [1409652000000, 7.50], [1409655600000, 7.63], [1409662800000, 3.14],
[1409731200000, 7.45],[1409734800000, 5.71], [1409738400000, 7.50], [1409742000000, 7.63], [1409749200000, 3.14]]
;
And here is the code for flotchart; The problem with this is that it sorts all the series based on their timestamps. I do not want that.
I would like them to fit in based on their "hour" parameter only.
Anyone knows if only hour on the x-axis without sorting the data series is possible with flotchart ?
$("#a-dag").click(function() {
console.log("a dag filtering will be applied...");
$.plot("#placeholder", [d], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
markings: [{
yaxis: {
from: 0,
to: 4
},
color: "#F2CDEA"
}, {
yaxis: {
from: 4,
to: 7
},
color: "#D7EEE1"
}, {
yaxis: {
from: 7,
to: 12
},
color: "#F2CDEA"
}]
},
xaxis: {
mode: "time",
twelveHourClock: true,
},
yaxis: {
min: 0,
max: 12
}
});
});
Just convert your timestamps to hours, for example like this:
$.each(d, function (index, datapoint) {
datapoint[0] = (new Date(datapoint[0])).getHours();
});
(If you want values with AM / PM change accordingly.)
And of course remove the mode: "time" from your options.
See this fiddle for the changed code.