$(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
Related
I'm using Highcharts to render some charts for a project. My problem is that when I try to set colors array in plotOptions.column, it doesn't work. Although, it works fine for plotOptions.pie.
What I need to do is to set different color presets for different series types. So when I add series of same type, they have colors picked up from their colors array. But now, for some weird reason, the default colors are showing although I have defined my own colors array for each series type.
Here is the fiddle to better understand what I mean:
http://jsfiddle.net/c5nhd/1/
And here is the link to official documentation:
http://api.highcharts.com/highcharts#plotOptions.column.colors
DEMO of different color for different series of the column chart from our customized array of colors thus overriding the default colors of the highcharts.
code:
var colors = ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A'];
$( '#container' ).highcharts({
plotOptions: {
pie: { //working here
colors: colors
}
},
colors:colors,
series: [{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
},{
type: 'column',
data: [25, 34, 15, 17, 19],
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}]
});
The trick is to set the series color and not global options colors or point colors.
Global options colors is an applied set for all charts on the page. It will be ok if you apply it to another chart.
Also, colorByPoint will need to be false. This is default false, so you can exclude.
Also make sure to set color and not color(s) if you wish to include a legend. The legend will not know what color to use if you set multiple colors and will just default.
$( '#container' ).highcharts({
plotOptions: {
column: {
//colorByPoint: false,
//stacking: 'percent',
},
pie: {
colors: ['#FF530D', '#E82C0C', '#FF0000', '#E80C7A', '#E80C7A']
}
},
series: [{
type: 'column',
color: '#FF530D',
data: [25, 34, 15, 17, 19]
}, {
type: 'pie',
data: [25, 34, 15, 17, 19],
center: ['75%', '30%']
}, {
type: 'column',
color: '#333333',
data: [15, 27, 10, 23, 21]
}]
});
Here is an update to your js fiddle.
http://jsfiddle.net/c5nhd/4/
This also works if you wish to stack by percent.
In fact, You should use the latest highcharts.js (Highcharts JS v6.1.4 (2018-09-25)).
I have fixed this using version 6x.
I have been working on getting data into a highchart graph with much difficulty.
Eventually I had to go with using eval(data).
Is there a better way to do this?
JSFiddle Example
$(function () {
var test = "[[Date.UTC(2013, 4, 08), 45.95],[Date.UTC(2013, 5, 28), 19.95]]";
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{
data: eval(test)
}]
});
});
UPDATE 1
My actual objective is to pass a JSON object into a function (as shown below) then get the required strings and pass them to the series input.
The following is still not working.
function showPriceChart(priceData) {
var json = jQuery.parseJSON(priceData);
var pricePrices = [ json.pricePrices ];
// This works if I use eval below
// var pricePrices = '['+json.pricePrices+']';
/// Other chart config goes here
series: [{
name: 'Retailer Price',
data: pricePrices
}, {
name: 'RRP',
data: rrpPrices
}]
});
}
Here is the JSON object from php using print_r():
{"pricePrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 29]","salePrices":"[Date.UTC(2013, 4, 8), ],[Date.UTC(2013, 5, 28), ]","rrpPrices":"[Date.UTC(2013, 4, 8), 67],[Date.UTC(2013, 5, 28), 67]"}
you were really close from your goal.
The following is working :
(http://jsfiddle.net/G6jrU/3/)
$(function () {
var test =[ [ Date.UTC(2013, 4, 08), 45.95 ],
[ Date.UTC(2013, 5, 28), 19.95 ] ];
$('#container').highcharts({
chart: {
},
xAxis: {
type: 'datetime'
},
series: [{ data : test }]
});
});
Rq : You might use JSON to serialize/unserialize data if you need to.
The problem is that you are using Date.UTC() function, so you need to use eval. How about passing numbers(timestamps in milliseconds) instead of that functions? So, your JSON should look this way:
{
"pricePrices":[1367971200000, 67],[1372377600000, 29],
"salePrices":[1367971200000, ],[1372377600000, ], //where are values ?!
"rrpPrices":[1367971200000, 67],[1372377600000, 67] //without extra '"'!!
}
Also, there is some missing values for second series, where are they?
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/
I am hoping someone out there can tell me if what I am trying to do is even possible with the FLOT Javascript library. I am trying to show a chart (below) with dual axis and three data sets. One data set is on the left axis and two data sets on the right axis. What I really want to be able to do is stack the two data sets on the right axis since they should show cumulatively. Thus far I have been unable to get this chart to respond to the stack: true setting at all.
If anyone could help me out with it I would GREATLY appreciate it. My code and a snapshot of the chart currently. I am trying to stack the blue and green areas which correspond to the right axis (y2).
$(function () {
var previousPoint;
var completes = [[1346954400000, 5], [1346997600000, 5], [1347040800000, 7], [1347084000000, 9], [1347127200000, 12], [1347170400000, 15], [1347213600000, 16], [1347256800000, 20], [1347300000000, 20], [1347343200000, 20], [1347386400000, 25]];
var holds = [[1346954400000, 2], [1346997600000, 2], [1347040800000, 6], [1347084000000, 12], [1347127200000, 12], [1347170400000, 15], [1347213600000, 24], [1347256800000, 24], [1347300000000, 24], [1347343200000, 24], [1347386400000, 25]];
var screeners = [[1346954400000, 10298], [1346997600000, 7624], [1347040800000, 5499], [1347084000000, 2100], [1347127200000, 8075], [1347170400000, 4298], [1347213600000, 1134], [1347256800000, 507], [1347300000000, 0], [1347343200000, 800], [1347386400000, 120]];
var ds = new Array();
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
lines: {
show: true,
fill: true,
order: 3,
}
});
//tooltip function
function showTooltip(x, y, contents, areAbsoluteXY) {
var rootElt = 'body';
$('<div id="tooltip2" class="tooltip">' + contents + '</div>').css( {
position: 'absolute',
display: 'none',
top: y - 35,
left: x - 5,
border: '1px solid #000',
padding: '1px 5px',
'z-index': '9999',
'background-color': '#202020',
'color': '#fff',
'font-size': '11px',
opacity: 0.8
}).prependTo(rootElt).show();
}
//Display graph
$.plot($("#placeholder1"), ds, {
grid:{
hoverable:true
},
xaxes: [ { mode: 'time', twelveHourClock: true, timeformat: "%m/%d %H:%M" } ],
yaxes: [ { min: 0,
tickFormatter: function numberWithCommas(x)
{
return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
},
}
],
y2axis: [ ],
legend: { show: true }
});
});
This is very straightforward. The stacking plugin isn't well documented, but in the source code, you can see there are two ways to specify that you want stacking turned on.
Two or more series are stacked when their "stack" attribute is set to
the same key (which can be any number or string or just "true"). To
specify the default stack, you can set
series: {
stack: null or true or key (number/string) }
or specify it for a specific series
$.plot($("#placeholder"), [{ data: [ ... ], stack: true }])
In this case, we want to specify it within the two series objects that we want stacked, which would look like this:
ds.push({
data:completes,
label: "Complete",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 2,
}
});
ds.push({
data:screeners,
label: "Pre-Screened",
yaxis: 1,
lines: {
show: true,
fill: true,
order: 1,
}
});
ds.push({
data:holds,
label: "Holds",
yaxis: 2,
stack: true, //added
lines: {
show: true,
fill: true,
order: 3,
}
});
Add those two stack:true bits and include the stack plugin into your javascript sources and that will do it. See it in action here: http://jsfiddle.net/ryleyb/zNXBd/
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.