I am using the data.js plugin for highcharts. Using their basic demo I have created my own test version using our .NET generated table. The documentation on this is very sparse (essentially it is what is in data.src.js). I am getting errors that it is sending in data values as strings (HC error #14). I am not entirely sure how to modify the code to make it work with my simple table.
Here is my js code:
$(function () {
$('#container').highcharts({
data: {
table: document.getElementById('ctl00_Main_content_ucDashboard_ctl00_ctl11_ctl02_lstData_tblData')
},
chart: {
type: 'column'
}
});
});
Additional info:
It appears that the issue is that my table cells contain span tags encapsulating the values. I have no control over those tags and are there for presentation.
The <span> tags within the table are the problem. Try this:
$(function () {
$('#container').highcharts({
data: {
table: $('#ctl00_Main_content_ucDashboard_ctl00_ctl11_ctl02_lstData_tblData').clone(true).find('span').replaceWith(function() { return this.innerHTML; }).end()[0]
},
chart: {
type: 'column'
},
title: {
text: ''
}
});
});
(you could also simply remove the span tags from where ever they are coming from)
http://jsfiddle.net/5Gjyy/
Related
I am writting this highchart in angular and I want to create my own range selector dynamically using this.chart.update. However it keeps saying undefined update not a function. How can I fix the code. Also, I am trying to export the dataTable into the graphTable div which is into a differnt tab. I have attached a image please help. [graph/tableview image][1]
You can try to get the data from the range selector events rangeSelector.buttons.events, you can also set your own datagrouping with rangeSelector.buttons.dataGrouping.
rangeSelector: {
buttons: [{
type: 'month',
count: 1,
text: '1m',
events: {
click: function () {
console.log(this);
}
}
},
}
Demo:
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/stock/rangeselector/button-click/
API References:
https://api.highcharts.com/highstock/rangeSelector.buttons.events
https://api.highcharts.com/highstock/rangeSelector.buttons.dataGrouping
Implement inside chart.events.load() with this you are already close to getting data from other variables/sources and passing it inside the rangeSelector button events.
chart: {
events: {
load: function() {
let chart = this,
rangeSelector = chart.rangeSelector;
console.log(chart);
rangeSelector.update({
buttons: [{
Demo:
https://jsfiddle.net/BlackLabel/Lgdhokfy/
API References:
https://api.highcharts.com/highcharts/chart.events.load
I'm working on parsing some data from a CSV file, but i get this error :
Uncaught TypeError: csv.replace is not a function
I don't know why, can somebody help me ?
This is my loadCSV.js:
jQuery(document).ready(function($) {
var parse;
var csv = Papa.parse("http://1001dev.com/Chahine/wp-content/themes/consulting-child/fonds/DigitalStarsEurope/volatilityFR.csv", {
download: true,
complete: function(results) {
console.log(results.data);
$("#EuropeVolatilityBtn").click(function() {
$('#EuropeVolatility').highcharts({
data: {
csv: results
}
});
});
}
});
});
You can see the result here in :
http://1001dev.com/Chahine/fonds/
When you click on the button : Volatilité the message appear.
Thanks a lot,
Cheers,
Jordan
You've already parsed your CSV file into json using Papa.parse. Highcharts data is looking for a CSV string, not a json object.
Also, why are you fetching the CSV file outside the click handler? The CSV will be downloaded even if the user never clicks on that button.
See: https://www.highcharts.com/docs/working-with-data/data-module
$.get('data.csv', function(csv) {
$('#container').highcharts({
chart: {
type: 'column'
},
data: {
csv: csv
},
title: {
text: 'Fruit Consumption'
},
yAxis: {
title: {
text: 'Units'
}
}
});
});
In addition to what #Barbara said, you can use Highcharts data module and parse your data adequately inside complete function. Take a look at the example posted below.
API Reference:
http://api.highcharts.com/highcharts/data.complete
Example:
http://jsfiddle.net/ny0qh8o3/
I'm working with this bootstrap library and actually everything works fine. The question is, Can bootstrap-table generate header automatically in depend of JSON file? I've tried to find any information about that, but unlucky. Now my header is generated from script like from this example:
function initTable() {
$table.bootstrapTable({
height: getHeight(),
columns: [{
field: 'field1',
title: 'title1',
sortable: true
}, {
field: 'field2',
title: 'title2',
sortable: true
}, {
field: 'field3',
title: 'title3',
sortable: true
}, {
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
}
],
formatNoMatches: function () {
return "This table is empty...";
}
});
Does anyone how to generate header automatically?
Populating from a flat json file is definetly possible but harder than from a seperate (slimmer and preped) data request, because title and other attributes 'might' have to be guessed at.
Ill show basic approach, then tell you how to make it work if stuck with a flat file that you CAN or CANT affect the format of (important point, see notes at end).
Make a seperate ajax requests that populates var colArray = [], or passes direct inside done callback.
For example, in callback (.done(),.success(), ect) also calls to the function that contains the js init code for the table.
You might make it look something like this:
function initTable(cols) {
cols.push({
field: 'Actions',
title: 'Item Operate',
align: 'center',
events: operateEvents,
formatter: operateFormatter
});
$("#table").bootstrapTable({
height: getHeight(),
columns: cols,
formatNoMatches: function () {
return "This table is empty...";
}
});
}
$(document).ready(function(){
$.ajax({
method: "POST",
url: "data/getColumns",
// data: { context: "getColumns" }
datatype: "json"
})
.done(function( data ) {
console.log( "getCols data: ", data );
// Prep column data, depending on what detail you sent back
$.each(data,function(ind,val){
data.sortable = true;
});
initTable(data);
});
});
Now, if you are in fact stuck with a flat file, point the ajax towards that then realise the question is whether you can edit the contents.
If yes, then add a columns array into it with whatever base data (title, fieldname, ect) that you need to help build your columns array. Then use responseHandler if needed to strip that columns array if it causes issues when loading into table.
http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options
http://issues.wenzhixin.net.cn/bootstrap-table/ (click 'see source').
If no, you cant edit contents, and only have the fieldname, then look at using that in the .done() handler with whatever string operation (str_replace(), ect) that you need to make it look the way you want.
I'm using Select2 (http://ivaynberg.github.io/select2/) to have an input field of a form (let's say its id is topics) to be in tagging mode, with the list of existing tags (allowing the user to choose some of these tags, or to create new ones) being provided by an array of remote data.
The array (list.json) is correctly got from my server. It has id and text fields, since Select2 seems to need these fields. It thus looks like this:
[ { id: 'tag1', text: 'tag1' }, { id: 'tag2', text: 'tag2' }, { id: 'tag3', text: 'tag3' } ]
The script in the HTML file looks like this:
$("#topics").select2({
ajax: {
url: "/mypath/list.json",
dataType: 'json',
results: function (data, page) {
return {results: data};
},
}
});
But the input field is showing "searching", which means it's not able to use the array for tagging support.
In the script with Select2, I know I have to define formatSelection and formatInput, but I'm not getting how they should work in my case, although I have read the Select2 documentation... Thank you for your help!
You need to add the function like explained here. In your example:
function format(state) {
return state.text;
}
I am trying to get data to load on my chart from an API. All the data is getting to the chart correctly, but the chart doesn't load and I get the unresponsive script error. I'm using Highcharts. Any suggestions? Thanks. My code is below.
Model
public function ajax_get_chart() {
$quotes = $this->rest->get('api/1/BTCUSD/trades/fetch');
$series_data = array();
$results = $quotes->return;
$i = 0;
foreach ($results as $quote)
{
$series_tmp = array(
'date' => $quote->date,
'price' => $quote->price
);
$series_data[]= $series_tmp;
$i= $i+1;
}
die (json_encode($series_data));
return TRUE;
}
Javascript
$(document).ready(function() {
var chart;
$.ajax({
url: "/chart/ajax_get_chart", // the URL of the controller action method
dataType: "json",
success: function(result)
{
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
title: {
text: 'Price'
}
},
yAxis: {
min: 0,
title: {
text: 'Date'
}
},
legend: {
backgroundColor: '#FFFFFF',
reversed: true
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +'';
}
},
plotOptions: {},
series: result
});
}
});
});
Sounds like the problem is that there's too much data to present.
You can try using a speedier browser (Chrome usually works pretty fast), limiting the data, or trying another charting library.
Limiting the data is probably the most likely one to work. If you need to show all the data, the best way to go about it would be to only load partial data and then if the user for example scrolls the chart, load the missing data.
Another way to present more data at the same time would be to calculate averages for the data on server. For example, if the ticker data is from every second, you could pre-calculate hourly or even daily averages on the server. This generally allows you to show a relatively accurate chart without causing performance problems, and many libraries also support dynamically loading more accurate data if you zoom the chart.
Highcharts can not handle so huge number of data, but using Highstock with dataGrouping or lazy-loading you should be able to handle a lot of points, see demo.
Also this article should help.