I am trying to implement a stacked bar graph and I would like to understand if there is anyway that we can specify the category along with the data point in series.
I have Categories as :
xAxis: {
categories: ['DEV', 'TEST', 'Stage']
},
Series data:
series: [{
name: 'Severity-1',
data: [['TEST',20]]
},{
name: 'Severity-2',
data: [['TEST',20]]
}]
In above snippet I am trying to add a point value '30' to 'TEST' category but when I load the graph it shows up under 'DEV' category.
Example: http://jsfiddle.net/G5S9L/1/
Any idea?
Did you try:
{"xAxis": { "type" : "category" .... } ... }
It should get category from your data.
You need to use category index instead of category name, so proper example will be:
series: [{
name: 'Severity-1',
data: [[1,20]] //0-DEV, 1-TEST, 2-Stage
},{
name: 'Severity-2',
data: [[1,20]]
}]
Hey Vipul Do you want something like this ? Please check the link below for the code.
series: [{
name: 'Severity-1',
data: [['TEST',20]]
},{
name: 'Severity-2',
data: [['TEST',20]]
}]
CHECK EXAMPLE
Related
I know you can pass arbitrary data into your time series points, such as:
new Highcharts.Chart( {
...,
series: [{
name: 'Foo',
data: [ { y : 10.0, customData : 'value 1' },
{ y : 20.0, customData : 'value 2' },
{ y : 30.0, customData : 'value 3' } ]
}]
} );
However, I noticed that this doesn't quite work in HighStock when your time series is comprised of a large data set (1000+ points).
For example, here is a working fiddle http://jsfiddle.net/gparajon/c5fej775/ (less than 1000 points, which also happens to be the default turboThreshold). And here's the same fiddle, with more data, which breaks the tooltip formatter: http://jsfiddle.net/gparajon/5om258az/
Any workaround?
Thanks!
The error in the console is a bug and it is not really connect why you cannot access extra info in the formatter.
The difference between a chart and a stockchart is that a stockchart does data grouping, what means that in the formatter callback you receive grouped points which does not include extra data (how should they be grouped?).
example: https://jsfiddle.net/g04La2qh/1/
If you disable data grouping, you will receive non-grouped points with extra data.
dataGrouping: {
enabled: false
},
example: https://jsfiddle.net/g04La2qh/2/
I am trying to draw chart that is looks like below
So far so I have achieved what you can see here.
I want to know :-
1 . How can I place special symbol(diamond) with each series in each category ?
Is there anything better than what I have done ?
Relevant Code
series: [{
name: 'Meeting 1',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'},
]
},
{
name: 'Meeting 2',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
},
{
name: 'Meeting 3',
data: [
{y:100,color:'#F4B183'},
{y:100,color:'#FFE699'},
{y:100,color:'#FFD966'}
]
}
]
You can use extra scatter serie with diamond marker
{
type:'scatter',
color:'black',
marker:{
symbol:'diamond'
},
data:[[2,50]]
}
Example: http://jsfiddle.net/mdzzdLeh/3/
Alternative solution: use Renderer.
I've been trying to update the entire row of my grid, but having issues. I am able to update a single cell (if it doesn't have a formatter), but I would like to be able to update the entire row. Alternatively, I could update the column, but I'm not able to get it working if it has a formatter.
Here is the code that I'm using to update the grid:
grid.store.fetch({query : { some_input : o.some_input },
onItem : function (item ) {
dataStore.setValue(item, 'input', '123'); //works!
dataStore.setValue(item, '_item', o); //doesn't work!
}
});
And the structure of my grid:
structure: [
{ type: "dojox.grid._CheckBoxSelector"},
[[{ name: "Field1", field: "input", width:"25%"}
,{ name: "Field2", field: "another_input", width:"25%"}
,{ name: "Field3", field: "_item", formatter:myFormatter, width:"25%"}
,{ name: "Field4", field: "_item", formatter:myOtherFormatter, width:"25%"}
]]
]
Got some information in the #dojo freenode channel from 'tk' who kindly put together a fiddle showing the proper way to do this, most noteably putting an idProperty on the memoryStore and overwriting the data: http://jsfiddle.net/few3k7b8/2/
var memoryStore = new Memory({
data: [{
alienPop: 320000,
humanPop: 56000,
planet: 'Zoron'
}, {
alienPop: 980940,
humanPop: 56052,
planet: 'Gaxula'
}, {
alienPop: 200,
humanPop: 500,
planet: 'Reiutsink'
}],
idProperty: "planet"
});
And then when we want to update:
memoryStore.put(item, {
overwrite: true
});
Remember that item has to have a field 'planet', and it should be the same as one of our existing planets in order to overwrite that row.
I'm using the Highchart charting library with AngularJS, using Pablojim's 'Highchart-ng' module.
Everything is set up properly, and the following code works as intended:
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : [1, 4, 10, 3]
}]
}"></highchart>
But
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}"></highchart>
does not. (notice the difference at 'data')
I keep getting the following error:
Error: [$parse:syntax] Syntax Error: Token 'visitors' is unexpected, expecting [:] at column 122 of the expression [{
type : 'line',
series : [{
name : 'Visitors',
data : {{visitors}}
}]
}] starting at [visitors}}
}]
}].
Note: The variable {{visitors}} is set up properly in my controller, and when using it in my template, the data works fine. It also used to work with my previous charting library, Flot.
I've tried multiple workarounds:
Normally I can work around this (initialization) problem by adding something like ng-repeat="data in visitors | limitTo: 1" to the directive, so it inits only when the variable becomes available (this works with Flot and EasyPieCharts).
Adding ui-refresh="visitors" doesn't work,
and data: {{visitors || 0}} doesn't work either.
So, how can I add variables inline, within my template files?
you can try with:
<highchart config="{
type : 'line',
series : [{
name : 'Visitors',
data : visitors
}]
}"></highchart>
like a var
OR
in your ng-controller
$scope.config = {
options: {
chart: { type: 'bar' }
},
series: [{
data: visitors
}],
title: { text: 'Hello' },
loading: false }
and then in your html
<highchart config="config"></highchart>
Good evening,
I made a chart visible in http://jsfiddle.net/6u7fW/1/.
As it turns out, I have defined the variable "data" as an array, since we do not know their numbers (in the graph are three, but could be more).
you can declare the variable "series" in a dynamic way, so that from then code it is possible to enter all the data ("data") and that it is not static?
series: [{
name: name,
data: data[2]
},
{
name: name,
data: data[1]
},
{
name: "",
data: data[0]
}]
Thank you in advance
Dave
Let me explain:
you can do something like:
series: function() {
for (i=0; i <data.length; i++) {
return { name: "", data: data[i]}
}
}
You can use something like this:
var len = data.length,
series = [],
i;
for(i=0;i<len;i++){
series.push({ name: "", data: data[i]});
}
//highcharts part
series: series