amcharts (v3.x) date formatting issue on graph - javascript

I am trying to plot chart using Amchart and Angular js.
My Data array object contains date in form of a string.
Problem is the amchart's dataDateFormat is not working as required.
For example -
in my data object
{
"date": "2012-07-27 11:33",
"value": 18
}
In amchart code
"dataDateFormat": "JJ:NN" or "dataDateFormat": "YYYY-MM-DD JJ:NN"
shows a single line as graph.
Below is the js code
angular.module("ctrl", ['ui.bootstrap']).controller("mindCtrl",
function($scope) {
$scope.makaDaCharto = function(index) {
$scope.chart = AmCharts.makeChart("chartdiv" + index, {
"type": "serial",
"theme": "light",
"marginRight": 40,
"marginLeft": 40,
"autoMarginOffset": 20,
"mouseWheelZoomEnabled": true,
"dataDateFormat": "JJ:NN",
"valueAxes": [{
"id": "v1",
"axisAlpha": 0,
"position": "left",
"ignoreAxisWidth": true
}],
"balloon": {
"borderThickness": 1,
"shadowAlpha": 0
},
"graphs": [{
"id": "g1",
"balloon": {
"drop": true,
"adjustBorderColor": false,
"color": "#ffffff"
},
"bullet": "round",
"bulletBorderAlpha": 1,
"bulletColor": "#FFFFFF",
"bulletSize": 5,
"hideBulletsCount": 50,
"lineThickness": 2,
"title": "red line",
"useLineColorForBulletBorder": true,
"valueField": "value",
"balloonText": "<span style='font-size:18px;'>[[value]]</span>"
}],
"chartScrollbar": {
"graph": "g1",
"oppositeAxis": false,
"offset": 30,
"scrollbarHeight": 80,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"pan": true,
"valueLineEnabled": true,
"valueLineBalloonEnabled": true,
"cursorAlpha": 1,
"cursorColor": "#258cbb",
"limitToGraph": "g1",
"valueLineAlpha": 0.2,
"valueZoomable": true
},
"valueScrollbar": {
"oppositeAxis": false,
"offset": 50,
"scrollbarHeight": 10
},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"dashLength": 1,
"minorGridEnabled": true
},
"export": {
"enabled": true
},
"dataProvider": [{
"date": "2012-07-27 11:22",
"value": 13
}, {
"date": "2012-07-27 11:23",
"value": 11
}, {
"date": "2012-07-27 11:24",
"value": 15
}, {
"date": "2012-07-27 11:25",
"value": 16
}, {
"date": "2012-07-27 11:26",
"value": 18
}, {
"date": "2012-07-27 11:27",
"value": 13
}, {
"date": "2012-07-27 11:28",
"value": 22
}, {
"date": "2012-07-27 11:29",
"value": 23
}, {
"date": "2012-07-27 11:30",
"value": 20
}, {
"date": "2012-07-27 11:31",
"value": 17
}, {
"date": "2012-07-27 11:32",
"value": 16
}, {
"date": "2012-07-27 11:33",
"value": 18
}, {
"date": "2012-07-27 11:34",
"value": 21
}, {
"date": "2012-07-27 11:35",
"value": 26
}, {
"date": "2012-07-27 11:36",
"value": 24
}, {
"date": "2012-07-27 11:37",
"value": 29
}, {
"date": "2012-07-27 11:38",
"value": 32
}, {
"date": "2012-07-27 11:39",
"value": 18
}, {
"date": "2012-07-27 11:40",
"value": 24
}, {
"date": "2012-07-27 11:41",
"value": 22
}, {
"date": "2012-07-27 11:42",
"value": 18
}, {
"date": "2012-07-27 11:43",
"value": 19
}, {
"date": "2012-07-27 11:44",
"value": 14
}, {
"date": "2012-07-27 11:45",
"value": 15
}, {
"date": "2012-07-27 11:46",
"value": 12
}, {
"date": "2012-07-27 11:47",
"value": 8
}, {
"date": "2012-07-27 11:48",
"value": 9
}, {
"date": "2012-07-27 11:49",
"value": 8
}, {
"date": "2012-07-27 11:50",
"value": 7
}, {
"date": "2012-07-27 11:51",
"value": 5
}, {
"date": "2012-07-27 11:52",
"value": 11
}, {
"date": "2012-07-27 11:53",
"value": 13
}, {
"date": "2012-07-27 11:54",
"value": 18
}]
});
$scope.chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
$scope.chart.zoomToIndexes($scope.chart.dataProvider.length - 40,
$scope.chart.dataProvider.length - 1);
}
};
});
Amchart Curve by editing fiddle
Existing Example fiddle at http://jsfiddle.net/v917yya3/68/
Fiddle I Created to depict the issue http://jsfiddle.net/phex4qg5/
PS - I already tried
amCharts with AngularJS
JSON with parsed time or timestamp to amCharts
Almost all formats explained here http://www.amcharts.com/kbase/formatting-dates/

