Related
I am trying to get Fusion Grid (https://www.fusioncharts.com/fusiongrid )to work from the example in the online docs. However, it does not parse the HTML. It just prints the unparsed HTML in the column. The grid does not parse the HTML. You can see this problem in F-Series data (last column) in the example below, as well as using a column formatter, see myFunction2. None of the online docs have complete work. Is this a bug or am I missing something?
<!doctype html>
<html>
<head>
<!-- FusionGrid JS files -->
<script src="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.js"></script>
<link rel="stylesheet" href="https://cdn.fusioncharts.com/fusiongrid/latest/fusiongrid.css">
<script type="text/javascript">
var schema = [
{
name: 'Rank',
type: 'number',
},
{
name: 'Model'
},
{
name: 'Make'
},
{
name: 'Units Sold',
},
{
name: 'Assembly Location'
},
{
name: 'Link',
// type: 'html'
}
];
var data = [
[1, "F-Series", "Ford", 896526, "Claycomo, Mo.", "<a href='http://www.google.com>Edit</a>'"],
[2, "Pickup", "Ram", 633694, "Warren, Mich."],
[3, "Silverado", "Chevrolet", 575600, "Springfield, Ohio"],
[4, "RAV4", "Toyota", 448071, "Georgetown, Ky."],
[5, "CR-V", "Honda", 384168, "Greensburg, Ind."],
[6, "Rogue", "Nissan", 350447, "Smyrna, Tenn."],
[7, "Equinox", "Chevrolet", 346048, "Arlington, Tex."],
[8, "Camry", "Toyota", 336978, "Georgetown, Ky."],
[9, "Civic", "Honda", 325650, "Greensburg, Ind."],
[10, "Corolla", "Toyota", 304850, "Blue Springs, Miss."],
[11, "Accord", "Honda", 267567, "Marysville, Ohio"],
[12, "Tacoma", "Toyota", 248801, "San Antonio, Tex."],
[13, "Grand Cherokee", "Jeep", 242969, "Detroit, Mich."],
[14, "Escape", "Ford", 241338, "Louisville, Ky."],
[15, "Highlander", "Toyota", 239438, "Princeton, Ind."],
[16, "Sierra", "GMC", 232325, "Flint, Mich."],
[17, "Wrangler", "Jeep", 228032, "Toledo, Ohio"],
[18, "Altima", "Nissan", 209183, "Smyrna, Tenn."],
[19, "Cherokee", "Jeep", 191397, "Belvidere, Ill."],
[20, "Sentra", "Nissan", 184618, "Canton, Miss."],
];
function myFunction2(params) {
console.log(params.cellValue);
let value = params.cellValue;
let bgColor = '#ff0000';
if (params.cellValue > 346048 && params.cellValue <= 575600) {
bgColor = '#ffff00'
} else if (params.cellValue > 575601) {
bgColor = '#00ff00'
}
//return '{background-color: ' + bgColor + '}';
return ('<span style="background-color: "' + bgColor + '/>' + value + '</span>');
}
function render() {
// Getting the grid-container
var container = document.getElementById('grid-container');
// Passing data through DataStore
var dataStore = new FusionGrid.DataStore();
var dataTable = dataStore.createDataTable(data, schema, {enableIndex: false });
var grid = new FusionGrid(container, dataTable,
{
defaultColumnOptions: {
searchable: true,
filter: {
enable: true,
type: "conditional"
},
},
columns: [
{
field: 'Rank' ,
},
{
field: 'Model' ,
},
{
field: 'Make' ,
},
{
field: 'Units Sold',
type: 'number',
formatter: myFunction2,
},
{
field: 'Assembly Location',
},
{
field: 'Link',
// type: 'html'
}
],
});
// Render the grid
grid.render();
}
</script>
</head>
<body onload="render()">
<h1>Hello from FusionGrid!</h1>
<div id="grid-container" style="width: 100%; height: 450px;"></div>
</body>
</html>
I would expect that <span style="background-color: would be evaluated to actual HTML output, not unprocessed HTML
Thanks to Cesar for finding a solution: use a template with HTML type, not a formatter, as was incorrectly shown in the online documentation:
{
field: 'Units Sold',
type: 'html',
template: myFunction2,
},
use type html and template
{
field: 'Units Sold',
type: 'html',
template: myFunction2
}
I'm new one of echarts, I need to set the text in centre of donuts chart. I tried and google it no use, I tried it by html also but I cant able to achieve it. Please any one suggest me, How can I resolved it. Thanks in advance.
In options I add the total in title but I need to show that one into centre.
var myChart = echarts.init(document.getElementById('pieChart1'));
var idx = 1;
pieChartOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
title: {
text: "Total "+10+"%",
left: 'center'
},
series: [
{
name: 'Test one',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: true,
color: '#000',
fontSize: '80',
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 10, name: 'Success', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#5E50A1'}}},
{value: 20, name:'Failed', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FFB200'}}},
{value: 30,name:'Onprocess', itemStyle : {normal : {label : { show : false},labelLine : { show : false}, color: '#FF434F'}}}
]
}
]
}
myChart.setOption(pieChartOption);
<html lang="en">
<head>
<meta charset="utf-8">
<title>Using ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小的Dom-->
<div id="pieChart1" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
</body>
<!--引入echarts. Using echarts-all.js for convenience -->
<!-- CDN is taken from https://cdnjs.com/libraries/echarts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
</html>
As far as I understand, you do not plan to place labels in the center, only the total, right? In this case the most simple option it is a markPoint (see live example):
series: [{
// ...
markPoint: {
tooltip: { show: false },
label: {
show: true,
formatter: '{b}',
color: 'black',
fontSize: 20,
},
data: [{
name: 'Total 10%',
value: '-',
symbol: 'circle',
itemStyle: { color: 'transparent' },
x: '50%',
y: '50%',
}],
},
// ...
}]
P.S. Library that you included in example is very strange (copyrights?, binary data?) and distort default behaviour. Please don't use them, take the any pack from the repo instead https://www.jsdelivr.com/package/npm/echarts?path=dist
You can use the graphic property, like this:
https://jsfiddle.net/motz75an/
graphic: {
elements: [{
type: 'text',
left: 'center',
top: 'middle',
z: 999,
style: {
text: `Total 10%`,
textAlign: 'center',
fontSize: 26,
}
}]
},
I'm trying to create a line chart with chart.js but when I try to style my chart.
Everything from options is ignored.
Here is my code:
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
],
options: ChartOptions
}
});
</script>
I tried to copy the code from https://www.chartjs.org/samples/latest/charts/line/interpolation-modes.html but it's the same. I can't add options to my chart.
Even the title is not showing. This is not a cache problem because I run it with chrome devtools open and tried with a different browser.
the options are in the wrong place,
they should be placed after the data object
data: {
},
options: ChartOptions
you had them as part of the data object...
data: {
options: ChartOptions
},
see following working snippet...
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
let ChartOptions = {
responsive: true,
layout: { padding: { top: 12, left: 12, bottom: 12 } },
title: {
display: true,
text: 'Chart.js Line Chart - Cubic interpolation mode'
},
scales: {
xAxes: [{ gridLines: { color: '#22364e', borderDash: [9, 7] } }],
yAxes: [{ gridLines: { display: false } }]
},
plugins: { datalabels: { display: false } },
legend: { display: false },
elements: {
point: { radius: 5 },
line: { tension: 0.4, fill: false },
},
//tooltips: {},
hover: { mode: 'nearest', animationDuration: 400 },
};
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Fri", "Sun", "Wed", "Thu", "Fri"],
datasets: [
{
fill: false,
borderColor: '#6ebffe',
pointBackgroundColor: '#6ebffe',
pointBorderColor: '#8cff00',
data: [320, 325, 300, 350, 340],
}
]
},
options: ChartOptions
});
</script>
I have a chart which has 4 series (Fiddle link below). Currently, it has Title1, Title2, Title3, and Title4. I want to change the different color for each title text name (Not the bar); for example, Title1 is red, Title2 is blue, Title3 is green, and Title4 is black. Is there a way to change all these titles with different colors?
https://jsfiddle.net/milacay/e4fe4hsz/21/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Google Chart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {callback: drawChart, packages: ['corechart']});
function drawChart() {
var array = [
["", "Today", "Goal"],
["Title1", 4553, 4151],
["Title2", 5560, 6150],
["Title3", 850, 920],
["Title4", 10505, 12320]
];
var data = new google.visualization.arrayToDataTable(array);
var formatTooltip = new google.visualization.NumberFormat({
pattern : '#,##0'
});
formatTooltip.format(data, 1);
formatTooltip.format(data, 2);
var formatShort = new google.visualization.NumberFormat({
pattern : 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 1));
},
type : "string",
role : "annotation"
},
2, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 2));
},
type : "string",
role : "annotation"
},
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true,
}
},
chartArea: {right:0
, width: "80%"
, height: "80%"
},
bar: {
groupWidth: 55 // Set the width for each bar
},
legend: {position:'top'},
hAxis: {
format: 'short',
//title: 'Month',
textStyle : {
bold: true,
fontSize: 10 // fontsize for the vAxis label.
//color: 'darkblue',
},
},
vAxis: {
format: 'short',
title: 'Progress To-Date',
gridlines: { count: 8 }
},
width:320,
height:300,
bars: 'vertical',
colors: ["lightblue", "lightgray"]
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(view, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
if you want to change the color of the axis labels,
change those manually when the chart's 'ready' event fires,
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var array = [
["", "Today", "Goal"],
["Title1", 4553, 4151],
["Title2", 5560, 6150],
["Title3", 850, 920],
["Title4", 10505, 12320]
];
var data = new google.visualization.arrayToDataTable(array);
var formatTooltip = new google.visualization.NumberFormat({
pattern : '#,##0'
});
formatTooltip.format(data, 1);
formatTooltip.format(data, 2);
var formatShort = new google.visualization.NumberFormat({
pattern : 'short'
});
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 1));
},
type : "string",
role : "annotation"
},
2, {
calc : function (dt, row) {
return formatShort.formatValue(dt.getValue(row, 2));
},
type : "string",
role : "annotation"
},
]);
var options = {
chart: {
title: ' ',
animation: {
duration: 2000,
easing: "out",
startup: true,
}
},
chartArea: {right:0
, width: "80%"
, height: "80%"
},
bar: {
groupWidth: 55 // Set the width for each bar
},
legend: {position:'top'},
hAxis: {
format: 'short',
//title: 'Month',
textStyle : {
bold: true,
fontSize: 10 // fontsize for the vAxis label.
//color: 'darkblue',
},
},
vAxis: {
format: 'short',
title: 'Progress To-Date',
gridlines: { count: 8 }
},
width:320,
height:300,
bars: 'vertical',
colors: ["lightblue", "lightgray"]
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var colorIndex = 0;
var colorPallette = ['red', 'blue', 'green', 'black'];
Array.prototype.forEach.call(container.getElementsByTagName('text'), function (label) {
if ((label.getAttribute('text-anchor') === 'middle') && (label.getAttribute('fill') !== '#404040')) {
label.setAttribute('fill', colorPallette[colorIndex]);
colorIndex++;
}
});
});
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
note: the label color (#404040) is used to differentiate the x-axis labels from the annotation labels...
I added chart.resize() inside of addData and removeData function, but it is always increasing height and it is never decreasing!
I am updating the chart when the user click on item of the menu. Some items have more than 100 datas e some others items have only 2 data and when have few data, the chart is always increasing height:
horizontalBar
Why is this happening?
<canvas id="chart"></canvas>
var chartData = {
labels: [<?php echo '"'.implode('","', $chart_labels ).'"' ?>],
datasets: [
{
data: [<?php echo implode(',', $chart_numbers ) ?>],
backgroundColor: '#184b8f',
hoverBackgroundColor: '#ef3e42'
}
]
};
var barOptions = {
responsive: true,
maintainAspectRatio: false,
tooltips: {
enabled: false
},
hover: {
animationDuration: 0
},
legend: {
display: false
},
scales : {
xAxes : [{
gridLines : {
display: false
},
ticks: {
beginAtZero: true,
color: '#cfcfcf'
}
} ],
yAxes : [ {
gridLines : {
display: false
},
ticks: {
fontSize: 13,
fontFamily: "'Open Sans'",
fontWeight: 600,
}
}]
},
animation: {
duration: 500,
easing: "easeOutQuart",
}
};
function removeData(chart) {
chart.data.labels.pop();
chart.data.datasets.forEach((dataset) => {
dataset.data.pop();
});
chart.resize();
chart.update();
}
function addData(chart, label, data) {
chart.data.labels.push(label);
chart.data.datasets.forEach((dataset) => {
dataset.data.push(data);
});
chart.resize();
chart.update();
}
var ctx = document.getElementById("chart").getContext("2d");
var myBar = new Chart(ctx, {
type: 'horizontalBar',
data: chartData,
options: barOptions
});
I had the same thing. You have to put an empty div around the canvas.
I've found some users had the same issue in this post: https://github.com/jtblin/angular-chart.js/issues/84
The solution for me was to change the chart's options to maintainAspectRatio: false.
myChart.setOptions({
responsive: true,
maintainAspectRatio: false
});
In laravel livewire i fixed adding wire:ignore to wrapper div
<div wire:ignore>
<div class="chart-container" style="height: 80vh; width: 80vh;">
<canvas id="bar-chart" height="800" width="1500"></canvas>
</div>
</div>
I was having the same issue in a Bulma tile.
The fix was to set
responsive: false in the Chart.js script options area.