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?
Related
I want to show a line chart in my page by javascript.
sample code for showing chart is same as below
new Chartist.Line('#chart-with-area', {
labels: ["d1", "d2", "d3", "d4", "d5", "d6", "d7", "d8"],
series: [
[5, 9, 7, 8, 5, 3, 5, 4]
]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
I am using laravel framework and I need to send data from php to javascript.
I created two arrays, one for labels and one for data.
The problem is that when I add array for labels , I faced with below errors
htmlspecialchars(): Argument #1 ($string) must be of type string, array given
and when I send json , javascript change double quots
new Chartist.Line('#chart-with-area', {
labels: ["2021\/7\/5","2018\/11\/17","2019\/1\/8","2018\/10\/25","2019\/4\/9","2018\/11\/18","2019\/3\/11","2019\/1\/3","2019\/1\/5","2018\/12\/17","2021\/5\/25","2018\/12\/31"],
series: [[1,1,1,1,1,1,1,3,1,1,2,6]]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
here is my code:
new Chartist.Line('#chart-with-area', {
labels: {{json_encode($requestLineChartLabel)}},
series: [{{json_encode($requestLineChartData,JSON_NUMERIC_CHECK)}}]
}, {
low: 0,
showArea: true,
plugins: [
Chartist.plugins.tooltip()
]
});
I searched a lot, but can't find any solution.
If you're using Laravel 7 or higher, you can use the #json blade directive to properly output json:
labels: #json($requestLineChartLabel),
series: [#json($requestLineChartData,JSON_NUMERIC_CHECK)]
Just make sure that those variables are not already json, or else you'll be double encoding it.
I have two arrays I would like to display in Highcharts with custom buttons : Day and Week.
To reset the chart and display the original data I need a reset button but my problem is that it fails to render this specific array (original_data).
What could be the reason of this issue and how can I sort it out ?
Thank you,
JSFiddle
original_data = [1, 2, 3, 4, 5];
new_data1 = [6, 7, 6, 7, 6];
new_data2 = [15, 14, 13, 12, 11];
var mychart = Highcharts.chart('container', {
series: [{
name: 'Total',
data: original_data,
type: 'area'
}
],
exporting: {
buttons: {
first_Button: {
text: 'Day',
onclick: function () {
mychart.series[0].setData(new_data1);
}
},
second_Button: {
text: 'Week',
onclick: function () {
mychart.series[0].setData(new_data2);
}
},
third_Button: {
text: 'Reset',
onclick: function () {
mychart.series[0].setData(original_data);
}
}
}
}
});
You passed original_data in configuration object. Now everytime you call setData(new_data) you override original_data cause it works as reference.
So when you click 'Week' button in the background it looks like:
original_data = new_data2;
The solution is to pass clone of original_data in configuration object.
Example: 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 to dynamically update a C3.js line chart using a function that get a set of x and y values from a database. The function I'm trying to use to insert the data is:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
console.log("starting");
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: yAxis, xAxis
});
}, 100);
}
The data being passed into the function looks like this:
yAxis:
["y", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
xAxis:
["x", 0, 131.35, 26971.3, 27044.75, 27351.4, 27404.483333333334, 27419.416666666668, 33128.96666666667, 33549.13333333333, 34049.48333333333, 77464.26666666666, 77609.71666666666, 174171.85, 259166.98333333334]
Header:
MakeModeChange #just a string
I know I'm doing something fundamentally wrong here, but any help would be appreciated
Just in case anyone needs it I managed to figure out my issue. It's all in how you do the "columns" portion (it need to be bound in []). Here's the fixed code just in case:
function insertGraph(yAxis, xAxis, Header) {
setTimeout(function () {
chart.load ({
bindto: "#graph",
xs: {
'y':'x'
},
columns: [
yAxis,
xAxis
]
});
}, 100);
}
Hi every one I am using Highchart of columnrange type, i got chart from
http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/columnrange/ and modified it according to my need , now i need months name in the x-axis and y-axis values are fixed . Currently i am not able to change the x-axis numbers to months.
My script is as :
$(function () {
$('#container').highcharts({
chart: {
type: 'columnrange',
inverted: true
},
title: {
text: 'Employee Bill Pending Detail'
},
subtitle: {
text: 'Month Wise'
},
xAxis: {
categories: ['Bank Bill Pending', 'Clam Pending']
},
yAxis: {
title: {
text: 'Session (2013-14)'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
columnrange: {
dataLabels: {
enabled: true,
formatter: function () {
return this.y ;
}
}
}
},
legend: {
enabled: false
},
series: [{
name: 'Months',
data: [
[1, 4], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[2, 8] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
});
});
Any help will be highly appreciable.
This is actually really easy. Relevant API documenation:
dateFormat()
yAxis.type
You need to set your data up like this (or use explicit js timestamp):
series: [{
name: 'Months',
data: [
[Date.UTC(2013, 0, 1), Date.UTC(2013, 3, 1)], // Here the [1,4] denotes months between 'Jan' & 'Apr'.
[Date.UTC(2013, 2, 1), Date.UTC(2013, 7, 1)] // Here the [2,8] denotes months between 'Feb' & 'Aug'.
]
}]
Note that Data.UTC() is zero based so that January is '0'. The last element in that list is the date. Since your data is just by month I made it '1'. You can have whatever you want here as the display on the dataLabel and the tooltip is handled with the dateFormat.
Example jsFiddle.