I am new to to Echarts(4.8)
Am using this as part of requirement where am stuck with rendering 3d Surface
Have followed example but not what I am looking for
Also I dint find any API documentation for 3D surface here
Have tried 2D curves, works perfectly
On similar line following 3D Surface is not getting rendered
Here is my test json
option = {
tooltip: {},
backgroundColor: '#fff',
visualMap: {
show: false,
dimension: 2,
min: 0,
max: 100,
inRange: {
color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
}
},
xAxis3D: {
type: 'value'
},
yAxis3D: {
type: 'value'
},
zAxis3D: {
type: 'value'
},
grid3D: {
viewControl: {
// projection: 'orthographic'
}
},
series: [{
"name":"test",
"type":"surface",
"data":[
[
"1",
"10",
"100"
],
[
"2",
"20",
"200"
],
[
"3",
"30",
"300"
]
],
}]
}
I must be missing something , any lead would really be helpful
Thanks much in advance ( apologies for bad formatting )
It was data issue also gl package was missing which I think we need to import while along with echart
Thanks
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 want to zoom in such a way that the picture fits correctly. I don't want to display values till 0, but maybe till 18000 on the Y Axis so that chart can be seen well.
option = {
"toolbox": {
"feature": {
"dataZoom": {
"yAxisIndex": "true"
},
"brush": {
"type": ['lineX', 'clear']
}
}
},
"xAxis": {
"data": datelist
},
"yAxis": {},
"series": [
{
"type": 'candlestick',
"data": ohlclist
}
]
}
return(option)
The scale can be set automatically, by setting the scale option from yAxis to true:
yAxis: {
scale: true,
},
Sometimes autoscale won't behave exactly as you want, so you can set the scale manually using the min and max options from yAxis :
yAxis: {
min: 15000,
max: 20000
},
Note: The scale option won't work if min and max are set
In the example below the y-axis crosses at 1, rather than 0. Is there a way to achieve this in echarts?
It seems to me, literally, you can't do this with basic bar chart because it will break the coordinate system and result will be anything but not a bar chart.
If you need only visual like on attached picture then you can hide xAxis and draw its surrogate with markLine but you will have the troubles with bar positioning (that will fix with stack and transparent bars, see below).
If you need real chart with responsive, zoomable and other opts then in the Echarts you can use custom series for build own chart type (see example).
Example how to make picture like attached:
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip: {},
xAxis: {
data: ['Category-1', 'Category-2', 'Category-3', 'Category-4'],
show: true,
axisLine: {
show: true,
lineStyle: {
opacity: 0
}
},
axisTick: {
show: false,
}
},
yAxis: {
max: 4,
min: -1
},
series: [{
name: 'Series-1',
type: 'bar',
stack: 'group',
data: [1, 1, -3],
color: 'rgba(0,0,0, 0)',
}, {
name: 'Series-2',
type: 'bar',
stack: 'group',
data: [{
value: 1,
itemStyle: {
color: 'red'
}
}, {
value: 2,
itemStyle: {
color: 'green'
}
}, {
value: 1,
itemStyle: {
color: 'orange'
}
}],
markLine: {
symbol: "none",
data: [{
silent: false,
yAxis: 1,
lineStyle: {
color: "#000",
width: 1,
type: "solid"
}
}, ],
label: {
show: false,
}
},
}]
};
myChart.setOption(option);
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.min.js"></script>
<div id="main" style="width: 600px;height:400px;"></div>
P.S. If this not a secret, why you need it?
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.
My json looks like this
var jStore = {
" identifier": "cpu",
"items": [
{
"Time": "02:52",
"Used": 100,
"Idle": 0
},
{
"Time": "02:57",
"Used": 100,
"Idle": 0
}....
]
};
I create a datastore and adding to the chart,
var realStore = new dojo.data.ItemFileReadStore({data: jStore});
var Ser = new dojox.charting.DataSeries(realStore, {query: {Idle: "*"} }, "Idle");
var Ser1 = new dojox.charting.DataSeries(realStore, {query: {Used: "*"} }, "Used");
chart.addAxis("x");
chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
chart.addSeries("Used ",Ser);
chart.addSeries("Idle",Ser1);
the chart is rendering properly but the xaxis values are taken default (1,2,3..).
But i need to give the axis value as the Time in my json.
Xaxis should be like 02:52,02:54,02:56
Also in the tool tip it showing only the value i have given the series. But i would like to add the value+ xaxis value. Say for example 100 at 02:54.
Could someone help me on this.
You can specify custom labels for each value as follows:
mychart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
font: "normal normal 10pt Arial",
labels: [{value: 1, text: "Q2 FY11"},
{value: 2, text: "Q3 FY11"},
{value: 3, text: "Q4 FY11"},
{value: 4, text: "Q1 FY12"}]
});
You can also specify custom tooltip text as follows:
mychart.addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]);
In your case since you are using a store, the JSON that feeds the store needs to have a "tooltip" attribute for each value - dojo will use that to populate the tooltip