issue that i am facing is, i have my bar graph made using react-chart-js. i want to remove space between the bar and center align the bar's . The bar's should have Thickness equal to 50
I try using dummy data ,that way i got the desired output but that is not the correct way of doing . Also I try using barPercentage , categoryPercentage option but didnt get the desired output
Link for CodeSandbox
I don't know if this actually works out of the box. There is nothing in the documentation about this use case either.
You could do it with ghost values to extend the chart in general.
This is not really a solution, but it may be an option.
const labels = ["","","January", "February", "March","",""];
export const data = {
labels,
datasets: [
{
label: "Dataset 1",
data: labels.map((elem, index) => {
if (index > 1 && index < 5)
return faker.datatype.number({ min: 0, max: 1000 })
}),
backgroundColor: "rgba(255, 99, 132, 0.5)",
barThickness: 50
}
]
};
Below is the code snippet for a barchart with colored bars:
var Dim2 = ndx.dimension(function(d){return [d.SNo, d.something ]});
var Group2 = Dim2.group().reduceSum(function(d){ return d.someId; });
var someColors = d3.scale.ordinal().domain(["a1","a2","a3","a4","a5","a6","a7","a8"])
.range(["#2980B9","#00FFFF","#008000","#FFC300","#FF5733","#D1AEF1","#C0C0C0","#000000"]);
barChart2
.height(250)
.width(1000)
.brushOn(false)
.mouseZoomable(true)
.x(d3.scale.linear().domain([600,800]))
.elasticY(false)
.dimension(Dim2)
.group(Group2)
.keyAccessor(function(d){ return d.key[0]; })
.valueAccessor(function(d){return d.value; })
.colors(someColors)
.colorAccessor(function(d){return d.key[1]; });
How do I add a legend to this chart?
Using composite keys in crossfilter is really tricky, and I don't recommend it unless you really need it.
Crossfilter only understands scalars, so even though you can produce dimension and group keys which are arrays, and retrieve them correctly, crossfilter is going to coerce those arrays to strings, and that can cause trouble.
Here, what is happening is that Group2.all() iterates over your data in string order, so you get keys in the order
[1, "a1"], [10, "a3"], [11, "a4"], [12, "a5"], [2, "a3"], ...
Without changing the shape of your data, one way around this is to sort the data in your legendables function:
barChart2.legendables = function() {
return Group2.all().sort((a,b) => a.key[0] - b.key[0])
.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
An unrelated problem is that dc.js takes the X domain very literally, so even though [1,12] contains all the values, the last bar was not shown because the right side ends right at 12 and the bar is drawn between 12 and 13.
So:
.x(d3.scale.linear().domain([1,13]))
Now the legend matches the data!
Fork of your fiddle (also with dc.css).
EDIT: Of course, you want the legend items unique, too. You can define uniq like this:
function uniq(a, kf) {
var seen = [];
return a.filter(x => seen[kf(x)] ? false : (seen[kf(x)] = true));
}
Adding a step to legendables:
barChart2.legendables = function() {
var vals = uniq(Group2.all(), kv => kv.key[1]),
sorted = vals.sort((a,b) => a.key[1] > b.key[1] ? 1 : -1);
// or in X order: sorted = vals.sort((a,b) => a.key[0] - b.key[0]);
return sorted.map(function(kv) {
return {
chart: barChart2,
name: kv.key[1],
color: barChart2.colors()(kv.key[1]) }; }) };
Note that we're sorting by the string value of d.something which lands in key[1]. As shown in the comment, sorting by x order (d.SNo, key[0]) is possible too. I wouldn't recommend sorting by y since that's a reduceSum.
Result, sorted and uniq'd:
New fiddle.
[{"Id":"8082","Date":"2017-12-09 23:40:39"},{"Id":"7825","Date":"2017-12-09 23:40:17"},{"Id":"3138","Date":"2017-12-09 21:58:03"},{"Id":"4805","Date":"2017-12-09 21:25:01"},{"Id":"2570","Date":"2017-12-09 01:08:15"},{"Id":"8733","Date":"2017-12-08 23:53:24"},{"Id":"8733","Date":"2017-12-08 23:53:18"},{"Id":"8733","Date":"2017-12-08 23:53:13"},{"Id":"8733","Date":"2017-12-08 23:53:07"},{"Id":"8733","Date":"2017-12-08 23:53:02"},{"Id":"8733","Date":"2017-12-08 23:52:56"},{"Id":"7825","Date":"2017-12-08 23:40:01"},{"Id":"8733","Date":"2017-12-07 23:53:00"},{"Id":"8733","Date":"2017-12-07 23:52:54"},{"Id":"8733","Date":"2017-12-07 23:52:48"},{"Id":"8733","Date":"2017-12-07 23:52:42"},{"Id":"8733","Date":"2017-12-07 23:52:36"},{"Id":"7832","Date":"2017-12-07 23:43:27"},{"Id":"8082","Date":"2017-12-07 23:40:54"},{"Id":"4805","Date":"2017-12-07 21:24:53"},{"Id":"8733","Date":"2017-12-06 23:52:35"},{"Id":"8733","Date":"2017-12-06 23:52:30"},{"Id":"7832","Date":"2017-12-06 23:43:05"},{"Id":"8082","Date":"2017-12-06 23:40:35"},{"Id":"7825","Date":"2017-12-06 23:40:13"},{"Id":"3841","Date":"2017-12-06 22:56:18"},{"Id":"3765","Date":"2017-12-06 22:38:20"},{"Id":"4805","Date":"2017-12-06 21:24:51"},{"Id":"2570","Date":"2017-12-06 01:08:16"},{"Id":"1397","Date":"2017-12-06 00:09:34"},{"Id":"8733","Date":"2017-12-05 23:52:20"},{"Id":"8733","Date":"2017-12-05 23:52:15"},{"Id":"8733","Date":"2017-12-05 23:52:08"},{"Id":"7832","Date":"2017-12-05 23:42:36"},{"Id":"7825","Date":"2017-12-05 23:39:42"},{"Id":"3138","Date":"2017-12-05 21:56:47"},{"Id":"4805","Date":"2017-12-05 21:24:41"},{"Id":"8291","Date":"2017-12-05 00:11:44"},{"Id":"8291","Date":"2017-12-05 00:11:39"},{"Id":"8291","Date":"2017-12-05 00:11:33"},{"Id":"8291","Date":"2017-12-05 00:11:28"},{"Id":"8291","Date":"2017-12-05 00:11:22"},{"Id":"8291","Date":"2017-12-05 00:11:17"},{"Id":"8291","Date":"2017-12-05 00:11:11"},{"Id":"8291","Date":"2017-12-05 00:11:05"},{"Id":"8291","Date":"2017-12-05 00:11:00"},{"Id":"8291","Date":"2017-12-05 00:10:55"},{"Id":"8291","Date":"2017-12-05 00:10:48"},{"Id":"8291","Date":"2017-12-05 00:10:43"},{"Id":"8291","Date":"2017-12-05 00:10:37"}]
This is the format of the php array outputs in json. I'm trying my best but unfortunately I can't load the data in tablesorter pager.. I have read almost every single stackoverflow topic related to this and Mottie's pager example. The problem I face seems to be the format of the json.
Is it possible to make tablesorter plugin to read through the json file that I have given example of?
In addition I use ajaxurl to load the file ajaxUrl (everything is loaded in the header):
<script type="test/javascript">
$(function(){
// Initialize tablesorter
// ***********************
$("myTable")
.tablesorter({
theme: 'blue',
widthFixed: true,
sortLocaleCompare: true, // needed for accented characters in the data
sortList: [ [0,1] ],
widgets: ['zebra']
})
// initialize the pager plugin
// ****************************
.tablesorterPager({
// **********************************
// Description of ALL pager options
// **********************************
// target the pager markup - see the HTML block below
container: $(".pager"),
// If you want to use ajaxUrl placeholders, here is an example:
// ajaxUrl: "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
// where {page} is replaced by the page number (or use {page+1} to get a one-based index),
// {size} is replaced by the number of records to show,
// {sortList:col} adds the sortList to the url into a "col" array, and {filterList:fcol}
// the filterList to the url into an "fcol" array.
// So a sortList = [[2,0],[3,0]] becomes "&col[2]=0&col[3]=0" in the url
// and a filterList = [[2,Blue],[3,13]] becomes "&fcol[2]=Blue&fcol[3]=13" in the url
ajaxUrl : 'http://example.com/json.php?paged={page}&{sortList:column}',
// use this option to manipulate and/or add additional parameters to the ajax url
customAjaxUrl: function(table, url) {
// manipulate the url string as you desire
url += '&currPage=' + window.location.pathname;
// trigger a custom event; if you want
$(table).trigger('changingUrl', url);
// send the server the current page
return url;
},
// ajax error callback from $.tablesorter.showError function
// ajaxError: function( config, xhr, settings, exception ){ return exception; };
// returning false will abort the error message
ajaxError: null,
// add more ajax settings here
// see http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
ajaxObject: {
type: 'GET', // default setting
dataType: 'json'
},
// process ajax so that the following information is returned:
// [ total_rows (number), rows (array of arrays), headers (array; optional) ]
// example:
// [
// 100, // total rows
// [
// [ "row1cell1", "row1cell2", ... "row1cellN" ],
// [ "row2cell1", "row2cell2", ... "row2cellN" ],
// ...
// [ "rowNcell1", "rowNcell2", ... "rowNcellN" ]
// ],
// [ "header1", "header2", ... "headerN" ] // optional
// ]
// OR
// return [ total_rows, $rows (jQuery object; optional), headers (array; optional) ]
ajaxProcessing: function(data){
if (data && data.hasOwnProperty('rows')) {
var indx, r, row, c, d = data.rows,
// total number of rows (required)
total = data.total_rows,
// array of header names (optional)
headers = data.headers,
// cross-reference to match JSON key within data (no spaces)
headerXref = headers.join(',').replace(/\s+/g,'').split(','),
// all rows: array of arrays; each internal array has the table cell data for that row
rows = [],
// len should match pager set size (c.size)
len = d.length;
// this will depend on how the json is set up - see City0.json
// rows
for ( r=0; r < len; r++ ) {
row = []; // new row array
// cells
for ( c in d[r] ) {
if (typeof(c) === "string") {
// match the key with the header to get the proper column index
indx = $.inArray( c, headerXref );
// add each table cell data to row array
if (indx >= 0) {
row[indx] = d[r][c];
}
}
}
rows.push(row); // add new row array to rows array
}
// in version 2.10, you can optionally return $(rows) a set of table rows within a jQuery object
return [ total, rows, headers ];
}
},
// Set this option to false if your table data is preloaded into the table, but you are still using ajax
processAjaxOnInit: true,
// output string - default is '{page}/{totalPages}';
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname (cssDisabled option) to the pager arrows when the rows
// are at either extreme is visible; default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 1,
// Number of visible rows - default is 10
size: 50,
// Saves the current pager page size and number (requires storage widget)
savePages: true,
// Saves tablesorter paging to custom key if defined.
// Key parameter name used by the $.tablesorter.storage function.
// Useful if you have multiple tables defined
storageKey: 'tablesorter-pager',
// Reset pager to this page after filtering; set to desired page number (zero-based index),
// or false to not change page at filter start
pageReset: 1,
// if true, the table will remain the same height no matter how many records are displayed.
// The space is made up by an empty table row set to a height to compensate; default is false
fixedHeight: false,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to
// add/remove rows with the pager enabled.
removeRows: false,
// If true, child rows will be counted towards the pager set size
countChildRows: false,
// css class names of pager arrows
cssNext : '.next', // next page arrow
cssPrev : '.prev', // previous page arrow
cssFirst : '.first', // go to first page arrow
cssLast : '.last', // go to last page arrow
cssGoto : '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay : '.pagedisplay', // location of where the "output" is displayed
cssPageSize : '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes; see the "updateArrows" option
// (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled : 'disabled', // Note there is no period "." in front of this class name
cssErrorRow : 'tablesorter-errorRow' // error information row
});
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/extras/jquery.tablesorter.pager.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.js"></script>
<table id="myTable" class="tablesorter">
<thead>
<tr class="tablesorter-ignoreRow">
<td class="pager" colspan="5">
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
<option value="50">50</option>
</select>
</td>
</tr>
<tr>
<th>1</th> <!-- thead text will be updated from the JSON; make sure the number of columns matches the JSON data -->
<th>2</th>
</tr>
</thead>
<tbody> <!-- tbody will be loaded via JSON -->
</tbody>
</table>
I am generating a downloadable excel file from mysql database using phpexcel. In that, there is a field having 18 digit number, which in the mysql, it is defined as Bigint. The number is defined as a hyperlink in the code. Now, there is the following problem -
The last 4 digits of the number hyperlink are displayed as 0000 although on clicking the number hyperlink, it is opening correctly. Example 860814069447613475 is shown as 860814069447610000 in the generated excel
Here is my code -
$objPHPExcel->getActiveSheet()
->getStyle('A'.(string)$n)
->getNumberFormat()
->setFormatCode(
PHPExcel_Style_NumberFormat::FORMAT_NUMBER
);
$n = 2;
while ($row = mysqli_fetch_array($result)){
$objPHPExcel->getActiveSheet()->setCellValue('A'.(string)$n,
$row['t_id']);
$objPHPExcel->getActiveSheet()->setCellValue('B'.(string)$n,
$row['t_text']);
$objPHPExcel->getActiveSheet()->setCellValue('C'.(string)$n,
$row['user_name']);
$objPHPExcel->getActiveSheet()->setCellValue('D'.(string)$n,
$row['description']);
$objPHPExcel->getActiveSheet()->setCellValue('E'.(string)$n
,$row['time']);
$objPHPExcel->getActiveSheet()->setCellValue('F'.(string)$n,
$row['place']);
$objPHPExcel->getActiveSheet()->getStyle("A$n:F$n")->getAlignment()-
>setWrapText(true);
$objPHPExcel->getActiveSheet()
->getCell('A'.(string)$n)
->getHyperlink()
->setUrl('http://t.com/'.$row['user_name'].'/status/' . $row['t_id']);
// Config
$link_style_array = [
'font' => [
'color' => ['rgb' => '0000FF'],
'underline' => 'single'
]
];
// Set it!
$objPHPExcel->getActiveSheet()->getStyle('A'.(string)$n)->applyFromArray($link_style_array);
$n++;
}
Found code which worked for me -
setCellValueExplicit('A'.(string)$n, $row['t_id'],
PHPExcel_Cell_DataType::TYPE_STRING);
I'm new to web-design and in process of creating a sports website based on the WordPress platform.
One of the sports that the site will be covering is cricket. My site is almost done, but I'm stuck at few very important CSS/Html tables for data. I would really appreciate if someone here could guide/help me on how to create tables like the ones in the links bellow or whether there is anyway someone can copy html/css from an existing site and style it.
I just need a copy of the tables, sorting options are not needed
Similar scorecard as light as possible would be great
Are these things possible with CSS/html in Wordpress or is there any better option for such tables?
Here are two solutions you could use:
Solution #1: TabPress Plugin
Through a graphical panel, you can fully customize your table. You can set your own CSS, you can have colspan, rowspan or all together. Check out the demo. If you don't want to spend too much time in coding, give it a try.
Solution #2: WP_List_Table
It's available since WordPress 3.1. WP 3.1 uses it to build the tables you can see in the admin panel. The table who displays the posts for instance uses this class. However, you can disable some features such as sorting, bulk operations etc.
Here is a sample code taken from one of my blogs. I wanted to display a table of statistics with no sorting option. Call ff_show_stats() to display the table from your PHP code.
if( ! class_exists( 'WP_List_Table' ) ) {
require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}
class FFStatsTable extends WP_List_Table {
function __construct(){
}
function get_columns(){
$columns = array(
'id' => 'ID',
'creation' => 'Creation',
'country' => 'Country'
// Add as much column as you want
// 'column_name_in_query' => 'Displayed column name'
);
return $columns;
}
function column_default( $item, $column_name ) {
switch( $column_name ) {
case 'id':
case 'creation':
case 'country':
return $item[ $column_name ];
default:
return print_r( $item, true ) ; //Show the whole array for debugging purposes
}
}
function prepare_items() {
global $wpdb;
$columns = $this->get_columns();
$hidden = array();
$sortable = array();//Empty array for disabling sorting
$this->_column_headers = array($columns, $hidden, $sortable);
$this->items = $wpdb->get_results(
"SELECT id,creation,country FROM wp_my_table WHERE my_condtion=TRUE",
ARRAY_A
);
}
}
function ff_show_stats() {
$myListTable = new FFStatsTable();
echo '<div class="wrap"><h2>Stats</h2>';
$myListTable->prepare_items();
$myListTable->display();
echo '</div>';
}
You can have a more detailed sample code here : http://plugins.svn.wordpress.org/custom-list-table-example/tags/1.2/list-table-example.php