AmCharts assumes your data is in daily intervals by default. Since your data is in minute intervals, you need to adjust the category axis' minPeriod to accommodate this. In your case, set minPeriod: "mm", along with setting dataDateFormat: "YYYY-MM-DD JJ:NN" will fix your chart.
Updated fiddle: http://jsfiddle.net/phex4qg5/10/

Related

Vega-lite circle chart does not render but same specs in vega editor renders circle chart

I am trying to render a line chart using vega-lite in my react app. It gets rendered as follows:
As per the specs it should get rendered as follows (notice the circular data points in green line chart):
I copy pasted the spec in vega editor and it rendered correctly as above. You can try it in this vega editor
Here is the full spec:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{
"date": "Apr 05 22",
"total": 15,
"threadsCount": 6,
"commentsCount": 9
},
{
"date": "Jan 20 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 02 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 20 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Mar 03 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 13 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 31 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 19 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 25 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Feb 06 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 24 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 21 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 14 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 04 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Apr 01 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 20 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Mar 16 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 21 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 15 22",
"total": 1,
"threadsCount": 0,
"commentsCount": 1
},
{
"date": "Mar 15 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 19 22",
"total": 5,
"threadsCount": 2,
"commentsCount": 3
},
{
"date": "Jan 29 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Jan 22 22",
"total": 3,
"threadsCount": 1,
"commentsCount": 2
},
{
"date": "Jan 27 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Apr 07 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 03 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Feb 14 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 09 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 07 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Feb 12 22",
"total": 1,
"threadsCount": 1,
"commentsCount": 0
},
{
"date": "Mar 26 22",
"total": 2,
"threadsCount": 0,
"commentsCount": 2
},
{
"date": "Apr 02 22",
"total": 2,
"threadsCount": 2,
"commentsCount": 0
},
{
"date": "Feb 15 22",
"total": 6,
"threadsCount": 1,
"commentsCount": 5
},
{
"date": "Apr 08 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Apr 12 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Jan 31 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
},
{
"date": "Mar 23 22",
"total": 2,
"threadsCount": 1,
"commentsCount": 1
}
]
},
"width": "container",
"vconcat": [
{
"layer": [
{
"width": 680,
"height": 250,
"mark": {
"type": "line",
"color": "green"
},
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative",
"title": "Number of comments & threads created"
}
}
},
{
"width": 680,
"height": 250,
"mark": {
"type": "circle",
"color": "green",
"opacity": "55%"
},
"params": [
{
"name": "highlight",
"select": {
"type": "point",
"on": "mouseover"
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"scale": {
"domain": {
"param": "brush"
}
},
"axis": {
"title": ""
}
},
"y": {
"field": "total",
"type": "quantitative"
},
"tooltip": [
{
"field": "date",
"type": "temporal",
"title": "Date"
},
{
"field": "threadsCount",
"type": "quantitative",
"title": "Threads Created"
},
{
"field": "commentsCount",
"type": "quantitative",
"title": "Comments Created"
}
],
"size": {
"condition": {
"param": "highlight",
"empty": false,
"value": 170
},
"value": 50
}
}
}
]
},
{
"layer": [
{
"width": 680,
"height": 60,
"mark": {
"type": "line",
"strokeWidth": "2px"
},
"params": [
{
"name": "brush",
"select": {
"type": "interval",
"encodings": [
"x"
]
}
}
],
"encoding": {
"x": {
"field": "date",
"type": "temporal",
"title": "(Select duration in lower chart to zoom in. Double click to reset zoom.)"
},
"y": {
"field": "total",
"type": "quantitative",
"axis": {
"tickCount": 3,
"grid": false
},
"title": ""
}
}
}
]
}
]
}
What might be wrong?

