Recently I found a pretty graph when I was browsing the adminskins at ThemeForest and in one of the templates I found a really nice, smooth, clean graph. But I've searching arround but so far without luck finding out which solution is used.
And example can be found at:
http://enstyled.com/adminus/original/page.html
The source of this graph looks like:
<table class="stats bar" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<td> </td>
<th scope="col">02.09</th>
<th scope="col">03.09</th>
<th scope="col">04.09</th>
<th scope="col">05.09</th>
<th scope="col">06.09</th>
<th scope="col">07.09</th>
<th scope="col">08.09</th>
<th scope="col">09.09</th>
<th scope="col">10.09</th>
<th scope="col">11.09</th>
<th scope="col">12.09</th>
<th scope="col">01.10</th>
<th scope="col">02.10</th>
<th scope="col">03.10</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Page views</th>
<td>1800</td>
<td>900</td>
<td>700</td>
<td>1200</td>
<td>600</td>
<td>2800</td>
<td>3200</td>
<td>500</td>
<td>2200</td>
<td>1000</td>
<td>1200</td>
<td>700</td>
<td>650</td>
<td>800</td>
</tr>
<tr>
<th scope="row">Unique visitors</th>
<td>1600</td>
<td>650</td>
<td>550</td>
<td>900</td>
<td>500</td>
<td>2300</td>
<td>2700</td>
<td>350</td>
<td>1700</td>
<td>600</td>
<td>1000</td>
<td>500</td>
<td>400</td>
<td>700</td>
</tr>
</tbody>
</table>
Can someone please tell me which graphingsolution is used here?
That page is just drawing lines in a canvas tag.
In that page they are using jquery and you can use Flot which is a graph plugin in jquery.
Related
I'm trying to remove all attributes (class, id and so on) from an HTML table I'm scraping.
So for example, the value for html would be the following:
<table id="tablepress-29" class="tablepress tablepress-id-29">
<thead>
<tr class="row-1 odd">
<th class="column-1">1</th>
<th class="column-2">2</th>
<th class="column-3">3</th>
</tr>
</thead>
<tbody class="row-hover">
<tr class="row-2 even">
<td colspan="3" class="column-1">
<span id="testing---id">
<h2><b>Testing</b></h2>
</span></td>
</tr>
</thead>
</table>
My C#, using HTML Agility Pack is the following:
var doc = new HtmlDocument();
doc.LoadHtml(html.ToString());
var table = doc.DocumentNode.SelectSingleNode("//table");
table.Attributes.Remove("class");
table.Attributes.Remove("id");
var final = table.OuterHtml;
Which strips the first line from
<table id="tablepress-29" class="tablepress tablepress-id-29">
to
<table>
However, it ignores the rest of the code.
I have created a table using component nztable from ``ng-zorro`. That table contains a nested table where I want to load data dynamically(REST service call) on click of the expand icon.
I am able to load the data in the nested table but when I expand next row, it is overriding data in the first row with the new result.
As nested table creation is in the loop(ngfor), I am unable to control the data binding to a specific row.
<nz-table #nestedTable [nzData]="displayData" [nzPageSize]="10">
<thead colspan="5">
<tr>
<th nzWidth="4%"nzShowExpand></th>
<th nzWidth="12%">Id</th>
<th nzWidth="10%">Start Time</th>
<th nzWidth="10%">End Time</th>
<th nzWidth="10%">Status</th>
</tr>
</thead>
<tbody>
<ng-template ngFor let-data [ngForOf]="nestedTable.data">
<tr>
<td nzShowExpand [(nzExpand)]="data.expand" (click)="getDetails(data)"></td>
<td >{{data.Id}}</td>
<td>{{data.startTime}}</td>
<td>{{data.endTime}}</td>
<td>{{data.status}}</td>
</tr>
<tr [nzExpand]="data.expand">
<td><nz-spin *ngIf="isEventLoading"></nz-spin></td>
<td colspan="9">
<nz-table #innerTable [nzData]="innerTableData" nzSize="middle" [nzShowPagination]="false">
<thead>
<tr>
<th>E ID</th>
<th>S ID</th>
<th>E Type</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of innerTable.data">
<td>{{data.eID}}</td>
<td>{{data.sID}}</td>
<td>{{data.eType}}</td>
</tr>
</tbody>
</nz-table>
Try to replace this [nzData]="innerTableData" whith your inner collection like this [nzData]="data.childRows".
This error happens only in IE but I don't have any idea as I checked "developer tools" and saw nothing special.
When the page is load as the last cell can't hold "Launch Time", the row is expanded. However, if I click on top left "AWS Test VPC"(it sends the same request to web service and loads same data), the table is good now(Pic 2)
I'll attach the code if needed. Just don't know what's wrong
Have you try to add bootstrap class to the th in the table like below example.
<table>
<thead>
<tr>
<th class="col-xs-2">Col 1</th>
<th class="col-xs-1">Col 2</th>
<th class="col-xs-1">Col 3</th>
<th class="col-xs-1">Col 4</th>
<th class="col-xs-2">Col 5</th>
<th class="col-xs-2">Col 6</th>
<th class="col-xs-2">Col 7</th>
<th class="col-xs-1">Col 8</th>
</tr>
</thead>
</table>
This will resize the column to your desired size.
I don't want pagination... or a scrollable table. I don't want to specify a height but if you don't it default to something.
I just want my regular old table with sorting options.
(I'm using bootstrap-table)
You can only set the sortable column option and don't set the height option:
<table data-toggle="table"
data-url="your-json-url">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Name</th>
<th data-field="price" data-sortable="true">Price</th>
</tr>
</thead>
</table>
http://jsfiddle.net/wenyi/e3nk137y/3500/
I got this code:
<th:block th:if="${!#lists.isEmpty(partyInfoByUploaderList)}" th:each="pInfo : ${partyInfoByUploaderList}">
<h4 th:text="${pInfo.getCharName()}"></h4>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th:block th:if="${!#lists.isEmpty(pInfo.getCharColumnTitles())}" th:each="title: ${pInfo.getCharColumnTitles()}">
<td th:text="${title}"></td>
</th:block>
</tr>
</thead>
<tbody>
<tr>
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
</tr>
</tbody>
</table>
And I got this result:
http://screenshot.ru/6dfbe559f905a17dff44d360b5d13f28
So this code correctly create table head, and dont parse table body.
BTW, after delpoy this code appear at another place:
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<td th:text="${val}"></td>
</th:block>
Web source code in browser:
http://screenshot.ru/9d3fab8030c5ca382ab81094e0c1ca86
Question #2:
Why this code produce TemplateProcessingException error?
P.S. Not enough reputation for images, so just links. Soz
According to Thymeleaf Documentation, <th:block></th:block> should wrap <tr></tr> and not the opposite. So you should try this :
<th:block th:each="val: ${pInfo.getCharColumnValues()}">
<tr>
<td th:text="${val}"></td>
</tr>
</th:block>