When I am trying to create a barchart for mobile, the y axis actually starts from the middle of the screen, hence i am unable to see my chart completely. For viewing the chart, i need to zoom out the device by 20%, or i need to set a plotarea y value as -50. Can someone let me know where am i going wrong?
Graph is seen when added the below code:
plotarea:{
adjustLayout: 1,
marginTop:'dynamic',
backgroundFit: "y",
"y": -50
}
Attached image can be seen here:
1st: Without zoom, 2nd: With 20% zoom out, 3rd: with y as -50
Complete code is here:
var myConfig = {
type: "bar",
backgroundColor: "transparent",
plotarea:{
adjustLayout: 1,
marginTop:'dynamic',
backgroundFit: "y"
//"y": -50
},
plot:{
"rules": [
{
"rule": "%i==0",
"background-color": "#ACD373",
"placement": "in"
},
{
"rule": "%i==1",
"background-color": "#B7B7B7",
"placement": "in"
},
{
"rule": "%i==2",
"background-color": "#FF6E5B",
"placement": "in"
},
{
"rule": "%i==3",
"background-color": "#6DCFF6",
"placement": "in"
},
{
"rule": "%i==4",
"background-color": "#F9AD81",
"placement": "in"
},
{
"rule": "%i==5",
"background-color": "#898989",
"placement": "in"
}
],
valueBox:{
fontColor: "#fff",
connector: {
lineWidth: 1
},
"text": "%v",
"font-size": 20,
"font-weight": "normal",
"font-style": "normal"
}
},
"scale-x": {
"label":{
"text":[],
"color": "#fff"
},
item:{
color: "#fff",
},
"guide":{
"line-width":0
},
zooming: true,
"values":[]
},
"scale-y":{
"line-color":"none",
"item":{
"visible": false
},
"tick":{
"line-color":"none"
},
"guide":{
"line-color":"#4A6B89",
"line-width":1,
"line-style":"solid",
"alpha":1
}
},
labels:[
{
//text:"Hold SHIFT to detach<br>multiple slices",
textAlign: "left",
fontColor: "#fff"
}
],
series: [{values:[]}]
};
The same code works perfectly for another chart with the same data set and same width height for the div which is rendering this chart.
Also, i can't make the y value as -50 as i have bound the chart top open another chart on clicking any of the bars. On making y as -50, i am unable to click the bars.
I have updated your tags to be appropriate to your environment, coldfusion. I assume you are using cfchart as well. This means not all properties persist across.
I have adjusted a few properties. They mostly have to do with margins within the plotarea object. My best suggestion is try playing around with margins if margin:'dynamic' does not apply for your build.
demo link
var myConfig = {
type: "bar",
backgroundColor: "#1D3557",
plotarea:{
adjustLayout: 1,
margin:'dynamic',
},
plot:{
"rules": [
{
"rule": "%i==0",
"background-color": "#ACD373",
"placement": "in"
},
{
"rule": "%i==1",
"background-color": "#B7B7B7",
"placement": "in"
},
{
"rule": "%i==2",
"background-color": "#FF6E5B",
"placement": "in"
},
{
"rule": "%i==3",
"background-color": "#6DCFF6",
"placement": "in"
},
{
"rule": "%i==4",
"background-color": "#F9AD81",
"placement": "in"
},
{
"rule": "%i==5",
"background-color": "#898989",
"placement": "in"
}
],
valueBox:{
fontColor: "#fff",
connector: {
lineWidth: 1
},
"text": "%v",
"font-size": 20,
"font-weight": "normal",
"font-style": "normal"
}
},
"scale-x": {
"label":{
"text":'Version',
"color": "#fff"
},
item:{
color: "#fff",
},
"guide":{
"line-width":0
},
zooming: true,
"values":[]
},
"scale-y":{
"line-color":"none",
"item":{
"visible": false
},
"tick":{
"line-color":"none"
},
"guide":{
"line-color":"#4A6B89",
"line-width":1,
"line-style":"solid",
"alpha":1
}
},
zoom: {
preserveZoom:true,
},
labels:[
{
//text:"Hold SHIFT to detach<br>multiple slices",
textAlign: "left",
fontColor: "#fff"
}
],
series: [{values:[15,25,35,45,35,45]}]
};
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>
It might be because, either you would have the font-size that makes chart extend the screen size or try changing the margin it might help, I tried it in the past but with no luck.
Related
I drew a line chart and want to move x axis tick marks position, but I can not find related configuration. Please see the picture below.
AS-IS/TO-BE
Here is my code
<script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js">
<canvas id="myChart" style="height:500px"></canvas>
chart = new Chart(document.getElementById("myChart"), {
type: 'line',
data: {
datasets: [{
label: "Count",
pointStyle: 'circle',
showLine: true,
fill: false,
lineTension: 0,
borderColor: '#7265ce',
pointRadius: 4,
pointBorderWidth: 1,
pointBackgroundColor: '#7265ce',
data: data
}]
},
options: {
parsing: {
xAxisKey: 'timestamp',
yAxisKey: 'value'
},
spanGaps: false,
responsive: false,
scales: {
x: {
bounds: 'ticks',
type: 'time',
time: {
parser: 'yyyyMMddHHmmss',
unit: 'minute',
stepSize: 5,
displayFormats: {
minute: 'HH:mm',
second: 'mm:ss'
}
},
title: {
display: false,
text: 'Timestamp'
},
grid: {
drawOnChartArea: false,
lineWidth: 1
},
ticks: {
display: true,
color: '#cecece'
}
},
y: {
type: 'linear',
display: true,
ticks: {
padding: 10,
autoSkip: true,
maxTicksLimit:2,
color: '#cecece'
},
title: {
display: false,
text: 'Count',
align: 'end'
},
grid: {
drawOnChartArea: false
},
}
}
}
});
});
let data = [
{ "timestamp": "20230109150000", "value": 10 },
{ "timestamp": "20230109150100", "value": 17 },
{ "timestamp": "20230109150200", "value": 92 },
{ "timestamp": "20230109150300", "value": 60 },
{ "timestamp": "20230109150400", "value": 50 },
{ "timestamp": "20230109150500", "value": 91 }
];
Is it possible?
Is there any configuration in chartjs?
I'm using v3.9.1
Sorry for my poor english.
I have a single hierarchy and based on values, I want gradient based on values on my map. I have used echarts for this. The solution given in their examples is hard to implement for getting a gradient. I have used React JS to achieve this. Here's my code along with json here -
import React, {useEffect} from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
import ReactEcharts from "echarts-for-react";
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
var treemapData = [
{
"name": "abcdaaaaaaaaaaaaaaaaa",
"value": 250,
},
{
"name": "xyzxyzxyzxyzxyzzz",
"value": 525,
},
{
"name": "mnopmnopmnop",
"value": 1120,
},
{
"name": "vsuuuuuuuuuvu",
"value": 216,
},
{
"name": "1232342343434",
"value": 400,
},
{
"name": "timetimetime",
"value": 297,
},
{
"name": "placeplaceplace",
"value": 208,
},
{
"name": "countrycountry",
"value": 1203,
}
];
function TreemapEcharts() {
return (
<ReactEcharts
option={{
series: [{
type: 'treemap',
data: treemapData,
label: {
normal: {
textStyle: {
ellipsis: true
},
position: 'insideCenter',
formatter: function (params) {
var arr = [
'{name|' + params.name + '}',
'{value|' + params.value + '}'
];
return arr.join('\n');
},
rich: {
name: {
fontSize: 14,
color: '#fff'
},
value: {
fontSize: 14,
color: '#fff'
},
}
}
},
levels: [
{
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
gapWidth: 2
}
}
},
],
}]
}}
style={{ height: '300px', width: '50%' }}
/>
)
}
export default TreemapEcharts
Please let me know how can we add a gradient where color varies from darkest shade to lightest shade of one color here.
In case anyone is still wondering, you should take a look at their document regarding level: https://echarts.apache.org/en/option.html#series-treemap.levels.
Basically, you need to configure a color range and set colorMappingBy to "value". You should have something like this for your level config:
{
color: ["#942e38", "#aaa", "#269f3c"],
colorMappingBy: "value",
itemStyle: { ... }
}
To fine-tune your visualization, you can convert your value to an array, with the second element in the array being a value scaled to the desired saturation and map your color to that value by setting visualDimension to 1 (index value of the element the array), and manually set visualMin and visualMax values.
You can also take a look at their example: https://echarts.apache.org/examples/zh/editor.html?c=treemap-visual.
I have a Vue.JS project getting data from a REST API (mine, so I can modify it if needed). This data is formatted for Chart.JS.
I am supposed to display a graph with 3 datasets, 2 of type line with the same X values, but 1 of type bar with different X values (that's why I don't want to specify labels). Whatever, all the X values are dates, so I would like only 1 X axis for all the curves.
I am using datasets with (x,y) data format :
x is an ISO8601 date
y is a float
My problem is that NOTHING is displayed at all...could anyone help me please, I don't understand why. I feel like having done things right. I saw somewhere that I needed to include momentjs, but in the official documentation they say that it is not the case. I bet that the problems come from the dates because I tried changing the y values, and the 2 y axis bounds are modified (so y values are understood). I also tried addind the "xAxisID" option, nothing changed.
Here is a sample of my data (normally hundreds of values) :
{
"type": "line",
"data": {
"datasets": [
{
"label": "Température",
"borderColor": "red",
"backgroundColor": "red",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 2.8224692
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 33.63129
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 40.540405
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 3.0312533
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 49.145626
}
],
"yAxisID": "yAxeTemperature"
},
{
"label": "Humidité",
"borderColor": "blue",
"backgroundColor": "blue",
"fill": false,
"data": [
{
"x": "2020-07-05T15:38:47.933711",
"y": 33.980587
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 2.0313625
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 24.249685
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 7.4426904
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 2.6335742
},
{
"x": "2020-07-05T16:28:48.175547",
"y": 25.92827
}
],
"yAxisID": "yAxeHumidite"
}
]
},
"options": {
"responsive": true,
"hoverMode": "index",
"stacked": false,
"title": null,
"scales": {
"xAxes": [
{
"type": "time",
"display": true,
"position": "bottom",
"id": "xAxeTime",
"scaleLabel": {
"display": true,
"labelString": "Temps",
"fontColor": "black"
},
"time": {
"unit": "minute",
"parser": "moment.ISO_8601",
"tooltipFormat": "ll"
}
}
],
"yAxes": [
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeTemperature",
"scaleLabel": {
"display": true,
"labelString": "Température",
"fontColor": "red"
}
},
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeHumidite",
"scaleLabel": {
"display": true,
"labelString": "Humidité",
"fontColor": "blue"
}
}
]
}
}
}
Here is how my chart is created (using vue-chartjs and chart.js) :
createChart(chartId : string, chartData : GrapheBean) {
const ctx = document.getElementById(chartId);
// #ts-ignore
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
}
Here is the result :
I am stuck now, even if still trying things with little hope. Thanks a lot in advance for the ones who could help me.
First you should remove the option xAxes.time.parser. It is not needed when the dates are of ISO8601 format.
Further Chart.js effectively internally uses Moment.js for the functionality of the time axis. Therefore you should use the bundled version of Chart.js that includes Moment.js in a single file.
Please have a look at your amended code in a pure JavaScript version.
const chartData = {
"type": "line",
"data": {
"datasets": [{
"label": "Température",
"borderColor": "red",
"backgroundColor": "red",
"fill": false,
"data": [{
"x": "2020-07-05T15:38:47.933711",
"y": 2.8224692
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 33.63129
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 40.540405
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 3.0312533
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 49.145626
}
],
"yAxisID": "yAxeTemperature"
},
{
"label": "Humidité",
"borderColor": "blue",
"backgroundColor": "blue",
"fill": false,
"data": [{
"x": "2020-07-05T15:38:47.933711",
"y": 33.980587
},
{
"x": "2020-07-05T15:48:47.490669",
"y": 2.0313625
},
{
"x": "2020-07-05T15:58:48.182698",
"y": 24.249685
},
{
"x": "2020-07-05T16:08:47.829882",
"y": 7.4426904
},
{
"x": "2020-07-05T16:18:47.489026",
"y": 2.6335742
},
{
"x": "2020-07-05T16:28:48.175547",
"y": 25.92827
}
],
"yAxisID": "yAxeHumidite"
}
]
},
"options": {
"responsive": true,
"hoverMode": "index",
"stacked": false,
"title": null,
"scales": {
"xAxes": [{
"type": "time",
"display": true,
"position": "bottom",
"id": "xAxeTime",
"scaleLabel": {
"display": true,
"labelString": "Temps",
"fontColor": "black"
},
"time": {
"unit": "minute",
// "parser": "moment.ISO_8601", -> remove this line
"tooltipFormat": "ll"
}
}],
"yAxes": [{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeTemperature",
"scaleLabel": {
"display": true,
"labelString": "Température",
"fontColor": "red"
}
},
{
"type": "linear",
"display": true,
"position": "left",
"id": "yAxeHumidite",
"scaleLabel": {
"display": true,
"labelString": "Humidité",
"fontColor": "blue"
}
}
]
}
}
}
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
type: chartData.type,
data: chartData.data,
options: chartData.options,
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="120"></canvas>
In your question you also wrote "I am supposed to display a graph with 3 datasets, 2 of type line with the same X values, but 1 of type bar with different X values". Your code however only defines 2 datasets. In case you're also facing problems with this point, please post a new question for this separate issue.
I'm trying to make a gauge and want to have two band colors (wrong/red, good/green). I've an example of the amchart in their online Chart maker https://live.amcharts.com/new/edit/. But I'm not able to get this working in icCube.
current we have icCube reporting version 7.0.0 (5549).
This is my chart JSON:
{
"box": {
"id": "wb695",
"widgetAdapterId": "w28",
"rectangle": {
"left": 1510,
"top": 340,
"right": 1910,
"bottom": 640
},
"zIndex": 901
},
"data": {
"mode": "MDX",
"schemaSettings": {
"cubeName": null,
"schemaName": null
},
"options": {
"WIZARD": {
"measures": [],
"rows": [],
"rowsNonEmpty": false,
"columns": [],
"columnsNonEmpty": false,
"filter": []
},
"MDX": {
"statement": "with \n member [Measures].[Measure1] AS 0.9\n member [Measures].[Measure2] AS 0.1\nSELECT\n\n{[Measures].[Measure1], [Measures].[Measure2]} on 0\n\nFROM [cube]"
},
"DATASOURCE": {}
},
"ic3_name": "mdx Query-5",
"ic3_uid": "m17"
},
"data-render": {
"chartType": {
"label": "Gauge",
"proto": {
"chartPrototype": {
"type": "gauge",
"arrows": [
{
"id": "GaugeArrow-1"
}
],
"axes": [
{
"id": "GaugeAxis-1"
}
]
},
"graphPrototype": {},
"dataProviderType": 3
},
"id": "gauge-chart"
},
"graphsConfiguration": [
{
"graph": {}
}
],
"valueAxes": [],
"trendLinesGuides": {},
"configuredQuadrants": {},
"advanced": {
"titles": [],
"faceAlpha": 0,
"faceBorderAlpha": 0
},
"balloon": {
"offsetX": 8
},
"chartOptions": {
"axes": [
{
"axisAlpha": 0.25,
"bottomText": "SLA",
"bottomTextColor": "#2A3F56",
"tickAlpha": 0.25,
"bandOutlineAlpha": 1,
"bandAlpha": 1,
"bandOutlineThickness": 95,
"bandOutlineColor": "#0095BC",
"id": 1
}
],
"bands": [
{
"alpha": 0.8,
"color": "#B53728",
"endValue": 0.6,
"startValue": 0,
"id": "GaugeBand-1"
},
{
"alpha": 0.6,
"color": "#435035",
"endValue": 1,
"startValue": 0.6,
"innerRadius": 0.69,
"id": "GaugeBand-2"
}
]
},
"ic3Data": {
"chartTypeConfig": {
"pie-chart-donut": {
"chartType": {
"label": "Donut",
"proto": {
"chartPrototype": {
"type": "donut",
"pullOutRadius": 0,
"startDuration": 0,
"legend": {
"enabled": false,
"align": "center",
"markerType": "circle"
},
"innerRadius": "60%"
},
"dataProviderType": 1
},
"id": "pie-chart-donut"
},
"graphsConfiguration": [
{}
],
"valueAxes": [],
"trendLinesGuides": {},
"configuredQuadrants": {},
"advanced": {
"titles": []
},
"balloon": {
"offsetX": 8
},
"chartOptions": {
"showZeroSlices": false,
"labelsEnabled": false,
"innerRadius": "60%",
"startAngle": 270,
"radius": "",
"fontSize": 20,
"color": "#0095BC",
"outlineAlpha": 0.25,
"tapToActivate": false
}
}
}
},
"axes": [
{
"startValue": 0,
"endValue": 1,
"startAngle": -90,
"endAngle": 90
}
],
"valueFormatting": ""
},
"navigation": {
"menuVisibility": {
"back": true,
"axisXChange": "All",
"axisYChange": "All",
"filter": "All",
"reset": true,
"widget": true,
"others": "All"
},
"selectionMode": "disabled"
},
"events": {},
"filtering": {},
"hooks": {}
}
Sorry for the late answer, out of the box it's not possible but you can use hooks to change the javascript options sent to amcharts.
JS / On Widget Options :
function(context, options, $box) {
const bands = [
{
"color": "#00CC00",
"endValue": 300000,
"id": "GaugeBand-1",
"startValue": 0
},
{
"color": "#ffac29",
"endValue": 600000,
"id": "GaugeBand-2",
"startValue": 300000
},
{
"color": "#ea3838",
"endValue": 900000,
"id": "GaugeBand-3",
"innerRadius": "95%",
"startValue": 600000
}
];
options.axes[0]["bands"] = bands;
return options;
}
This should work
I try to display a line chart with two yAxis in Chart.js.
My Code:
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
"labels": [
"01.12.2015",
"02.12.2015",
"03.12.2015",
"04.12.2015",
"30.12.2015"
],
"datasets": [{
"label": "DEA Burrweiler Druck Abgabe",
"fill": "false",
yAxisID: "y-axis-0",
"data": [
8.7913,
8.6985,
8.7914,
8.7948,
8.7882
]
}, {
"label": "DEA Burrweiler Druck Zulauf",
"fill": "false",
yAxisID: "y-axis-0",
"data": [
4.5997,
4.5526,
4.5915,
4.5937,
4.5795
]
}, {
"label": "DMS Flemlingen Durchfluss",
"fill": "false",
yAxisID: "y-axis-1",
"data": [
1.9588,
2.4226,
2.1392,
2.223,
1.9048
]
}]
},
options: {
yAxes: [{
position: "left",
"id": "y-axis-0"
}, {
position: "right",
"id": "y-axis-1"
}]
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
The error says: "TypeError: yScale is undefined"
When I remove the yAxisID options in the datasets, the Chart gets displayed but only with one yAxis.
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
var myChart = new Chart(ctx, {
type: "line",
data: {
"labels": [
"01.12.2015",
"02.12.2015",
"03.12.2015",
"04.12.2015",
"30.12.2015"
],
"datasets": [{
"label": "DEA Burrweiler Druck Abgabe",
"fill": "false",
"data": [
8.7913,
8.6985,
8.7914,
8.7948,
8.7882
]
}, {
"label": "DEA Burrweiler Druck Zulauf",
"fill": "false",
"data": [
4.5997,
4.5526,
4.5915,
4.5937,
4.5795
]
}, {
"label": "DMS Flemlingen Durchfluss",
"fill": "false",
"data": [
1.9588,
2.4226,
2.1392,
2.223,
1.9048
]
}]
},
options: {
yAxes: [{
position: "left",
"id": "y-axis-0"
}, {
position: "right",
"id": "y-axis-1"
}]
}
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.0/Chart.min.js"></script>
<canvas id="chart" width="400" height="400"></canvas>
I have the yAxis defined in the chart options. So whats the Problem, what am I missing?
The yAxes should be under a property scales under options, like so
...
options: {
scales: {
yAxes: [{
..
Fiddle - http://jsfiddle.net/dahd27d7/