Adjust the min max values of x-axis to autofit the chart - charts

I am trying to plot a zing chart in angular2. My chart comes out to be like this.
While I want my chart to look like the one I provided below, so that the min and max values of the x-axis are auto adjusted to fit to the area and horizontal width of the chart.
How can I go about doing this? I followed these links but could not get the desired results. Could you point where am I going wrong ?
https://www.zingchart.com/docs/tutorials/chart-elements/configure-chart-scales/#scale-formatting
The options that I gave to plot the chart as follows:
this.charts = [{
id : 'chart-1',
data : {
'type' : 'area',
'scaleX': {
'label': {'text': 'Price'}
},
'scaleY': {
'label': {'text': 'Cumulative Volume'}
},
'plotarea': {
'adjust-layout': true /* For automatic margin adjustment. */
},
'scale-x': {
'auto-fit': true,
'min-value': minValue,
'max-value': maxValue,
'decimals': 2
},
'series': [
{ 'values': this.bidArray },
{ 'values': this.askArray }
],
},
height: 300,
width: 600
}];
}
Edit 1:
bidArray and askArray are of the format array of arrays.


You do not need to set the attribute auto-fit true. This is for charts that have zooming applied.
You do not need to set the attributes min-value or max-value to get the x-axis to fit automatically. It will do this by default.
The problem might lie in the one part of the chart you didn't give any information about. How is your data plotted? What are the value arrays? Array of Arrays?
Post the full chart JSON and I'll get you a demo working. Since your chart is dynamic you can grab the rendering JSON by right clicking on the chart, clicking the View Source option, then copying the contents from the parsed JSON tab.
EDITED NEW ANSWER IN RESPONSE TO FIRST COMMENT BELOW:
Array of arrays does not automatically fit the graph width on scaleX. The reason for this is you are requesting to plot something much more specific than a single dimensional array. So you are right to set the minValue and maxValue.
The main issue is the step value. Since you have defined a step that is less precise than values in the minvalue or maxvalue you must make it match the same precision. For example you put two decimals, execpt your step is set to step:.2 which is only of precision of one decimal. Change that precision to two. step:.01 || .02 to get the desired results you are looking for.
One quick side note. You have two scale-x objects. They get merged internally, but this is dangerous because the lower one will override the first. If you have a large JSON this becomes harder to debug.
demo link
var myConfig = {
"graphset":[
{
"type":"area",
"title":{
"text":"Market Depth",
"font-size":14,
"offset-x":-200,
"offset-y":-5
},
"scaleY":{
"label":{
"text":"Cumulative Volume"
}
},
"plotarea":{
"adjust-layout":true
},
"scale-x":{
"min-value":10.091,
"max-value":11.308,
"step": .01,
"decimals":2,
"label":{
"text":"Price"
}
},
"series":[
{
"values":[[10.091,23128.285630000002],
[10.092,22272.984500000002],
[10.094,22070.219080000003],
[10.118,21630.372470000002],
[10.145,21278.48053],
[10.169,20438.89872],
[10.209,19798.506260000002],
[10.218,19128.53049],
[10.293,18200.525190000004],
[10.316,17625.84755],
[10.341,16860.282690000004],
[10.352,16752.07929],
[10.363,15806.925830000002],
[10.366,15351.489590000001],
[10.372,15088.74344],
[10.393,14793.26244],
[10.401,13968.11667],
[10.423,13873.98204],
[10.456,13655.87469],
[10.476,12866.84064],
[10.535,12518.24981],
[10.602,12503.24074],
[10.623,11940.5453],
[10.632,11939.08057],
[10.634,11838.884329999999],
[10.663,11074.893349999998],
[10.663,10963.316989999998],
[10.666,10584.14343],
[10.667,10358.20835],
[10.671,9942.126730000002],
[10.672,9265.449410000001],
[10.674,8497.838590000001],
[10.679,7865.162790000001],
[10.694,7349.383660000001],
[10.713,6672.761850000002],
[10.736,6026.31731],
[10.741,5674.348190000001],
[10.752,5186.775390000001],
[10.759,4317.745790000001],
[10.807,3807.78019],
[10.827,3638.4528899999996],
[10.831,2816.4248099999995],
[10.834,2426.4046799999996],
[10.854,2423.4017],
[10.854,2184.2459999999996],
[10.855,1448.32144],
[10.856,481.7664500000001],
[10.865,92.60541],
[10.87,59.9149],
[10.874,10.04495]],
backgroundColor: '#424242',
alphaArea:.56,
lineColor: '#424242',
marker: {
backgroundColor:'#424242',
visible:true
}
},
{
"values":[[11.308,26417.464129999997],
[11.285,26220.324189999996],
[11.208,25644.388599999995],
[11.194,25628.031659999997],
[11.188,25031.713569999996],
[11.182,24205.770269999997],
[11.144,23534.17388],
[11.142,22947.082829999996],
[11.113,22639.772689999994],
[11.105,22536.636229999993],
[11.09,21987.267979999993],
[11.087,21137.004579999997],
[11.084,20341.394259999997],
[11.075,19372.91412],
[11.074,18554.458],
[11.064,17632.22014],
[11.053,17063.184230000003],
[11.05,16285.860740000004],
[11.033,15644.169050000006],
[11.022,15330.170840000004],
[11.018,14424.291480000005],
[11.007,13641.930940000004],
[11.001,12755.045610000003],
[10.999,12266.619580000002],
[10.992,12034.113860000001],
[10.981,11362.05282],
[10.98,10739.11108],
[10.977,9945.179989999999],
[10.976,8958.965719999998],
[10.974,8579.633059999998],
[10.972,8124.936529999999],
[10.966,7918.067119999999],
[10.964,7038.952039999999],
[10.962,6756.983329999999],
[10.96,6028.072429999998],
[10.955,5516.051169999999],
[10.946,4738.703779999999],
[10.943,4436.934409999999],
[10.941,4417.186269999998],
[10.94,4120.44594],
[10.939,3830.56787],
[10.925,3414.84425],
[10.923,3335.96724],
[10.922,3025.91816],
[10.92,2119.4797900000003],
[10.908,1469.96346],
[10.903,1269.4567200000001],
[10.892,630.18796],
[10.891,273.01724],
[10.89,103.07879]],
backgroundColor: '#c62828',
alphaArea:.56,
lineColor: '#c62828',
marker: {
backgroundColor:'#c62828',
visible:true
}
}
]
}
]
};
zingchart.render({
id: 'myChart',
data: myConfig,
height: '100%',
width: '100%'
});
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#myChart {
height:100%;
width:100%;
min-height:150px;
}
.zc-ref {
display:none;
}
<!DOCTYPE html>
<html>
<head>
<script src= "https://cdn.zingchart.com/zingchart.min.js"></script>
</head>
<body>
<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
</body>
</html>

