I've got a google line chart which shows the correct line; but the annotation of the Date is off by one month exactly. The json data has the correct date; but somehow google charts transforms it:
Anybody an idea why this happens?
no mistake, the correct month is being displayed
when using the following date constructor, the months are zero based...
Date(year, month, day, hour, min, sec, mill)
see following snippet...
console.log(new Date(2016, 0, 1)); // <-- Jan
console.log(new Date(2016, 1, 1)); // <-- Feb
console.log(new Date(2016, 11, 1)); // <-- Dec
following is another snippet to demonstrate using json with google charts...
google.charts.load('current', {
callback: function () {
var data = new google.visualization.DataTable({
"cols": [
{"label": "Date", "type": "date"}
],
"rows": [
{"c": [{"v": "Date(2016,0,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,1,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,2,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,3,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,4,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,5,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,6,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,7,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,8,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,9,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,10,28,15,0,0)"}]},
{"c": [{"v": "Date(2016,11,28,15,0,0)"}]},
]
});
var chart = new google.visualization.Table(document.getElementById('chart_div'));
chart.draw(data);
},
packages:['table']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
following is a php snippet to create the json date using the above constructor
<?php
$date1 = new DateTime();
$date2 = "Date(".date_format($date1, 'Y').", ".((int) date_format($date1, 'm') - 1).", ".date_format($date1, 'd').", ".date_format($date1, 'H').", ".date_format($date1, 'i').", ".date_format($date1, 's').")";
echo $date2;
?>
here is a php fiddle to test the above snippet...
Related
I'm trying generate gantt chart from json string and I have weird problem with parsing Json string to Json object.
i have variable myString with json string looking like that:
{"c": [{"v": "496"}, {"v": "Task name 1"}, {"v": "9, "}, {"v": "Date(2018,6, 19)"}, {"v": "Date(2018, 6, 21)"}, {"v": null}, {"v": 100}, {"v": null}]}
after using var jsonData = JSON.parse(myString); values:"Date(2018,6, 19)"and"Date(2018, 6, 21)" are changed to: "Date(2018,7, 19)" and "Date(2018, 7, 21)"
And i don't know what's wrong with my code.
My full code:
$.ajax({
type: "GET",
url: URL,
data: data,
contentType: "application/json; charset=utf-8",
success: function (response) {
console.log(response['chart_data']);
var jsonData = JSON.parse(response['chart_data']);
console.log(jsonData);
var chart_height=jsonData["rows"].length;
google.charts.load('current', {'packages': ['gantt']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(jsonData);
var options = {
width: document.getElementById("task_list").offsetWidth,
height:30*chart_height,
gantt: {
trackHeight: 30
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
}
});
SOLUTION:
Thanks to user1531038 new Date() function was executed while parsing, and Date function counts months from 0 to 11.
It is working fine as expected as both Date(2018,6, 19) & Date(2018, 6, 21) are string :
I've been trying to get tick vals to work on 3D diagram, is it possible?
I tried to set tickmode to array, but I guess it is set automatically if tickvals is provided. See the plnkr below.
tickmode: 'array',
tickvals: [...]
https://plnkr.co/edit/IDlCmBvzFXucvPpuiAX7?p=preview
You would need to wrap your xaxis and yaxis with ticktext and tickvals in a scene.
tickvals are actually the values which are used for the ticks while ticktext is the shown label. Your updated code is here:
https://plnkr.co/edit/YnfTS9uoFBiCRTPi36Kt?p=preview
z1 = [
[8.83, 8.89, 8.81, 8.87, 8.9, 8.87],
[8.89, 8.94, 8.85, 8.94, 8.96, 8.92],
[8.84, 8.9, 8.82, 8.92, 8.93, 8.91],
[8.79, 8.85, 8.79, 8.9, 8.94, 8.92],
[8.79, 8.88, 8.81, 8.9, 8.95, 8.92],
[8.8, 8.82, 8.78, 8.91, 8.94, 8.92],
[8.75, 8.78, 8.77, 8.91, 8.95, 8.92],
[8.8, 8.8, 8.77, 8.91, 8.95, 8.94],
[8.74, 8.81, 8.76, 8.93, 8.98, 8.99],
[8.89, 8.99, 8.92, 9.1, 9.13, 9.11],
[8.97, 8.97, 8.91, 9.09, 9.11, 9.11],
[9.04, 9.08, 9.05, 9.25, 9.28, 9.27],
[9, 9.01, 9, 9.2, 9.23, 9.2],
[8.99, 8.99, 8.98, 9.18, 9.2, 9.19],
[8.93, 8.97, 8.97, 9.18, 9.2, 9.18]
];
var data_z1 = {
z: z1,
type: 'surface'
};
var layout = {
scene: {
xaxis: {
tickvals: [0, 2, 3, 4],
ticktext: ['Zero', 'Two or lower', 'Three', 'Four and higher']
}
}
};
Plotly.newPlot('myDiv', [data_z1], layout);
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>
I am unable to change the Pie Chart colors. Currently it is only the default colors.
How do I define the colors? Below is my current chartObject. It works just fine when I change to BarChart or ColumnChart ie bar colors change. Just not for the PieChart. What I am doing wrong?
chartObject = {"type":"PieChart",
"data":{"cols":[{"id":"label","label":"Action Status","type":"string"},
{"id":"label","label":"Number of Actions","type":"number"},
{"role":"style","type":"string","p":{"role":"style"}}],
"rows":[{"c":[{"v":"Open"},{"v":2},{"v":"ORANGE"}]},
{"c":[{"v":"Close"},{"v":1},{"v":"GREEN"}]}]},
"options":{"title":"Legal Register Tracking"}}
Add slices in options data object and give color json object 'slices': [{color:'yellow'},{color:'red'}] for each slices
var app = angular.module('myApp', ['googlechart']);
app.controller('MyController', function ($scope)
{
$scope.chartObject = {};
$scope.chartObject.type = "PieChart";
$scope.chartObject.data = {"cols":
[
{id: "t", label: "Topping", type: "string"},
{id: "s", label: "Slices", type: "number"}
],
"rows":
[
{c:
[
{v: "Mushrooms"},
{v: 3},
{color: 'black'}
]
},
{c:
[
{v: "Pepperoni"},
{v: 2},
]
}
]};
$scope.chartObject.options = {
'title': 'How Much Pizza I Ate Last Night',
'slices': [{color:'yellow'},{color:'red'}]
};
});
I have a chart template for a multi bar chart in NVD3 here: http://jsfiddle.net/hohenheim/6R7mu/5/
I have the following JSON data I want to display:
[{"date": 1396828800, "impressions": 49145385},
{"date": 1396915200, "impressions": 46704447},
{"date": 1397001600, "impressions": 47181000},
{"date": 1397088000, "impressions": 47337965},
{"date": 1397174400, "impressions": 51129266},
{"date": 1397260800, "impressions": 60547397},
{"date": 1397347200, "impressions": 62217077},
{"date": 1397433600, "impressions": 49145385},
{"date": 1397520000, "impressions": 46704447},
{"date": 1397606400, "impressions": 47181000},
{"date": 1397692800, "impressions": 47337965},
{"date": 1397779200, "impressions": 51129266},
{"date": 1397865600, "impressions": 60547397},
{"date": 1397952000, "impressions": 62217077}]
I'm looking to use JSON data I have (shown above and also commented out in the fiddle) but don't have any idea how to get it in the format that this NVD3 chart will accept. The chart is currently using sample data that is meaningless to me.
Is there a way to convert my data into something NVD3 will accept? Any help appreciated.
data5 seems to have this format:
[
{key: x, values: VALUES, vAxis: 1},
{key: x, values: VALUES, vAxis: 1} // and maybe more for more colors
]
and VALUES seems to have this format:
[
{x: 0, y: N},
{x: 1, y: N},
{x: 2, y: N} // and more for more on the X axis
]
So you have to rewrite your data to that format. Only it seems you don't have more sources. You have only 1 color. What makes {"date": 1396828800, "impressions": 49145385} one or the other? Is date the X axis?
Assuming the order of your data is correct, and it's only 1 source:
data5 = [{key: 'X', values: [], vAxis: 1}]
yourData.forEach(function(el, i) {
data5[0].values.push({x: i, y: el.impressions});
// ^ only 1 source/color
// ^ incremental X, starting at 0
});
You might have to adjust the x and y range somehow. (Maybe vAxis is one?)
I just stumbled upon their github page, and seems the above answer is correct.
https://github.com/novus/nvd3/wiki/Sample-chart-(your-first-nvd3-chart!)
The data format for charts is supposed to be:
[
{
key: "<Series name>",
color: "<CSS color>",
values: [
{x: 0, y: 10},
{x: 1, y: 20},
{x: 2, y: 30}
....
]
},
{
key: "<Series name>"
...
}
]
This is silly but I can't figure it out.
I have a simple object in JS:
var objSyntax = [ {"a": "1"},
{"b": "2" },
{"c": "3"} ];
I want to call 1 when theid is equal a, etc.
Here is the notation I tried which did not work:
objSyntax[theid];
What am I doing wrong?
you could change your object to reflect something like:
var objSyntax = {"a": "1",
"b": "2" ,
"c": "3"};
objSyntax[theId];
or iterate through the array of objects you have posted:
var objSyntax = [ {"a": "1"},
{"b": "2" },
{"c": "3"} ];
With how you have it set up right now, you would access it like this
objSyntax[0][theId]