Target specific google chart data set - javascript

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.

Related

Dynamic colours in chartJS based on entries in the array

I have an issue trying to color my bar chart dynamically based on a JSON response.
I know this has been asked a number of times before but none of the answers I've found or tried to work thorugh have got me any closer to a solution.
I've created a quick JSfiddle to show the issue.
I have a number of other charts which are all generated from different JSON strings so have cut this down a lot to try and isolate the issue. I don't have the same problem with the other charts as the number of entries in the Label array in consistent with the number of colours. The offending piece of code is this;
DT_Labels.forEach(function(DT_LABELS, x) {
data.datasets.push({
label: DT_LABELS,
backgroundColor: backgroundColor[x],
data: JSON.parse(DT_Values[x]).map(Number)
});
});
DT_Labels only contains a single entry as the chart is a summarised list - In theory, this would work if I counted the number of DT_Values but if I do that, I can't get the correct data in the chart.
Any ideas how I can reformat this to generate the colours counter based on the number of Values instead of Labels?
Change:
backgroundColor: backgroundColor[x],
to:
backgroundColor: backgroundColor,
Result:
Why does this work?
The backgroundColor property can be specified in a number of ways. Typically it's set to a string, e.g. #abcdef but it can also be set to an array. In this case Chart.js itself will pick the colour from the array based on the index of the data point it is drawing.

How to modify the 'nodes' behaviour in Zingchart

I plot some series of data with Zingchart. The data is one entry per second, per set. The result is the following graph:
.
I am happy with this result. I get an overview of the plot that is very fast using "exact":false as plot attribute. Afterwards, I want to be able to 'zoom in' to see the detail:
And now I have too much detail. The attributes I have for plot are:
"maxNodes":2000,
"maxTrackers":2000,
I have been trying to play with those numbers but at the end, if I reduce the number I just have to zoom-in more. As I understand I get one node/tracker/information popup per data entry in the current status of the visualization only if there are less nodes than the limit defined.
Would it be possible to indicate Zingchart to place the nodes not in every data point, but with some kind of interval or intention?.
For example, in the second graph I would like to have nodes at the beginning / end and on the jump that the line makes. Or local maximums / minimums.
There are a few options.
1) You could change the "max-nodes" to a lower number. "max-nodes" just determines how many nodes are drawn while "max-trackers" determines how many you can interact with.
2) You could also add the following to your plot object...
marker: {
rules: [
{
rule: '%i%5 > 0',
visible: false
}
]
}
What that does it it checks the index (%i) of each marker. If the index of the marker modulo 5 is greater than 0, we don't display the marker (node). That means that all nodes except those evenly divisible by 5 will be hidden.
I'm on the ZingChart team. Let me know if this helps. Holla if you've got more questions.

Remove spaces between axes and columns in Highcharts with only one category

I've a chart generated from a JSON with a lot of data but in only one "x axe" serie. I'm not very clear but an example is better:
My chart
I would like to remove the blank between the columns and the right, in order to zoom in.
I read this post but the solution with
xAxis: {
min: 0,
}
doesn't work on my case (or maybe I'm doing it wrong..) because I have only one item on the X axe, the category "Students"
Here is my fiddle (names are random)
Sebastian's comment should answer the actual question, but I have to question using this set up in the first place.
The category itself serves no purpose if there's only one - the x axis title can fill that role, and eliminate any need for adjusting settings to behave normally.
A separate series for each student is definitely overkill, and results in 5 pages worth of legend entries, which can never hope to be associated with the actual student's column, as there are too many repeats of each color (and you're simply not going to come up with 73 distinctly identifiable colors, nor would it be useful to try...)
I would suggest a few things:
1) use a single series for all of the students. You gain nothing by using 73 different series
2) use each student's name as the category
3) forget about multiple colors - they add nothing useful, and there aren't enough of them even if they did
4) make it a horizontal bar chart instead of a column chart.
The result is a much more user-friendly display.
Example:
http://jsfiddle.net/jlbriggs/nx7z1387/
Also, if the goal is to show the values in a meaningful way, I would strongly consider sorting by value instead of by name. I realize there may be some argument for sorting it alphabetically, but it really shows the data in a much more understandable way when sorted by value.
Example:
http://jsfiddle.net/jlbriggs/nx7z1387/5/
FWIW

Adjusting Shield UI JavaScript chart when NULL values are present

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.

Strange tooltip behavior with long series in highcharts

I'm using Highcharts for a project in which I have to display two series with about a thousand points each. The x-axis represents a date, and the y-axis a quantity. In addition, each point has an associated list of namesMy data is day-by-day without gaps, with a structure such as
var mydata = [ ...
{x: theDate, y: theValue, names: theNames},
... ]
where theNames is an array of strings. I can access these in the tooltip formatter through this.points.point.names, given that the range displayed on the chart is small enough. If I change the x-axes so that the start date and end date are more than roughly a year apart, then the tooltip is not rendered at all.
One of the possible avenues that I have tried but failed with so far is setting the turboThreshold limit to the length of the longest series plus 1. Setting this lets me at least display a graph when mydata.length > 1000 (the default value). However, this only displays the tooltip if the x-axis range is less than 261. Otherwise, the tooltip disappears entirely, as does the point.data object where I'm getting the name from.
I'm also not great at JavaScript, but I was wondering if there were a way to separate the names of the points from the array containing them (in my examples, myData1 and myData2) and somehow access those names from the tooltip function without going through the current point.
Here is the link to the jsFiddle demonstrating this issue.
All help is appreciated!
The problem is in dataGrouping, when disabled works fine: http://jsfiddle.net/34tfg/1/
DataGrouping is method in Highcharts to approximate points and display them when width of the chart is not enough, e.g. how to display 10 000points in a chart of width 1 000px -> 10 points in a one pixel..? And when dataGrouping is used, new points are created, so all your custom options like 'names' etc. are lost (at least not accessible).
Code:
plotOptions: {
line: {
dataGrouping: {
enabled: false
},
turboThreshold: 10000
}
},

Categories