Related

Show labels on x axis in vue-chartjs

I`m struggling with the esthetic aspect of my chart. Actually it lookes like this:
Chart is showing data over time in 10mins intervals. With that number of labels it`s hard to see what column matches to time.
I would like to create ticks like on the image, so the chart would be way more readable. I looked into documentatnion and tried this but without effect:
scales: {
xAxes: [
{
ticks: {
drawTicks: true,
},
},
],

Pasting the answer from the comment section,
best way to work with ticks is by using callback function eg:
ticks: {
callback: function (value: any, index: any, ticks: any) {
return 'What you want to return';
},
}

Why does an Echarts area overlap error occur?

When a lot of seriese is given, the title area, legend area, and series area overlap.
Is it an error in the echart or is there an option to prevent overlapping of each area?
I don't want to overlap.. Please help!
Below is the full code and execution image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<!-- including ECharts file -->
<script src="https://cdn.jsdelivr.net/npm/echarts#4.8.0/dist/echarts.js" integrity="sha256-sUooOytefUADJexb19eGUFQXchr7mptTQkuFlyrU58c=" crossorigin="anonymous"></script>
</head>
<body>
<!-- prepare a DOM container with width and height -->
<div id="main" style="width: 100%;min-height:30rem;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main'));
var series = [];
var legend_data = [];
for(var cnt=0; cnt <100; cnt++){
var series_item = {
name: 'test'+cnt,
type: 'line',
data: [Math.random(),Math.random(),Math.random(),Math.random(),Math.random(),Math.random()]
};
legend_data.push('test'+cnt);
series.push(series_item);
}
// specify chart configuration item and data
var option = {
title: {
text: 'test status'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:legend_data
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
},
yAxis: {
type: 'value'
},
series: series
};
// use configuration item and data specified to show chart
myChart.setOption(option);
</script>
</body>
</html>
enter image description here

You generated 100 series. The yAxis is divided in to 5 parts. 100 / 5 = 20 lines inside each part. The part has height about 50px and line width 1px. if you visually distribute 20 lines in one part, you will see approximately the same density as in the picture.
No, this is not a Echarts bug, it's just too many data and any chart will show the same result. You need to optimize visual (join lines into clister or group, colorize only few lines and set gray for others like focus effect, add dataZoom for control lines number on different zoom level or something else). Also you always have option to reduce data or choose another chart type.
The graph should simplify, not complicate the perception of the data. So if it's impossible then try to make simple table and insert you data. In some cases, this solves the problem of visual chaos.

ECharts: Multiple series (lines) with own yAxis

I want to switch from Highcharts to ECharts (preferably 3), but my current graphs have multiple series ('lines' in my case), with each their own yaxis, and it seems ECharts doesn't support this.
These metrics do not relate at all, so they all need their own yaxis. I combine them in 1 chart so they can be compared relative to each other (500 visits, €30000, 3% conversion.. etc). It makes no sense to plot 500 visits and 3% conversion rate on the same yaxis.
Is there a way to give each line it's own yaxis? It doesn't have to be a visible one (since there can only be two with ECharts, left/right of canvas, and that's ok), but the data needs to be plotted to an individual axis.

try this
yAxis: [
{
type: 'value',
name: 'left_yaxis',
nameTextStyle: {
color: '#fff'
},
splitLine:{
show:false,
},
axisLabel: {
textStyle:{
color:'#fff',
}
}
},
{
type: 'value',
name: 'right_yaxis',
nameTextStyle: {
color: '#fff'
},
axisLabel: {
interval:'0',
textStyle:{
color:'#fff',
}
},
splitLine: {
lineStyle: {
color: ['#454545'],
}
},
min:0,
//max:800000,
splitNumber:5
}
],

Here ar example from echarts for dual y axis:
example 1
example 2

You can add more than one y axis in echarts by making yaxis element as a array

Yes, ECharts supports multi-axis. See example at ECharts Gallery.

ZingChart - Alter Properties of ValueBox

I am using ZingChart to create a simple Pie Chart. I am using ColdFusion tags and a json file to style the chart. In the example below, my "target" series (the one I want to “highlight”) is 2, and I manipulating that slice by offsetting it and putting a border around it (see example). The problem with this is if the pie slice is very small, the border isn’t distinguishable.
My goal is to highlight the single valuebox associated with my target slice/series. I’ve research and experimented with the “rules”. The example below is hard-coded for the %v = 17.1 (which happens to be the value for series 2). The valuebox in this example has a border underneath it, which is great. But I can’t use the value token (%v) because there might be more than one series with the same value. I’ve tried many of the available tokens, and I can’t seem to get to find one that represents the “target” series that I identify. I thought it might be straightforward to highlight based on the text of the plot (%t) but I tried and that isn’t working either.
I tried playing around with the “custom token” feature, but won’t go into that at the moment as that didn’t work either.
How can I “highlight” the valuebox for series 2, presumably using a rule (hopefully using an available token)?
{
"graphset":[
{
"type":"pie",
"scale":{ "size-factor":"69%"},
"plot":{
"valueBox":{
"rules":[
{
"rule":"%v==17.1",
"fontSize":18,
"fontColor":"black",
"font-family":"Arial",
"border-bottom":"2px solid black"
}
],
"placement":"out",
"text":"%t:%v",
"fontSize":16,
"fontColor":"black",
"font-family":"Arial"
}
},
"series":[
{
"values":[ 1 ]
},
{
"values":[ 2 ],
"offset-r":"5%",
"border-color":"black",
"border-width":"3"
},
{
"values":[ 3 ]
},
{
"values":[ 4 ]
}
]
}
]
}
Thanks

It sounds like you are looking for the %p or %plot-index token (they are the same). This will allow you to modify the valueBox based on the index of your series.
I have included a demo here:
http://demos.zingchart.com/view/NRSRN7VT
{
type: "pie",
plot:{
valueBox:{
text: "%t: %v",
placement: "out",
rules:[
{
rule: "%p == 1",
color: "black",
fontStyle: "italic",
borderColor: "red",
borderWidth: 2,
shadow: 0,
padding: 10
}
]
}
},
series : [
{
values : [35]
},
{
values : [20]
},
{
values : [15]
}
]
}
I am on the ZingChart team. Hopefully this solves your problem.

JQPlot Y-Axis Label Offset

My JQPlot chart is currently rendering everything correctly, but the only issue is that the tick labels are being overlapped by the chart. Is there anyway I can offset the labels to prevent this from happening or a simple option change? I haven't found anything on the JQPlot website about this, so any help would be appreciated. Here's some sample code:
var moduleTypesChart = $.jqplot("moduleTypesChart",[moduleTypesCount], {
title:'<h2>Module Types Distribution</h2>',
seriesColors:["darkred"],
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {fillToZero: true, varyBarColor: false}
},
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
angle: -15,
textColor:'black',
labelPosition:'middle',
fontFamily:"Arial",
fontWeight:"bold"
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: moduleTypes
}
},
grid: {
background:'Gainsboro',
gridLineColor:'LightSteelBlue'
}

You can do this by modifying the CSS.
In your jqPlot directory are two files: jquery.jqplot.css and jquery.jqplot.min.css
Inside is a CSS class for y-axis labels:
.jqplot-yaxis-label {
margin-right: 20px;
font-size: 11pt;
position: absolute;
}
You can increase the right margin to avoid overlapping with the ticks.
Remember to make sure to link to one of these files in the head of your HTML document, for example:
<link rel='stylesheet' type='text/css' href='/DHTML/jqplot/jquery.jqplot.css'>