Timestamp in Amchart category axis showing as Undefined

I'm trying to show timestamp on the amchart category axis, but its showing as undefined in the chart. Here is the chart code:
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"date": 1492664639000,
"value": 10
}, {
"date": 1492664646000,
"value": 20
}, {
"date": 1492664653000,
"value": 20
}, {
"date": 1492664660000,
"value": 23
}, {
"date": 1492664667000,
"value": 35
}, {
"date": 1492664674000,
"value": 26
}, {
"date": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});
Here is a DEMO.
You use wrong key for reference. Try this. (Demo here: https://codepen.io/anon/pen/ZKQPJL)
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "light",
"marginTop":0,
"marginRight": 80,
"dataProvider": [{
"timestamp": 1492664639000,
"value": 10
}, {
"timestamp": 1492664646000,
"value": 20
}, {
"timestamp": 1492664653000,
"value": 20
}, {
"timestamp": 1492664660000,
"value": 23
}, {
"timestamp": 1492664667000,
"value": 35
}, {
"timestamp": 1492664674000,
"value": 26
}, {
"timestamp": 1492664681000,
"value": 30
}],
"valueAxes": [{
"axisAlpha": 0,
"position": "left"
}],
"graphs": [{
"id":"g1",
"balloonText": "[[timestamp]]<br><b><span style='font-size:14px;'>[[value]]</span></b>",
"bullet": "round",
"bulletSize": 8,
"lineColor": "#d1655d",
"lineThickness": 2,
"negativeLineColor": "#637bb6",
"type": "smoothedLine",
"valueField": "value"
}],
"chartScrollbar": {
"graph":"g1",
"gridAlpha":0,
"color":"#888888",
"scrollbarHeight":55,
"backgroundAlpha":0,
"selectedBackgroundAlpha":0.1,
"selectedBackgroundColor":"#888888",
"graphFillAlpha":0,
"autoGridCount":true,
"selectedGraphFillAlpha":0,
"graphLineAlpha":0.2,
"graphLineColor":"#c2c2c2",
"selectedGraphLineColor":"#888888",
"selectedGraphLineAlpha":1
},
"chartCursor": {
"categoryBalloonDateFormat": "fff",
"cursorAlpha": 0,
"valueLineEnabled":true,
"valueLineBalloonEnabled":true,
"valueLineAlpha":0.5,
"fullWidth":true
},
"dataDateFormat": "YYYY-MM-DD HH:NN:SS",
"categoryField": "timestamp",
"categoryAxis": {
"minPeriod": "fff"
}
});

amserialchart graphs d​uplication calculation

