Develop Reference

How to update a echart with a js function and 2D array

Good morning.
I need to do the following: Update a stacked line chart using a function in javascript that takes a 2d array ([[0,1],[0,2],...]).
My page is running in a Java fx webview so I can dynamically update my data. All the examples I've seen so far create a predefined X axis and pass the y values ​​accordingly, I wanted to pass the two values ​​together to plot a line on the chart.
How could I make this function? It's the first time I use echarts so I'm lost.
I even managed to do something similar but when plotting the chart it was all wrong.
Char Image
var option = {
xAxis: {
type: "value",
},
yAxis: {
type: "value",
},
series: [
{
type: "line",
data: [],
},
],
};
vibrationStackedLineChart.setOption(option);
function updateEchart(dataArray) {
// Parse the JSON string back into a 2D int array
var data = JSON.parse("[" + dataArray + "]");
// Update the chart with the new data
vibrationStackedLineChart.setOption({
series: [
{
data: data,
},
],
});
}
Java function with array 2d

Two line chart from JSON on c3.js

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'],
}
}

Creating a bar chart with high and low value using c3.js

I have been looking into c3.js for a few days now. Its been able to produce graphs for most of my needs.The only thing I cant figure out to do with it is , how to display a bar chart when you have high and low values specified.
ex: my sample array will be something like this
Categories : ['cat1', 'cat2' ,'cat3' ,'cat4']
Low : [0,0,50,40]
High : [90,80,40,60]
Basically each bar for each category will be based on these high and low values.
Thanks !

You can try this sample:
var chart = c3.generate({
data: {
columns: [
['Low', 0,0,50,40],
['High', 90,80,40,60]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4']
}
}
});
Result:
To know how to install c3.js, please read an official documentation

n3-line-chart: Inconsistent values for dates on x axis

I'm creating a line chart using n3 line chart in my angular app.
My data is array of dates and counts.
This is the result I get:
As you can see, the X axis values are inconsistent.
It has a tick every 12 hours, but each tick has different format. I'm trying to keep the format the same for every tick, i.e:
This is how I include the chart in my html:
<linechart class="linechart" data="data" options="options"></linechart>
This is my axes options:
$scope.options = {
axes: {
x: {
key: "from",
type: "date",
innerTicks: false,
grid: false,
ticksInterval: d3.time.days
},
y: {
ticks: 6,
ticksFormatter: $scope. formatNumber
}
}
I've tried to use diffent values for ticks and ticksInterval but with no success.
Any way to achieve this?
Thank you.

I had the same problem today.
I solved it using thickFormat and the d3.time.format() function.
axes : {
x : {
key : "date",
type : 'date',
tickFormat : d3.time.format("%x %X")
}
}

Highcharts not plotting Date string as Category

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