Develop Reference

Highcharts error csv.replace is not a function

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/

How To Load Plist Data On HighChart Using Objective C?

I am Integrating HighChart Into my iPhone application. I am using below Javascript file for appearing high chart. Here below URL high chart providing data but I want to remove this URL and want to read my Xcode plist data and shown on chart based on that data.
https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?
Below My Code
$(function () {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function (data) {
// Create the chart
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : ''
},
navigator : {
enabled : false
},
plotOptions: {
line: {animation: false}
},
series : [{
name : 'AAPL Stock Price',
data : data,
tooltip: {
valueDecimals: 2
}
}]
});
});
});

To load a plist element, you can use the NSDictionary selectors dictionaryWithContentsOfFile: or dictionaryWithContentsOfURL:
More information: NSDictionary reference

#SteaveJobs Solution you are looking is not possible as https://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=? suggests there is a file by name "aapl-c.json" which server will extract json data from and plot graph using StockChartas component.
Which i feel you should look for is some thing similar to Core Plot and its documentation

How to build the tree grid in UI from XML file as data source?

I want to build the tree grid by parsing XML file.
I saw extJS XML TREE example but it require to have specific tags in XML file like id (to describe parent - child relationship), text (to print the tree node Name) , and leaf (to specify leaf and non leaf element) tags.
So, I have to manipulate my xml file to add these tags. But, is there any way i can achieve same result without adding extra tags?

Your going to want your own custom reader. You can use a custom reader to intercept your xml response and modify it before it goes into your store. For example, loading the following xml file will result in a grid where the first "foo" value is 11 :
Ext.define('MyReader', {
extend : 'Ext.data.reader.Xml',
alias : 'reader.myreader',
getResponseData: function(response) {
// Here is the xmlDocument you are going to change
var xmlDoc = response.responseXML;
// I change the first foo value to 11.
var fooValues=xmlDoc.getElementsByTagName('foo');
fooValues[0].innerHTML=11;
return this.callParent([response]);
}
});
Ext.define('Fiddle.view.Foo', {
extend : 'Ext.grid.Panel',
xtype : 'fiddle-foo',
store: {
autoLoad: true,
fields: ['foo'],
proxy: {
type: 'ajax',
url: 'data1.xml',
reader: {
type : 'myreader', // instead of xml
root : 'root',
record: 'fooRecord'
}
}
},
columns : [
{
text : 'Foo',
dataIndex : 'foo',
flex : 1
}
]
});
Ext.application({
name : 'Fiddle',
launch : function() {
new Fiddle.view.Foo({
renderTo : document.body,
width : 400,
height : 400,
title : 'Test'
});
}
});
You can check this out on sencha fiddle with this sample xml:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<fooRecord>
<foo>1</foo>
</fooRecord>
<fooRecord>
<foo>2</foo>
</fooRecord>
</root>
I understand you probably can't switch from XML to JSON since your not touching the server at all, but JSON is much simpler to parse if you are able to. You can find similar steps for that here: https://www.sencha.com/forum/showthread.php?261182-How-to-implement-custom-JSON-reader

How do I pass a PHP variable from one file to another multiple times?

I have a highstock graph in a file called charts.php that reloads the graph data from a secondary file called data.php. Seeing as I have 5 series in my highstock graph I have to call the data.php file 5 times, each time using a different variable, but when I set the variable in my charts.php file it only uses the last set value of this variable. Is is possible to solve this, or is this just the way PHP works? Do I have to create 5 separate data.php files in order for this to work?
Here's basically what my code looks like (showing 2 series to keep it short):
var chart = new Highcharts.StockChart({
chart: {
renderTo: 'chart'
},
title : { text : 'MyChart' },
series : [
{
name : 'Unit 0',
data : [],
tooltip: { valueDecimals: 1, valueSuffix: ' kW' },
},
{
name : 'Unit 1',
data : [],
tooltip: { valueDecimals: 1, valueSuffix: ' kW' },
}
]
});
<?php $_SESSION["unit"] = 0; ?>
$.getJSON( "data.php", function (data) {
chart.series[0].setData( data );
});
<?php $_SESSION["unit"] = 1; ?>
$.getJSON( "data.php", function (data) {
chart.series[1].setData( data );
});
So the problem is that both series[0] and series[1] use the last value of my variable, which in this case is $_SESSION["unit"] = 1. Is the a way to make this work? Any better alternatives?
Maybe if I could create data for all of the series in one file and somehow split that data and pass it to series[0] and series[1] separately, but I have no idea how to do that..
Any help is appreciated.

Maybe you could modify your data.php file, so instead of using $_SESSION["unit"] to determine which var to use, use $_GET["unit"] instead. Then, in your code above, it would be:
$.getJSON( "data.php?unit=0", function (data) {
chart.series[0].setData( data );
});
$.getJSON( "data.php?unit=1", function (data) {
chart.series[1].setData( data );
});

It depends on your needs, if the $unit values are always the same I would just call data.php once and update all the graphs at once using the JS response.
If $unit has a dynamic variable I would send it along with the $.getJSON function.
var data = {
unit: $_GET['unit']
};
$.getJSON( "data.php", data, function (response) {
updateGraph(graph, response);
});
For more on getJSON on the structure of the function, visit http://api.jquery.com/jquery.getjson/

AngularJS for Highcharts with dynamic ajax data

I'm learning Javascript and AngularJS by integrating two examples: Spring MVC and AngularJS and AngularJS and Highcharts.
This seemingly simple task has puzzled me for a few days:
In the Spring REST-powered backend, I added the class Book with a property "prices", an array of doubles to represent the monthly or yearly prices of the book. The AngularJS client shows the "prices" by adding the following code to html:
<div style="height:300px;width:250px;overflow:auto;float:left;">
<table class="table table-striped">
<tr ng-repeat="price in book.prices">
<td>{{price}}</td>
</tr>
</table>
</div>
and the following code to the controller:
var bookId = $routeParams.bookId;
if (bookId === 'new') {
$scope.book = new Book();
} else {
$scope.book = Book.get({bookId: bookId});
}
The table updates dynamically with the data from the backend. Pretty neat and elegant!
What baffles me is the highcharts part. I added the following to the html:
<div style="border: 1px solid #ccc; width: 620px; float: right">
<highchart id="chart1" config="chartConfig"></highchart>
</div>
and some static values for the "prices" to the controller:
var prices = [60.5, 55.7]; // Static data works
$scope.chartConfig = {
options : {
chart : {
type : 'line'
}
},
series : [ {
data : prices
} ],
title : {
text : 'Monthly Book Prices'
},
loading : false
}
And the hichcharts works fine with AngularJS.
I then tried to update the dynamic "prices" from the backend to the chart by adding some code to the controller:
// var prices = [60.5, 55.7]; // Static data works
var prices = $scope.book.prices
or
// var prices = [60.5, 55.7]; // Static data works
var prices = [$scope.book.prices]
and after some time realized this was a quite naive understanding of AngularJS. I've also followed the way described in
How to produce a highchart (using angular js) with json data coming from an Ajax request without success.
Is there an elegant way like the prices table shown above for the Highcharts to display the dynamic data from backend?

Try changing the data in your chart config directly:
$scope.chartConfig.series[0].data = $scope.book.prices
Or use an object for the series:
var prices = {data: [60.5, 55.7]}; // Static data works
$scope.chartConfig = {
options : {
chart : {
type : 'line'
}
},
series : [ prices ],
title : {
text : 'Monthly Book Prices'
},
loading : false
}
Then later:
prices.data = [60.5, 55.7]