I'm use amChartSerialChart.
"categoryField": "ymd",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "WW",
"dataProvider": [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}
If there are multiple data of the same date, I would like to obtain the total result.
i hope result value is 10.
What kind of solution is there?
Reduce
Map
dataProvider= [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
var result=dataProvider.map(function(arr){return arr.value;
}).reduce((a, b) => a + b, 0);;
console.log(result);
The chart doesn't automatically sum up values of the same date, nor does it support duplicate dates. You need to pre-process your data before assigning it to the chart's dataProvider.
var rawData = [{
"date": "2016-11-14",
"value": 1
}, {
"date": "2016-11-14",
"value": 2
}, {
"date": "2016-11-15",
"value": 3
}, {
"date": "2012-11-15",
"value": 4
}]
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var rawData = [{
"date": "2016-11-15",
"value": 4
}, {
"date": "2016-11-15",
"value": 1
}, {
"date": "2016-11-16",
"value": 3
}, {
"date": "2016-11-16",
"value": 4
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-17",
"value": 3
}, {
"date": "2016-11-18",
"value": 5
}, {
"date": "2016-11-18",
"value": 1
}, {
"date": "2016-11-19",
"value": 4
}, {
"date": "2016-11-19",
"value": 1
}, {
"date": "2016-11-20",
"value": 4
}, {
"date": "2016-11-20",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-21",
"value": 3
}, {
"date": "2016-11-22",
"value": 5
}, {
"date": "2016-11-22",
"value": 3
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-23",
"value": 4
}, {
"date": "2016-11-24",
"value": 4
}, {
"date": "2016-11-24",
"value": 2
}, {
"date": "2016-11-25",
"value": 5
}, {
"date": "2016-11-25",
"value": 4
}, {
"date": "2016-11-26",
"value": 5
}, {
"date": "2016-11-26",
"value": 1
}, {
"date": "2016-11-27",
"value": 5
}, {
"date": "2016-11-27",
"value": 3
}, {
"date": "2016-11-28",
"value": 5
}, {
"date": "2016-11-28",
"value": 1
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-29",
"value": 3
}, {
"date": "2016-11-30",
"value": 4
}, {
"date": "2016-11-30",
"value": 3
}, {
"date": "2016-12-01",
"value": 4
}, {
"date": "2016-12-01",
"value": 2
}, {
"date": "2016-12-02",
"value": 4
}, {
"date": "2016-12-02",
"value": 1
}, {
"date": "2016-12-03",
"value": 4
}, {
"date": "2016-12-03",
"value": 3
}, {
"date": "2016-12-04",
"value": 3
}, {
"date": "2016-12-04",
"value": 1
}, {
"date": "2016-12-05",
"value": 5
}, {
"date": "2016-12-05",
"value": 2
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-06",
"value": 3
}, {
"date": "2016-12-07",
"value": 5
}, {
"date": "2016-12-07",
"value": 1
}, {
"date": "2016-12-08",
"value": 4
}, {
"date": "2016-12-08",
"value": 1
}, {
"date": "2016-12-09",
"value": 3
}, {
"date": "2016-12-09",
"value": 4
}, {
"date": "2016-12-10",
"value": 5
}, {
"date": "2016-12-10",
"value": 2
}, {
"date": "2016-12-11",
"value": 5
}, {
"date": "2016-12-11",
"value": 1
}, {
"date": "2016-12-12",
"value": 3
}, {
"date": "2016-12-12",
"value": 2
}];
//aggregate and sum all elements with the same date key
var aggregatedTotals = rawData.reduce(function(accumulator, data) {
if (accumulator.hasOwnProperty(data.date)) {
accumulator[data.date] += data.value;
} else {
accumulator[data.date] = data.value;
}
return accumulator;
}, {});
//create a brand new array containing the summed up values
var chartData = Object.keys(aggregatedTotals).map(function(date) {
return {
"date": date,
"value": aggregatedTotals[date]
};
});
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"dataProvider": chartData,
"graphs": [{
"bullet": "round",
"valueField": "value"
}],
"dataDateFormat": "YYYY-MM-DD",
"categoryField": "date",
"categoryAxis": {
"dateFormats": [{
"period": "DD",
"format": "DD"
}, {
"period": "WW",
"format": "MMM DD"
}, {
"period": "MM",
"format": "MMM"
}, {
"period": "YYYY",
"format": "YYYY"
}],
"parseDates": true,
"minPeriod": "7DD",
}
});
#chartdiv {
width: 100%;
height: 300px;
}
<script type="text/javascript" src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="//www.amcharts.com/lib/3/serial.js"></script>
<div id="chartdiv"></div>
Note that WW is an invalid minPeriod. If you want to group your data in weeks, use 7DD instead. API documentation for minPeriod

Stacking data by hours AmCharts

Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});

Is this JSON structure suitable for a stacked bar chart using d3.js?

