Could any one please let me know, how to display monthly, weekly, daily data from JSON.
Example:
How to obtain last 4 weeks of data from JSON (Monthly) ?
How to obtain last 12 months of data from JSON (Yearly) ?
How to obtain last 7 days of data from JSON (weekly) ?
JSON Example:
{"date" : "2016-06-16"}
...
...
{"date" : "2016-05-16"}
{"date" : "2016-04-16"}
I moved your code to plnkr (I'm not a fan of jsfiddle; plnkr lets you create files as you want.
First, I noted you use d3 v3; I would recommend upgrading to v4 to enjoy the latest functionalities and improvements (but this is out-of-topic).
Second, I added a couple of lines (102 to 107) to create a nesting of data by month (as an example):
var byMonth = d3.nest()
.key(function(d){
return d.month;
})
.entries(data["BC"])
console.log(byMonth);
Now, the object byMonth has a key property, corresponding to the number of the month you already mapped, and a values property containing all values in said a month. You could now create/update a scale range using something like scale.range(byMonth.map(function(d){return d.key;}), use that scale for an axis, and plot your data accordingly. The same technique could be applied to the day or year property.
I have 2 timeseries that I would like to 'share' tooltip across. However, I have a problem where only the first point of each series is aligned and shares the tooltip. The rest of the points are slightly misaligned and therefore fail to show in the tooltip at the same time.
This fiddle will help demonstrate the problem. Fiddle
If you hover over the very first point, the tooltip appears with an entry for both series. But the very next datapoint only displays a single entry in the tooltip.
May I ask for your advice please? What have I missed for 'aligning' both series in order to share the tooltip? Clearly it's not enough to just add
tooltip: {
shared: true,
}
Thank you.
Assuming that the end goal is to compare two different dates based on the time of day, and assuming that the data points are at regular intervals, or are close enough and can be fudged (ie 1 point per hour, or every 10 minutes, etc), I would approach this differently:
1) use a single date. it can be today's date, or any other date, it doesn't matter, as the time of day is the important segment of the date string.
2) use the pointStart and pointInterval properties to set the proper timing (based on the artificial date, but the correct time interval)
3) Set the actual date of each data series as the series name, which will show in the legend and the shared tooltip to properly display the date of each data set.
4) use the formatting options on the x axis labels to show only the time portion of the label and not the date
In this way you remove the need for a 2nd x axis, remove any complications in tooltip formatting, remove the need to use more complex data structures like in your comment ( "{"y":0.87,"realDateTime":'25/12/2015 03:00'}" ), and only ever have to pass the appropriate date to the name property of each series.
//use the current date as the base - the date doesn't matter, just the time
var d = new Date();
var date = new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0,0,0);
var pointStart = date.getTime();
var pointInterval = 3600 * 1000 // 1 hour
.
series: [{
name : 'Apr 17, 2015',
data : [2,5,8,9,8,7,4,5,6,9,8,7,8,9,8,7,8,5,3,2,1,4,4,5]
},{
name : 'Jun 12, 2015',
data : [3,6,9,5,4,7,8,5,2,1,4,5,9,8,7,5,6,9,8,7,4,5,6,3]
}]
Example:
http://jsfiddle.net/jlbriggs/b3t7ueam/
[[and, of course, you can do this with as many different dates as desired (though this many obviously doesn't make sense):
http://jsfiddle.net/jlbriggs/v76u9w2L/
]]
I know that this is an old question, but an alternative approach which I've found to work is to reformat the data into a CSV format and add an import for the data module.
There's a demo on the Highcharts site which does pretty much what you're asking for (albeit nested inside an ajax request) over here. The two key parts from there are:
<script src="https://code.highcharts.com/modules/data.js"></script>
and
data: {
csv: csvData
}
The example reads in an actual csv file, but it'll accept any string which is formatted similarly. Also, if you set up headers in that csv string, you don't need to declare their names in your series options.
I have a data array which consists of timestamp - value pairs.
Basically there are two sets of data; 2014 and 2015 values.
For;
2014.12 : There are 4 values
2015.1 : There are 4 values.
2015.2 : There are 4 values.
2015.3 : There are 4 values.
I want to show them in order, 2014 values first , and so on.
However I end up showing values without time order starting from 1 to 12 on x axis.
Is there any way of setting the x axis in order based on my array data?
Fiddle;
http://jsfiddle.net/shamaleyte/6gL1wzsL/4/
Use the time plugin & mode to show date/time & values pairs.
xaxis: {
mode: 'time'
},
See this updated fiddle and the chapter in the documentation.
I am using Shield UI JavaScript chart to show some monthly data to my visitors. However the available data doesn’t always equal 12 months. On the other hand I have categorical values on my X axis;
January, February and so on.
I am using a line chart type and for months where there are no adjacent values I do get a point which makes my chart to look some messy.
I tried to adjust the
seriesSettings: {
line: {
drawNullValues: true
}
}
property, however the look remains. Any ideas?
Since you have categorical values – the names of the 12 months, it wouldn’t make much sense using the drawNullValues. This is because once there is a values (even null) for a point, it takes it’s place on the X axis.
Your chart will look much better, if you use the appropriate type- let’s say bar so that data is easy to see and months with and without data will be easy to distinguish.
Say if my google chart data array looks like below,
Is there a way to target specific data set for google charts and do something.
something like if data = "13 dec 11 Tue" then the point of 56 should use a different color from rest...
["13 Dec 11 Tue",56],
["14 Dec 11 Wed",168],
["15 Dec 11 Thu",181],
["16 Dec 11 Fri",163],
["17 Dec 11 Sat",172]
...
Yes, it is possible, but it requires coding in javascript and cannot be done innately within Google Visualization save within tables using a ColorFormatter. Assuming you want to do it in a chart, you need to write code to do it.
Option 1: Create an Array of Colors
You can use the series configuration option of most charts to set the color of how each series is displayed.
For instance, if I have 3 series, then I can set the following option to turn the second one red:
series: [{}, {color: 'red'}, {}]
This will set no options for series 1 and 3, but change the color of series 2 to red.
So you can loop through your data with Javascript, and create an array of colors to assign to the various series. For instance, if you want any value in column 1 higher than 10 to be red, you could do it as follows:
var colorArray = {};
for(i=0;i<data.getNumberOfRows;i++) {
if(data.getDataValue(i, 1)>10)
colorArray.push({color: 'red'});
else
colorArray.push({});
};
Then you set the options as:
options = {series = colorArray};
Note: The above code has not been checked, it probably has errors since I just typed it out. If it doesn't work, correct my code, but the logic is appropriate.
Option 2: Move the Series
By default, each different column of data will have a different color. You can create a similar loop that checks the value of each item, and moves it to another series. Just create a different for loop that goes through the values you want to check, and if it finds what you're looking for, move the value in to that new series.
This is more complex, but it will give you more flexibility depending on what you want to do (since you have an entirely different series, you can customize it with different line size, or markers, or bar width, or whatever).
Whatever you pick to do, the best thing is to play with it and find something you like and that's easiest for you to code with your data.