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
}
Related
I try to implement flutter chart with high_chart: ^2.0.3 library.
When come to the implement the navigator its not showing on the chart. I enable the navigator but
Chart only show like this.
navigator: {
enabled: true
},
What i looking for get like this.
I add the chart data string like this.
final String _chartData = '''{
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
navigator: {
enabled: true
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2007-2008',
data: [
[Date.UTC(1970, 9, 27), 0 ],
//data
]
}, {
name: 'Winter 2008-2009',
data: [
[Date.UTC(1971, 5, 7), 0 ]//data
]
}, {
name: 'Winter 2009-2010',
data: [
[Date.UTC(1970, 9, 9), 0 ],
//data
]
}],
}''';
Also i add this for the index.html file
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
Full source code Here..
You need to load Highstock only, Highcharts is already included in Highstock:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/series-label.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/stock/modules/accessibility.js"></script>
Live demo: http://jsfiddle.net/BlackLabel/hnxvqpyj/
Docs: https://www.highcharts.com/docs/stock/understanding-highcharts-stock
I want to draw a horizontal reference line at a particular value.
The data is of the format:
{
"Close": 15638.8,
"Date": "2022-06-21T10:00:00.000Z",
"High": 15707.25,
"Low": 15419.85,
"Open": 15455.95,
"Volume": 0,
"id": 36
}
This is what I have figured as of now. I am unsure how to use the refLines attribute.
var dataReqdFormat = {
labels: [],
datasets: [{
data: [],
label: "Nifty",
fill: true,
borderColor: (ctx) => {
const data = ctx.chart.data.datasets[ctx.datasetIndex].data;
return data[0] >= data[data.length - 1] ? 'red' : 'green'
}
}]
};
Any help is appreciated.
You can use the annotation plugin for this:
var options = {
type: 'line',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderColor: 'pink'
}]
},
options: {
plugins: {
annotation: {
annotations: {
line: {
type: 'line',
yMin: 16,
yMax: 16,
borderWidth: 2,
borderColor: 'red'
}
}
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/1.4.0/chartjs-plugin-annotation.js"></script>
</body>
On table creation, I am trying to HIDE a row of the table if a date is in the past. Appreciate the help big time! Unfortunately I can't figure out how to do this, and really could use the help. There is also a filter that I apply based on user drop down. I am using tabulator package as well as moment for date library
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select id="filter-value">
<option value="">Select A Course</option>
<option value="">All</option>
<option value="Bronze">Bronze</option>
<option value="FirstAid">First Aid</option>
</select>
<script language="JavaScript">
//Define variables for input elements
var valueEl = document.getElementById("filter-value");
//Trigger setFilter function with correct parameters
function updateFilter() {
valueEl.disabled = false;
table.setFilter("course", "starts", valueEl.value);
// table.setFilter(filter, typeVal, valueEl.value);
// table.setFilter(filter, "like", valueEl.value);
}
//Update filters on value change
//document.getElementById("filter-field").addEventListener("change", updateFilter);
//document.getElementById("filter-type").addEventListener("change", updateFilter);
document.getElementById("filter-value").addEventListener("change", updateFilter);
//define some sample data
var tabledata = [
{ sortorder: "A100001", course: "Bronze Medallion with Emergency First Aid & CPR B Crash Course", price: "12", startdate: "Jan 21 2023" },
{ sortorder: "B300001", course: "Bronze Cross", price: "13", startdate: "May 12 1982", info: "Apr 4-May 2nd,<br /> 10am-4pm", pre: "" },
{ sortorder: "B300001", course: "Bronze Cross", price: "12", startdate: "Apr 12 1983", info: "", pre: "" },
{ sortorder: "C400001", course: "Christine Lobowski", price: "42", startdate: "May 22 1982", info: "", pre: "" },
{ sortorder: "A200001", course: "Bronze Medallion Recertification", price: "125", startdate: "Jan 8 1980", info: "", pre: "" },
{ sortorder: "D500001", course: "Margret Marmajuke", price: "16", startdate: "Jan 31 1999", info: "", pre: "" },
];
//create Tabulator on DOM element with id "example-table" RENDER THE TABLE
var table = new Tabulator("#example-table", {
height: 605, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitDataFill",
groupBy: "course",
resizableColumns: false,
responsiveLayout: "collapse",
responsiveLayoutCollapseStartOpen: false,
columns: [ //Define Table Columns
{ formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false },
{ title: "Sort Order", field: "sortorder" },
{ title: "Course", field: "course", width: 350, responsive: 0, headerSort: false },
{ title: "Price", field: "price", hozAlign: "left", headerSort: false },
{ title: "Start Date", field: "startdate", hozAlign: "center", headerSort: false, sorter: "date", cssClass:"date" },
{ title: "Course Information", field: "info", formatter: "html", headerSort: false },
{ title: "Pre-requisites", field: "pre", headerSort: false },
],
initialSort: [
{ column: "startdate", dir: "asc" }, //sort by this first asc desc
{ column: "sortorder", dir: "asc" }, //sort by this second you will see this on screen
],
initialFilter: [
{ field: "startdate", type: ">", value: "" }
],
});
You're comparing strings. I think any string will be '> ""' (or the opposite, no string will be '> ""' - either way, you're not going to get what you want)
Convert those dates to moment()'s (prolly with a mutator at data insertion might be best) and then use a datetime formatter to display them how you want and you will be able to compare/filter/sort them as numbers properly
Space between column in chart js
There's the screen of my output and what i want to do
enter image description here
Anyone can help please ?
You can achieve this by setting the barPercentage property
Example:
var options = {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
borderWidth: 1,
backgroundColor: 'blue',
barPercentage: 0.3
},
{
label: '# of Points',
data: [7, 11, 5, 8, 3, 7],
borderWidth: 1,
backgroundColor: 'red',
barPercentage: 0.3
}
]
},
options: {
scales: {
y: {
stacked: true
},
x: {
stacked: true
}
}
}
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>
</body>
Now i have something like this but i need to add space between each column
My charts works well on the same page but when I put on different pages, only the first one works fine.
ex:
Page1.html
<div class="wrapper">
<canvas id="pieChart" width="200px" height="200px"></canvas>
</div>
Page2.html
<div class="wrapper">
<canvas id="lineChart" width="200px" height="200px"></canvas>
</div>
JS
//page1.html
//piechart
var pieVar = {
type: 'pie',
data: {
labels: ["Yes", "No"],
datasets: [
{
data: [60, 40],
backgroundColor: [
"#FF6384",
"#36A2EB"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB"
]
}
]
},
options: {
scales: {
xAxes: [{
display: true
}]
}
}
}
//page2.html
//line chart
var lineVar = {
type: 'line',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
fill: true,
lineTension: 0.2,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 10,
pointHoverBackgroundColor: "rgba(255,0,0,1)",
pointHoverBorderColor: "rgba(255,0,0,1)",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40],
spanGaps: false,
}
]
},
options: {
scales: {
xAxes: [{
display: true
}]
}
}
}
window.onload = function(){
//piechart
var pieCtx = document.getElementById("pieChart");
var myPieChart = new Chart(pieCtx, pieVar);
//linechart
var lineCtx = document.getElementById("lineChart");
var myLineChart = new Chart(lineCtx, lineVar);
};
In this codepen works fine because it's the same page..
CODEPEN
It sounds like you're loading the same JavaScript file (which contains the configurations for both of your charts) in both of your pages. The problem is since you're using a single JavaScript file with two chart definitions, the chart you try to create that doesn't exist in the html is throwing an error because you are passing in an empty context.
window.onload = function(){
//piechart (this will be null on page2.html)
var pieCtx = document.getElementById("pieChart");
// You are passing in a null pieCtx on page2.html because there is no element with an id = "pieChart"
var myPieChart = new Chart(pieCtx, pieVar);
//linechart (this will be null on page1.html)
var lineCtx = document.getElementById("lineChart");
// You are passing in a null lineCtx on page1.html because there is no element with an id = "lineChart"
var myLineChart = new Chart(lineCtx, lineVar);
};
You should either split your JavaScript file into two files so that the first page only includes the definition for the first chart and the second page only includes the definition for the second chart. Or, add some conditions to prevent trying to create the empty chart (like this).
window.onload = function(){
//piechart (this will be null on page2.html)
var pieCtx = document.getElementById("pieChart");
if (pieChart) {
var myPieChart = new Chart(pieCtx, pieVar);
}
//linechart (this will be null on page1.html)
var lineCtx = document.getElementById("lineChart");
if (lineChart) {
var myLineChart = new Chart(lineCtx, lineVar);
}
};