I am using highstock to show two dimension data of multi series on a chart. But highstock shift bars of series and don't show on one trick!
I used this code:
workData = [
/* 2009-01-01 */
[1262048400000, 6, 10],
[1262134800000, 7.75, 12],
[1262221200000, 7, 16]
];
freeData = [
[1262048400000, 10, 12],
[1262134800000, 13, 16]
];
missionData = [
[1262134800000, 12, 13]
];
$(function() {
$('#container').highcharts('StockChart', {
chart: {
type: 'columnrange'
},
xAxis: {
minTickInterval: 24*3600*1000
},
series: [{
name: 'Work',
data: workData ,
color: 'green'
}, {
name: 'Free',
data: freeData,
color:'blue'
}, {
name: 'Mission',
data: missionData ,
color: 'red'
}]
});
});
in above code I have 3 series whit two dimension data.
You can set grouping: false for series, take a look: http://jsfiddle.net/E83Ef/1/
Related
I have a question regarding to Highcharts option for plotting a "pie-of-a-pie" chart. I need to show something similar to the one: https://www.amcharts.com/demos/pie-of-a-pie/?theme=material Can i do the same thing in Highcharts? If yes please do help.
If not possible in High Charts, can you please help in amcharts only?
Yes, you can achieve that result in Highcharts. You can use two pie series and update one of them in series.point.events.click funtion. For example:
series: [{
data: [{
y: 1,
details: [1, 3, 2]
}, {
y: 2,
details: [4, 31, 2]
}, {
y: 3,
details: [14, 3, 2]
}],
point: {
events: {
click: function() {
var series = this.series.chart.series;
series[1].setData(this.details.slice());
}
}
},
center: [200, 100],
size: 200
}, {
size: 100,
center: [500, 100],
data: []
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4996/
API Reference:
https://api.highcharts.com/highcharts/series.pie.size
https://api.highcharts.com/highcharts/series.pie.center
https://api.highcharts.com/highcharts/series.pie.point.events.click
https://api.highcharts.com/class-reference/Highcharts.Series#setData
I create a high chart using angular 4 and I want to highlight a particular portion of Highchart.
Ex Image :https://www.screencast.com/t/MHxo59j2dM
As per above image if data point value goes below to some limit (like 0) then highlight with "Red" color and if it goes below 8 then highlight with Yellow
I'm not sure whether its possible with Highchart or not but if someone had created this kind of features then please let me know.
Highchart provides Area Chart option - https://www.highcharts.com/demo/area-negative but my chart is normal and I don't want to highlight all series point.
There's no such functionality in Highcharts, but you can mimic it by using polygon series and plot lines:
var chart = Highcharts.chart('container', {
plotOptions: {
polygon: {
showInLegend: false
}
},
yAxis: {
tickInterval: 1,
plotLines: [{
value: 4,
color: 'orange',
width: 2
}, {
value: 3,
color: 'red',
width: 2
}]
},
series: [{
data: [6, 4, 3, 1, 2, 3, 4, 7]
}, {
type: 'polygon',
data: [[1,4], [2, 4], [2,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[5,4], [6, 4], [5,3]],
color: 'orange'
}, {
type: 'polygon',
data: [[2,3], [5, 3], [4,2], [3,1], [2,3]],
color: 'red'
}]
});
Live working example: http://jsfiddle.net/kkulig/fbomb7cf/
It will require some programming to make the process of creating these areas automatic (in my fiddle everything is hard-coded).
To achieve similar styling you can try patter fill Highcharts plugin: https://www.highcharts.com/blog/extension/pattern-fill/
API references:
http://api.highcharts.com/highcharts/series.polygon
http://api.highcharts.com/highcharts/yAxis.plotLines
I am using Chart.js grouped bar chart. I want to show my bars with gradient colors. Currently it show as shown in below image. Any help will be greatly appreciated.
var rateOfReturn= document.getElementById("rateofreturn-chart-canvas").getContext('2d');
var rateOfReturnData = {
labels: ["Monthly", "Quarterly", "Semiannually", "Annually"],
datasets: [
{
label: "label1",
backgroundColor: [
'#26343b',
'#26343b',
'#26343b',
'#26343b'
],
data: [4, 6, 8, -3],
},
{
label: "",
backgroundColor: [
'#be1a33',
'#be1a33',
'#be1a33',
'#be1a33'
],
data: [6, 10, 11, 7],
},
{
label: "",
backgroundColor: [
'#00b786',
'#00b786',
'#00b786',
'#00b786'
],
data: [13, 10, 9, 4],
},
{
label: "",
backgroundColor: [
'#f86929',
'#f86929',
'#f86929',
'#f86929'
],
data: [6, 8, 2, 11],
},
{
label: "",
backgroundColor: [
'#046cd0',
'#046cd0',
'#046cd0',
'#046cd0'
],
data: [4, 8, 7, 13],
}
]
};
rateOfReturn.canvas.height = 80;
var myBarChart = new Chart(rateOfReturn, {
type: 'bar',
data: rateOfReturnData,
options: {
legend:
{
display: false
},
scales:
{
xAxes: [{
title: "Test title",
ticks: {
beginAtZero: true,
titleFontWeight: "bold"
},
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Rate Of Return (ROR) % '
},
ticks: {
beginAtZero:true,
mirror:false,
suggestedMin: 0
},
}]
}
}
});
You want to use Chart.js plugins. They let you handle some events triggered through the chart creation such as the initialization, the resize, etc.
Chart.pluginService.register({
beforeUpdate: function(chart) {
// All the code added here will be executed before a chart update
}
});
You also want to use createLinearGradient to create a gradient color usable in a canvas :
var gradient = ctx.createLinearGradient(0,0,200,0); // Dimensions of the color rectangle
gradient.addColorStop(0,"green"); // First color
gradient.addColorStop(1,"white"); // Second color
Now you want to use both into one. Let's first see how it works.
You first have to add the two colors of the gradient you want to see in your chart data :
datasets: [{
label: "label1",
backgroundColor: [
['#26343b', 'white'], // `white` and `#FFFFFF` both stand for a white color
['#26343b', 'white'],
['#26343b', 'white'],
['#26343b', 'white']
],
data: [4, 6, 8, -3],
}, {
// ...
}]
Then you need to add the following plugin before you create the chart (using new Chart()), or else it won't be added into the chart's plugin service :
Chart.pluginService.register({
beforeUpdate: function(chart) {
// For every dataset ...
for (var i = 0; i < chart.config.data.datasets.length; i++) {
// We store it
var dataset = chart.config.data.datasets[i];
// For every data in this dataset
for (var j = 0; j < dataset.data.length; j++) {
// We store the data model (graph information)
var model = dataset._meta[0].data[j]._model;
// We use the model to get the left & right borders X position
// and to create the gradient
var start = model.x,
end = model.x + model.width,
gradient = rateOfReturn.createLinearGradient(start, 0, end - 5, 0);
// The colors of the gradient that were defined in the data
gradient.addColorStop(0, dataset.backgroundColor[j][0]);
gradient.addColorStop(1, dataset.backgroundColor[j][1]);
// We set this new color to the data background
dataset.backgroundColor[j] = gradient;
}
}
}
});
Follows the result of the plugin with your example, which you can find on this jsFiddle :
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
title: {
text: 'Test Progress'
},
xAxis: {
title: {
text: 'Date'
},
type: "datetime"
},
yAxis: {
title: {
text: 'Grade'
}
},
credits: { enabled: false },
series: [{
data: [[1331028000000, 5], [1331031600000, 6], [1331035200000, 4]]
}]
});
});
By following this thread, http://stackoverflow.com/questions/9548326/what-format-does-the-highcharts-js-library-accept-for-dates
it says that i can input the dates in the above way inside data but it shows time instead of date.
Also i tried the first method and still gives me time. How can i display dates?
Also i am trying to get the dates from records and display them there, in what format do i need to convert them to properly show them?
For those wondering here is the query i have come up with
Test.where("user_id = ?", 25).order('created_at DESC').select(:grade,:created_at).map { |g| [ g.created_at.to_i * 1000, g.grade.to_i ] }.inspect
i wrapped this query in a method and called the method in view
series: [{
data: <%= grades %>
}]
this creates this line of code
data: [[1454777030000, 25], [1454598308000, 50], [1454598191000, 75], [1454163373000, 100], [1454163332000, 100], [1454163177000, 100], [1454163000000, 0], [1454096412000, 50], [1454096220000, 50], [1454095875000, 0], [1454095853000, 50], [1454082249000, 22], [1454081128000, 100], [1453037445000, 100]]
which seems to work with highcharts
I'm trying out jqPlot, but I can't figure out how to set the name of the different series.
Currently, my code looks like this:
$(document).ready(function () {
$.jqplot('chartdiv', [
[[201201, 10], [201202, 20], [201203, 30], [201204, 60], [201205, 40]],
[[201201, 5], [201202, 10], [201203, 7], [201204, 8], [201205, 11]]
], {
axes: {
xaxis: {
label: "Year/month",
pad: 0
},
yaxis: {
label: "Amount (Kr)"
}
},
legend: {
show: true
}
});
});
It renders the diagram, but the series are named series 1 and series 2. Is there any way that I can control the naming of the series?
To have names for series you must set 'label' which is under 'series'. Please see here for documentation.
Example code presenting its use is available here.