I am using Highcharts with JSON data to render a standard line chart but am having some trouble getting the series data to display. The chart frame and series names appear on the page and everything checks out in the console, so I know that it has succeeded in fetching the data.
The JSON output appears valid when I run through JSONLint so I'm a little confused as to why this chart will not render correctly.
Here is my chart JAVASCRIPT CODE:
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
zoomType: "x"
},
xAxis: {
type: 'datetime',
tickInterval: 7 * 24 * 3600 * 1000,
labels: {
format: '{value:%b %e, %Y}',
rotation: -45
},
},
yAxis: {
allowDecimals: true,
title: {
text: '$US'
}
},
tooltip: {
xDateFormat: '%b %e, %Y',
},
series: []
}
$.getJSON("mdb_ajax.php", function(json) {
options.series = new Array();
for(i=0;i< json.length;i++) {
options.series.push(json[i]);
}
var chart = new Highcharts.Chart(options);
});
});
Here's the corresponding PHP FILE:
$price_output = $prices->getPrices($filter_option);
foreach($price_output as $category => $price)
{
$arr[] = array('name' => $category, 'data' => $price);
}
print json_encode($arr);
As you can see I've jury-rigged the object to add "name" and "data" keys to aid Highcharts, but the object results in perfectly valid JSON without this additional work (it just won't display anything this way).
Here is a sample of the JSON DATA:
[
{
"name": "CTGY1",
"data": {
"1414998000000": "6.2400",
"1415084400000": "-3.1110",
"1415170800000": "1.5090",
"1415257200000": "4.2390",
"1415343600000": "1.6990",
"1426140000000": "5.9100"
},
{
"name": "CTGY2",
"data": {
"1414998000000": "7.7890",
"1415084400000": "-0.7610",
"1415170800000": "1.1600",
"1415257200000": "5.3300",
"1415343600000": "1.9290",
"1415602800000": "-0.8260"
}
]
I'm guessing there needs to be some definition of the key-values when processing the fetched JSON data, I'm just not sure what that would look like at this point. Any ideas on the best way to do this?
data should be an array and the Y-values should not be strings in your case:
data: [[1415602800000,-0.8260],[],...]
here are the acceptable data structures for data within series
http://api.highcharts.com/highcharts#series.data
Highcharts API also provide a few examples:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/series/data-array-of-arrays/
Related
i've got a JSON that store multiple value like this,
[
{"Description":"bankname1", "Month":"April", "Amount":"1700"},
{"Description":"bankname1", "Month":"June", "Amount":"1300"},
{"Description":"bankname1", "Month":"March", "Amount":"1500"},
{"Description":"bankname2", "Month":"March", "Amount":"100"},
{"Description":"bankname2", "Month":"April", "Amount":"1200"},
]
Into this JSON I've 12 Month for each Bankname (JSON can have multiple bank name).
I would like to show a line-bar for each bankname and on x axis show Month name.
At this moment I can see only one line chart with value of bank mixed on name line.
this is my code:
var chart = c3.generate({
bindto: '#c3_incassi',
data: {
json: data,
keys: {
x: 'MONTH',
value: ['AMOUNT']
},
type: 'line'
},
axis: {
x: {
type: 'category',
categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
}
}
});
How can I solve this problem?
Many thanks
Bye
Francesco
You need to get your json data into the correct format, as already commented by Abhas. The correct json format for c3.js line chart with multiple lines looks as follows:
{"bankname1":[1700,1300,1500,1100,1400,1800,2000,2100,1900,1100,1250,1050],"bankname2":[100,1200,300,1100,400,700,350,200,1200,1400,1050,900]}
The json string would contain the "bankname1" followed by 12 numeric values, one for each month, then "bankname2" followed by the 12 numeric values etc.
If you are using php at server-side, you can echo your json data, let's call it "dataset", into c3.js by:
var dataset = <?php echo $dataset; ?>;
data: {
json: dataset
},
I am doing it the excact same way and it works. The axis labels you can set up as in your code:
axis: {
x: {
type: 'category',
categories: ['GENNAIO', 'FEBBRAIO', 'MARZO', 'APRILE', 'MAGGIO', 'GIUGNO', 'LUGLIO', 'AGOSTO', 'SETTEMBRE', 'OTTOBRE', 'NOVEMBRE', 'DICEMBRE'],
}
}
My Requirement
I want to label the X-Axis of multi-series graph from multi-dim array.
HighChart script
var chart_PT1 = new Highcharts.Chart({
chart: {
height: 532,
renderTo: 'review_high_container'
},
title: {
text: 'IO Signal Data'
},
subtitle: {
text: 'Source: GPS Modem'
},
yAxis: {
title: {
text: 'Value'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
xAxis: {
type: 'datetime',
labels: {
enabled: true,
formatter: function () { try { return ddd[i][this.value][0]; } catch (err) { } },
}
},
});
for (i = 0; i < ddd.length; i++) {
chart_PT1.addSeries({ name: name[i], data: ddd[i], turboThreshold: 5000 });
}
My data array
Its an multi dim array signals=[] say 3 as shown below
signals[0] = {"Signal1",signalData[]} <=== signalData has say 20 data
signals[1] = {"Signal2",signalData[]} <=== signalData has say 10 data
signals[2] = {"Signal3",signalData[]} <=== signalData has say 80 data
signalData[] is expected to have the data for the signal say
signalData[0] ==> Value, TimeReceived,ID
signalData[1] ==> Value, TimeReceived,ID
signalData[2] ==> Value, TimeReceived,ID
.
.
.
signalData[20] ==> Value, TimeReceived,ID
Likewise signals[1].signalData[] and signals[2].signalData[] is expected to have data for its corresponding signals.
Each data in signalData includes data for value,TimeReceived and ID. So signals[0].signalData will contain array of data for signalOne; signals[1].signalData will contain array of data for signalTwo;
signals[2].signalData will contain array of data for signalThree;
and so on...
The graph would show one line for each signal(in this case 3 lines)
My Problem
I not able to label the X-Axis with the Time Value available inside the array - signals.signalData. Each signal may or may not have the same time within the array signals. So labelling by signals.signalData[0] do not pose right for other series signals.signalData[1],signals.signalData[2]....
How do I label X-Axis for the multi series?
Whats the best option to do this? as I see the time value inside the array say signals.signalData[0] may not be aligned with the the time value inside signals.signalData[1]
Update
Sample Data
signals ={
{ "SignalOne", {{"42","2/20/2018 05:25:09","S11"},{"99","2/20/2018 06:17:13","S12"},{"89","2/20/2018 07:25:09","S13"} },
{ "SignalTwo", {{"118","2/20/2018 05:25:09","S21"},{"33","2/20/2018 06:17:13","S22"} }
{ "SignalThree", {{"333","2/20/2018 05:25:09","S31"},{"43","2/20/2018 06:17:13","S32"},{"43","2/20/2018 06:17:13","S33"},{"43","2/20/2018 06:17:13","S34"} }
};
I'm trying to implement a Highcharts Column-Drilldown Chart in my Rails application using lazy_high_charts. I want to display data that's being pulled from my database and stored in four arrays (areas, areaScores, departments, and deptScores). I'm having trouble converting the JS from the example (JSFiddle) listed on the highchart site into ruby. I have not been able to find any resources on creating a column-drilldown chart in ruby. Any help on how to integrate the drilldown chart into my ruby application would be highly appreciated.
I have included the sample JavaScript shown on the Highcharts demo page and my controller method that populates the four arrays with data and builds the highchart.
Highcharts Column-Drilldown Chart Example (Javascript)
$(function () {
Highcharts.data({
csv: document.getElementById('tsv').innerHTML,
itemDelimiter: '\t',
parsed: function (columns) {
var brands = {},
brandsData = [],
versions = {},
drilldownSeries = [];
// Parse percentage strings
columns[1] = $.map(columns[1], function (value) {
if (value.indexOf('%') === value.length - 1) {
value = parseFloat(value);
}
return value;
});
$.each(columns[0], function (i, name) {
var brand,
version;
if (i > 0) {
// Remove special edition notes
name = name.split(' -')[0];
// Split into brand and version
version = name.match(/([0-9]+[\.0-9x]*)/);
if (version) {
version = version[0];
}
brand = name.replace(version, '');
// Create the main data
if (!brands[brand]) {
brands[brand] = columns[1][i];
} else {
brands[brand] += columns[1][i];
}
// Create the version data
if (version !== null) {
if (!versions[brand]) {
versions[brand] = [];
}
versions[brand].push(['v' + version, columns[1][i]]);
}
}
});
$.each(brands, function (name, y) {
brandsData.push({
name: name,
y: y,
drilldown: versions[name] ? name : null
});
});
$.each(versions, function (key, value) {
drilldownSeries.push({
name: key,
id: key,
data: value
});
});
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Browser market shares. November, 2013'
},
subtitle: {
text: 'Click the columns to view versions. Source: netmarketshare.com.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Brands',
colorByPoint: true,
data: brandsData
}],
drilldown: {
series: drilldownSeries
}
})
}
});
});
My Controller:
def generateOrgBreakdownReport
# First, query the database for the data you need for the report
#jsonanswerBRKD = queryDatabaseForOrgProgressReport()
# Second, process and combine data as needed for the report
#areaBreakdown, #deptBreakdown, #employBreakdown = computeAreaAndDeptPrepareScore(#jsonanswerBRKD)
# Third, you'll need to put the processed data into a format
# Highcharts will understand for the data series it uses
# for the graph.
#THESE ARRAYS HOLD THE NAMES AND SCORES OF AREAS AND DEPARTMENTS
#deptScores, #departments, #areaScores, #areas = cycleThroughProcessedDataAndCreateHighChartsDataSetsBreakdown(#areaBreakdown, #deptBreakdown, #employBreakdown)
# Last, we put the newly made data sets for Highcharts to work its magic.
#DONT KNOW HOW TO IMPLEMENT DRILLDOWN FOR RUBY
#orgBreakdown = LazyHighCharts::HighChart.new('column') do |f|
f.chart( type: 'column' )
f.xAxis(
title: { text: "Areas" },
type: 'category'
)
f.yAxis(
title: { text: "Preparedness Score (%)"},
)
f.series(
name: "Department Score",
colorByPoint: true,
data: #deptScores
)
f.series(
name: "Area Score",
data: #areaScores
)
f.title(
text: "Organizational Breakdown"
)
f.options[:xAxis][:categories] = #areas
f.drilldown({:series=>{
name:"Dept. Score",
data: #deptScore
}
})
end
end
Thanks,
Matt
I haven't used Lazy Highcharts, but assuming it mirrors the JSON from the JavaScript API you need to add the sub-series by name, e.g.
f.series(
name: "Department Score",
colorByPoint: true,
data: #deptScores,
drilldown: "subdept" #add this
)
Then you'll need to add drilldown data, and if Lazy Highcharts supports it, it might look something like this:
f.drilldown(
series: {
id: "subdept",
data: [
["One", 1],
["Two", 2],
["Three", 3]
]
}
)
See this basic drilldown fiddle to see how the resulting Javascript should look.
To get drilldown to work in Rails you have to make sure you include the drilldown module in your JavaScript manifest file (application.js).
I also had to download the file as it was not my highcharts module catalogue. You can find the file here: http://code.highcharts.com/modules/drilldown.js
Add this to application.js:
//= require highcharts/modules/drilldown
Outside of Rails you can include the drilldown module like this:
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
I am using Highcharts to plot JSON Data. The dates are in the string format.
JSON Data:
[{"BRENT_SPOT":70.88,"TRADE_DATE":"31-JUL-2009"},{"BRENT_SPOT":73.28,"TRADE_DATE":"03-AUG-2009"},{"BRENT_SPOT":74.31,"TRADE_DATE":"04-AUG-2009"},{"BRENT_SPOT":74.96,"TRADE_DATE":"05-AUG-2009"},{"BRENT_SPOT":74.4,"TRADE_DATE":"06-AUG-2009"},{"BRENT_SPOT":72.84,"TRADE_DATE":"07-AUG-2009"},{"BRENT_SPOT":73.29,"TRADE_DATE":"10-AUG-2009"},{"BRENT_SPOT":72.04,"TRADE_DATE":"11-AUG-2009"}]
HighCharts / JQuery Code :
<script>
var chart;
$(function() {
var options = {
chart: {
renderTo: 'container',
zoomType: 'xy',
type: 'line'
},
title: {
text: 'Brent Daily Price Curve (FPC as at <cfoutput>#f_date#</cfoutput>)'
},
xAxis: {
labels: {
rotation: 45,
step: 3
},
type: 'category'
},
yAxis: {
lineWidth: 1,
title: {
text: '$ USD'
},
min: 0
},
series: []
};
$.getJSON("brentpricehc_test.cfm?f_date=<cfoutput>#f_date#</cfoutput>", {}, function(jsonResult) {
var BrentUSDPrice = {
name: "Brent Spot (USD)",
type: "line",
data: [],
marker: {
radius: 2
}
};
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([this.TRADE_DATE, this.BRENT_SPOT]);
});
/*options.series[0] = BrentUSDPrice;*/
options.series.push(BrentUSDPrice);
chart = new Highcharts.Chart(options);
});
});
</script>
I'm unable to plot any values wrt each of the date strings. I tried converting the JSON dates to datetime instead but still the same issue.
Few More details (for testing purposes):
Modifying to the below line plots the graph with the correct "brent_spot" values. This means that the issue lies with the way the "trade_dates" are 'not' plotting.
BrentUSDPrice.data.push([index, this.BRENT_SPOT]);
Edit 2 : (Using Datetime type to make the code work)
JSON Data (New): Returned as TO_CHAR(TRADE_DATE, 'YYYY/MM/DD')
[{"BRENT_SPOT":70.88,"TRADE_DATE":"2009\/07\/31"},{"BRENT_SPOT":73.28,"TRADE_DATE":"2009\/08\/03"},{"BRENT_SPOT":74.31,"TRADE_DATE":"2009\/08\/04"},{"BRENT_SPOT":74.96,"TRADE_DATE":"2009\/08\/05"},{"BRENT_SPOT":74.4,"TRADE_DATE":"2009\/08\/06"},{"BRENT_SPOT":72.84,"TRADE_DATE":"2009\/08\/07"},{"BRENT_SPOT":73.29,"TRADE_DATE":"2009\/08\/10"},{"BRENT_SPOT":72.04,"TRADE_DATE":"2009\/08\/11"}]
$(jsonResult).each(function(index) {
BrentUSDPrice.data.push([new Date(this.TRADE_DATE), this.BRENT_SPOT]);
});
Server side language used : Coldfusion
Database : Oracle
Am I doing something silly somewhere?
I have just tried your code, and it works perfectly fine, see: http://jsfiddle.net/3bQne/1026/
I guess, you need to update to Highcharts 3.0.10 to get this working.
If you are using type: 'category' then you need to assign name: to the data points. See the categories entry at http://api.highcharts.com/highcharts#xAxis
If categories are present for the xAxis, names are used instead of numbers for that axis. Since Highcharts 3.0, categories can also be extracted by giving each point a name and setting axis type to "category".
So the question is whether you are using Highcharts 3.0 and if you do then it needs to look something like this:
data: [{
name: 'Point 1',
color: '#00FF00',
y: 0
}, {
name: 'Point 2',
color: '#FF00FF',
y: 5
}]
see: http://api.highcharts.com/highcharts#series.data
I have some difficulties displaying a graph with Highstock. It seems like I can't have access to the x-axis part where the graph should be displayed. I am new with Highstocks so my code could seem like a mess but my idea was the following:
First access the json file from the server. Convert it in the right format [[datestamp, value], ....]. Then display the graph.
Here is my Json file (file.json):
[{"date":"2013-10-04T22:31:12.000Z","value":30000},{"date":"2013-10-04T22:31:58.000Z","value":35000},{"date":"2013-10-04T22:32:05.000Z","value":60000},{"date":"2013-10-04T22:32:12.000Z","value":45000}]
My code is the following:
$(function() {
chartOjb = new Object();
var mydata = [];
$.getJSON('file.json', function(data) {
$.each(data, function (index, item) {
chartOjb.name = getTimestamp(item.date);
chartOjb.data = item.value;
mydata.push({ x: chartOjb.name, y: parseFloat(chartOjb.data) });
});
$('#container').highcharts('StockChart', {
chart: {
type: 'candlestick',
zoomType: 'x'
},
navigator: {
adaptToUpdatedData: false,
series: {
data: mydata
}
},
scrollbar: {
liveRedraw: false
},
xAxis: {
type: 'datetime',
title: 'Time',
//minRange: 3600 * 1000/15 // one hour
},
rangeSelector : {
selected : 1
},
title : {
text : value
},
series : [{
name : 'Capacité',
data : data,
tooltip: {
valueDecimals: 2
}
}] }); });
});
Thank you very much for your help
Could you add your function getTimestamp()? Maybe there is something wrong.
Keep in mind that:
x-value should be timestamp,
when using a lot of objects { x: x, y: y }, set turboThreshold