I want to zoom in such a way that the picture fits correctly. I don't want to display values till 0, but maybe till 18000 on the Y Axis so that chart can be seen well.
option = {
"toolbox": {
"feature": {
"dataZoom": {
"yAxisIndex": "true"
},
"brush": {
"type": ['lineX', 'clear']
}
}
},
"xAxis": {
"data": datelist
},
"yAxis": {},
"series": [
{
"type": 'candlestick',
"data": ohlclist
}
]
}
return(option)
The scale can be set automatically, by setting the scale option from yAxis to true:
yAxis: {
scale: true,
},
Sometimes autoscale won't behave exactly as you want, so you can set the scale manually using the min and max options from yAxis :
yAxis: {
min: 15000,
max: 20000
},
Note: The scale option won't work if min and max are set
Related
chart.draw(data,{
colors:[self.model.get("color"), '#FF0000'],
height: 600,
title: self.model.get("title"),
chartArea: { width:'80%',height:'80%'},
legend: {position: 'bottom'},
animation:{
startup: true,
duration: 500,
easing: 'inAndOut',
},
vAxis:{
0:{
title:self.model.get("x_axis_label")
},
1:{
title:"Temperature"
}
},
hAxis:{
title:self.model.get("x_axis_label"),
slantedText: false,
slantedTextAngle: 0
},
series:
{
0: {
type:'bars',
targetAxisIndex:0
},
1: {
type:'line',
targetAxisIndex:1
}
}
});
I have two vertical Axis(Temperature and KWh). Every thing works except the title of vertical axis are not shown on the chart. I have defined vAxis in the options and targetAxisIndex inside series. I searched google and could not find anything except that vAxis should have 0:{} and 1:{} for two vertical axis.
when using multiple y-axis, need to use --> vAxes -- with an e -- not vAxis
This property can be either an object {} or an array []
object...
vAxes: {
0: {
title: self.model.get("x_axis_label")
},
1: {
title: "Temperature"
}
},
array...
vAxes: [
{
title: self.model.get("x_axis_label")
},
{
title: "Temperature"
}
],
How to remove sliced line from pie high chart if there there is only one object in data. I want to see complete circle when there is one data coming. Right now it shows one slice line in circle. I don't want it to be there.
plotOptions: {
pie: {
allowPointSelect: true,
slicedOffset: 0
}
},
series: [{
data: [
{
name: 'Firefox',
y: 44.2,
selected: true,
sliced: false
},
]
}]
Screen shot Image
You can do this by setting the borderWidth to 0 and borderColor to null. The default is 1:
plotOptions: {
pie: {
borderWidth: 0,
borderColor: null
}
},
AS shown in image, i want to change Fill color by point (referring project state in my case so),
visual for my chart
code i have used so far to achieve this is below,
$(function () {
$('#ao-projectssummry-chart').highcharts({
type: "spline",
title: null,
borderRadius : null,
xAxis: {
categories: ['May2016', 'June2016', 'July2016', 'August2016', 'september2016', 'November2016'],
opposite: true
//type: 'datetime',
//min: Date.UTC(2011, 4, 31),
//max: Date.UTC(2012, 11, 6)
},
yAxis: {
min: 0,
max: 5,
title : null
},
plotOptions: {
series: {
lineWidth: 20,
borderRadius: null,
radius: 0
},
marker: {
radius : 0
}
},
credits : {
enabled : false
},
legend: {
enabled : false
},
series: [{
name: "Project 1",
data: [1, 1, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}, {
y: 1,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)'
}
}
]
},
{
name: "Project 2",
data: [2, {
y: 2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping : true
}
}, 2, 2, 2, {
y:2,
marker: {
symbol: 'url(https://www.highcharts.com/samples/graphics/sun.png)',
overlapping: true
}
},
]
}]
});
});
so, how can i change the plotoption color by point? also how can i achieve background lines shown in the picture?
Any help would be appreciated! thanks in advance.
Ok, so it seems the question is different than what I read it as the first time. Rather than changing the color of the point markers, you want to change the color of the segments between markers.
Here is an approach that achieves what you are asking for, using the columnrange series type instead of a line. This allows more flexibility and control.
The idea:
First, set the type, and invert the chart (columnrange is a vertical series type; to make it horizontal, invert the chart - the x axis is now the vertical axis, and the y axis is now the horizontal axis):
chart: {
type: "columnrange",
inverted: true
}
Update the axis settings accordingly (swap x for y).
Set your data with an x value, a low value (starting point), and a high value (end point).
Set the color to whatever you want:
data: [{
x: 1,
low: Date.UTC(2016,3,15),
high: Date.UTC(2016,4,21),
color: 'rgb(0,156,255)'
},{
x: 3,
low: Date.UTC(2016,2,7),
high: Date.UTC(2016,6,15),
color: "rgb(204,0,0)"
}]
To place the markers, add a separate series, either line or scatter (I use line, with a lineWidth: 0, because scatter series use a different tooltip model, and are not as easy to integrate with other series, if the tooltip is important to you. But otherwise, both work the same).
Marker series:
{
name: 'Markers',
type: 'line',
data: [
{
x: 1,
y: Date.UTC(2016,2,15),
marker: {
fillColor:"#9CCB00"
}
}
Example:
https://jsfiddle.net/jlbriggs/x7c3t81n/
Output:
You need to specify that in the data array directly:
Example code:
data: [5,4,3,2,5,6,7,9, {y:6, marker: { enabled: true, radius: 10, fillColor: 'red'}},3,2,5,6,7]
Anything that you can specify in the plotOptions that affects the data point, you can specify in this way for a specific data point.
Any point for which you don't specify anything, follows the default options, or the options specified in the plotOptions.
Fiddle:
http://jsfiddle.net/jlbriggs/3d3fuhbb/126/
Output:
I would like to have a flotchart that depicts the distribution of all data (x axis represents the values from 0 to 10, y axis for hour only starting from 7am to 7pm).
I could not figure out how I should set the configuration of flotchart in this regard.
Here is the json sample of my Dataset :
[1409558400000, 7.45],[1409562000000, 5.71], [1409565600000, 7.50], [1409569200000, 7.63], [1409576400000, 3.14],
[1409644800000, 7.45],[1409648400000, 5.71], [1409652000000, 7.50], [1409655600000, 7.63], [1409662800000, 3.14],
[1409731200000, 7.45],[1409734800000, 5.71], [1409738400000, 7.50], [1409742000000, 7.63], [1409749200000, 3.14]]
;
And here is the code for flotchart; The problem with this is that it sorts all the series based on their timestamps. I do not want that.
I would like them to fit in based on their "hour" parameter only.
Anyone knows if only hour on the x-axis without sorting the data series is possible with flotchart ?
$("#a-dag").click(function() {
console.log("a dag filtering will be applied...");
$.plot("#placeholder", [d], {
series: {
lines: {
show: true
},
points: {
show: true
}
},
grid: {
hoverable: true,
clickable: true,
markings: [{
yaxis: {
from: 0,
to: 4
},
color: "#F2CDEA"
}, {
yaxis: {
from: 4,
to: 7
},
color: "#D7EEE1"
}, {
yaxis: {
from: 7,
to: 12
},
color: "#F2CDEA"
}]
},
xaxis: {
mode: "time",
twelveHourClock: true,
},
yaxis: {
min: 0,
max: 12
}
});
});
Just convert your timestamps to hours, for example like this:
$.each(d, function (index, datapoint) {
datapoint[0] = (new Date(datapoint[0])).getHours();
});
(If you want values with AM / PM change accordingly.)
And of course remove the mode: "time" from your options.
See this fiddle for the changed code.
My json looks like this
var jStore = {
" identifier": "cpu",
"items": [
{
"Time": "02:52",
"Used": 100,
"Idle": 0
},
{
"Time": "02:57",
"Used": 100,
"Idle": 0
}....
]
};
I create a datastore and adding to the chart,
var realStore = new dojo.data.ItemFileReadStore({data: jStore});
var Ser = new dojox.charting.DataSeries(realStore, {query: {Idle: "*"} }, "Idle");
var Ser1 = new dojox.charting.DataSeries(realStore, {query: {Used: "*"} }, "Used");
chart.addAxis("x");
chart.addAxis("y", { vertical: true, fixLower: "major", fixUpper: "major" });
chart.addSeries("Used ",Ser);
chart.addSeries("Idle",Ser1);
the chart is rendering properly but the xaxis values are taken default (1,2,3..).
But i need to give the axis value as the Time in my json.
Xaxis should be like 02:52,02:54,02:56
Also in the tool tip it showing only the value i have given the series. But i would like to add the value+ xaxis value. Say for example 100 at 02:54.
Could someone help me on this.
You can specify custom labels for each value as follows:
mychart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: false,
font: "normal normal 10pt Arial",
labels: [{value: 1, text: "Q2 FY11"},
{value: 2, text: "Q3 FY11"},
{value: 3, text: "Q4 FY11"},
{value: 4, text: "Q1 FY12"}]
});
You can also specify custom tooltip text as follows:
mychart.addSeries("Series A", [{ y: 2.3, tooltip: "FFFF"}, { y: 3.5, tooltip: "GGGG"}]);
In your case since you are using a store, the JSON that feeds the store needs to have a "tooltip" attribute for each value - dojo will use that to populate the tooltip