I need to create a stacked bar chart plus line graph. I'm thinking d3.js is the tool for the job, but I'm having problems binding my data. Is the following JSON formatted in a way that will work for the stack method?
{
"response": {
"qtime": 11,
"params": {
"id": "jb8wp1rw41v",
"format": "json"
}
},
"series": {
"twitter": [{
"date": "2013-08-20",
"value": 3
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 4
}, {
"date": "2013-08-23",
"value": 1
}, {
"date": "2013-08-24",
"value": 5
}, {
"date": "2013-08-25",
"value": 9
}, {
"date": "2013-08-26",
"value": 2
}, {
"date": "2013-08-27",
"value": 6
}, {
"date": "2013-08-28",
"value": 5
}, {
"date": "2013-08-29",
"value": 3
}, {
"date": "2013-08-30",
"value": 5
}, {
"date": "2013-08-31",
"value": 8
}, {
"date": "2013-09-01",
"value": 9
}, {
"date": "2013-09-02",
"value": 7
}],
"facebook": [{
"date": "2013-08-20",
"value": 0
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 3
}, {
"date": "2013-08-23",
"value": 6
}, {
"date": "2013-08-24",
"value": 10
}, {
"date": "2013-08-25",
"value": 21
}, {
"date": "2013-08-26",
"value": 28
}, {
"date": "2013-08-27",
"value": 21
}, {
"date": "2013-08-28",
"value": 10
}, {
"date": "2013-08-29",
"value": 6
}, {
"date": "2013-08-30",
"value": 0
}, {
"date": "2013-08-31",
"value": 15
}, {
"date": "2013-09-01",
"value": 21
}, {
"date": "2013-09-02",
"value": 1
}],
"email": [{
"date": "2013-08-20",
"value": 0
}, {
"date": "2013-08-21",
"value": 1
}, {
"date": "2013-08-22",
"value": 1
}, {
"date": "2013-08-23",
"value": 2
}, {
"date": "2013-08-24",
"value": 3
}, {
"date": "2013-08-25",
"value": 5
}, {
"date": "2013-08-26",
"value": 8
}, {
"date": "2013-08-27",
"value": 13
}, {
"date": "2013-08-28",
"value": 5
}, {
"date": "2013-08-29",
"value": 8
}, {
"date": "2013-08-30",
"value": 1
}, {
"date": "2013-08-31",
"value": 1
}, {
"date": "2013-09-01",
"value": 2
}, {
"date": "2013-09-02",
"value": 13
}],
"amazon_rank": [{
"date": "2013-08-20",
"value": 1001
}, {
"date": "2013-08-21",
"value": 2312
}, {
"date": "2013-08-22",
"value": 2300
}, {
"date": "2013-08-23",
"value": 5179
}, {
"date": "2013-08-24",
"value": 5112
}, {
"date": "2013-08-25",
"value": 2305
}, {
"date": "2013-08-26",
"value": 1902
}, {
"date": "2013-08-27",
"value": 1221
}, {
"date": "2013-08-28",
"value": 1010
}, {
"date": "2013-08-29",
"value": 2588
}, {
"date": "2013-08-30",
"value": 4093
}, {
"date": "2013-08-31",
"value": 4432
}, {
"date": "2013-09-01",
"value": 5002
}, {
"date": "2013-09-02",
"value": 3902
}],
"pinterest": [{
"date": "2013-08-20",
"value": 17
}, {
"date": "2013-08-21",
"value": 23
}, {
"date": "2013-08-22",
"value": 11
}, {
"date": "2013-08-23",
"value": 13
}, {
"date": "2013-08-24",
"value": 19
}, {
"date": "2013-08-25",
"value": 5
}, {
"date": "2013-08-26",
"value": 17
}, {
"date": "2013-08-27",
"value": 11
}, {
"date": "2013-08-28",
"value": 2
}, {
"date": "2013-08-29",
"value": 3
}, {
"date": "2013-08-30",
"value": 5
}, {
"date": "2013-08-31",
"value": 7
}, {
"date": "2013-09-01",
"value": 19
}, {
"date": "2013-09-02",
"value": 0
}]
}
}
You'll need to wrangle the data a little bit to get in a format that d3 likes, but there are built in functions to do all the work for you:
var companies = d3.layout.stack()(d3.values(json.series))
will give you a data structure similar to causes in the stacked bar chart example.
Basically, d3.values is taking your object with several arrays and turning in into an array of arrays. d3.layout.stack takes that two dimensional array, re structures it a a little bit and adds convenience functions that make it much simpler create a stacked bar chart.
I would recommend you to not use JSON at all since it is not streamable. Indeed, charts are often representing a big amount of datas and it is recommended to load their content progressively with the help of the XHR progress event.
Since most of the charts are tabular datas, i assume CSV is the better format for that purpose. If you still want be able to manage trees like with JSON, take a look at VarStream https://github.com/nfroidure/VarStream.
Here is an example of loading charts with a streamable format versus with JSON : http://server.elitwork.com/experiments/chartstream/index.html
The badest is your connection, the more you see how usefull is XHR Streaming.

Categories

Resources