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.
Related
I'm trying to make a radar chart using quickchart.io. I accomplished the look I want on raw html, but for some reason, quickchart doesn't like it when it comes to radial option :(
{
type: 'radar',
data: {
labels: ['A', 'B', 'C', 'D', 'E'],
datasets: [
{
data: [5, 4, 3, 3, 5],
label: 'Dataset'
},
{
data: [5, 4, 5, 3, 2],
label: 'Dataset 2'
}
],
},
options: {
scales: {
r: [
{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
],
}
},
}
It looks like it's totally ignoring everything in options. As you can see, I want the chart always start from 0 and tick mark increased by 1. Here's the result of the code above:
https://quickchart.io/chart?c=%7B%0A%20%20type%3A%20%27radar%27%2C%0A%20%20data%3A%20%7B%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0A%20%20%20%20datasets%3A%20%5B%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0A%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%5D%2C%0A%20%20%7D%2C%0A%20%20options%3A%20%7B%0A%20%20%20%20scales%3A%20%7B%0A%20%20%20%20%20%20r%3A%20%5B%0A%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%5D%2C%0A%20%20%20%20%7D%0A%20%20%7D%2C%0A%7D%0A
Can anyone help me?
You are trying to use v3 syntax but you are using it incorrect, the scales dont use arrays anymore. You also have to specify to quickchart you are using v3 like so https://quickchart.io/chart?version=3&c=CHARTCONFIG
Correct scale config V3 for you:
scales: {
r:{
min:'0',
max:'5',
ticks: {
stepSize: '1'
},
},
}
Working url based on your sample:
https://quickchart.io/chart?version=3&c=%7B%0D%0A%20%20type%3A%20%27radar%27%2C%0D%0A%20%20data%3A%20%7B%0D%0A%20%20%20%20labels%3A%20%5B%27A%27%2C%20%27B%27%2C%20%27C%27%2C%20%27D%27%2C%20%27E%27%5D%2C%0D%0A%20%20%20%20datasets%3A%20%5B%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%203%2C%203%2C%205%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%27%0D%0A%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20data%3A%20%5B5%2C%204%2C%205%2C%203%2C%202%5D%2C%0D%0A%20%20%20%20%20%20%20%20label%3A%20%27Dataset%202%27%0D%0A%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%5D%2C%0D%0A%20%20%7D%2C%0D%0A%20%20options%3A%20%7B%0D%0A%20%20%20%20scales%3A%20%7B%0D%0A%20%20%20%20%20%20r%3A%20%0D%0A%20%20%20%20%20%20%20%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20min%3A%270%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20max%3A%275%27%2C%0D%0A%20%20%20%20%20%20%20%20%20%20ticks%3A%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20stepSize%3A%20%271%27%0D%0A%20%20%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%20%20%20%20%7D%2C%0D%0A%20%20%20%20%7D%0D%0A%20%20%7D%2C%0D%0A%7D
quickchart.io defaults to latest Chart.js v2 according to their documentation. Therefore, your chart options need to be written as follows. Alternatively you can try to define the version parameter to explicitly tell quickchart.io to use Chart.js v3.
options: {
scale: {
ticks: {
suggestedMin: 0,
suggestedMax: 5,
stepSize: '1'
}
}
}
For further details about the latest Chart.js v2 radar charts, please consult https://www.chartjs.org/docs/2.9.4/charts/radar.html
We are using chartist js to make graph chart, but i can not find any solution to how to add text after bar grid.
Please see the below image to clear the pitcher:-
Jquery setting :-
new Chartist.Bar('#ct-campaignsBy', {
labels: ['Campaigns 1', 'Campaigns 2', 'Campaigns 3' ],
series: [
[5, 4, 3 ]
]
}, {
seriesBarDistance: 10,
reverseData: false,
horizontalBars: true,
axisY: {
offset: 80
}
});
I have a Tornado chart like the one below:
This chart has a baseline at 29.5, and it's fiddle is here.
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[
{y:12.15-baseValue, label:10},
{y:15.45-baseValue, label:1},
{y:31.25-baseValue, label:2},
{y:12.15-baseValue, color:'#99CCFF', label: ""},
],
labels:[10,5,1,2,]
},{
name: 'High',
grouping:false,
type:'bar',
data:[
{y:46.86-baseValue, label:30},
{y:42.28-baseValue, label:3},
{y:27.77-baseValue, label:4},
{y:46.86-baseValue, color:'#99CCFF', label:""},
],
labels:[30,10,3,4,]
},
{
name: 'Median',
type: 'scatter',
data: [
null,
null,
null,
27-baseValue
],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
I am trying to add a shadow chart of a second Tornado, where the baseline can be different. For instance, consider four more bars, shifted to the right, in the mockup shown below:
I have been stuck at this because the shadow bars only show relative to the baseValue of the first chart (29.5), and not to the baseValue of the second chart (39.5). So if I try to add them into the existing series, they will work only if the values are in the same direction (as in value-baseValue has the same sign as the original data).
To illustrate, suppose the shadow chart has the following data:
Annual Revenue: 25, 39.5, 55
Number of Years: 33, 39.5, 48
Annual Costs: 35, 39.5, 48
Combined Uncertainty: 23,43,55
How do I add this to the code in the fiddle above and make it look like the mockup? Here is a modified fiddle that does not work.
series:[{
name: 'Low',
grouping:false,
type:'bar',
data:[
{y:12.15-baseValue, label:10},
{y:25-baseValue, label:50},
{y:15.45-baseValue, label:1},
{y:33-baseValue, label:20},
{y:31.25-baseValue, label:2},
{y:48-baseValue, label:8},
{y:12.15-baseValue, color:'#99CCFF', label: ""},
{y:40-baseValue, color:'#99DDDD', label: ""}
],
labels:[10,50,1,20,2,8]
},{
name: 'High',
grouping:false,
type:'bar',
data:[
{y:46.86-baseValue, label:30},
{y:55-baseValue, label:70},
{y:42.28-baseValue, label:3},
{y:48-baseValue, label:30},
{y:27.77-baseValue, label:4},
{y:35-baseValue, label:5},
{y:46.86-baseValue, color:'#99CCFF', label:""},
{y:80-baseValue, color:'#99DDDD', label: ""}
],
labels:[30,70,3,30,4,5,]
},
{
name: 'Median',
type: 'scatter',
data: [
null,
null,
null,
null,
null,
null,
27-baseValue,
60-baseValue
],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
}]
The problems are annotated in the image below:
If you want to have point with 0/origin in different position that rest of series - then instead you should use different series and add hidden another horizontal axis (in your code it will be y-axis because of invert caused by bar charts).
To synchronize those axes you can set proper max and min on axes.
Example: http://jsfiddle.net/frgo4Lun/3/
OR
You can use threshold http://api.highcharts.com/highcharts#plotOptions.bar.threshold.
Example: http://jsfiddle.net/frgo4Lun/4/
You have also posted image with series on between of ticks. You can set x position of point to not round values like 1.5.
Example: http://jsfiddle.net/frgo4Lun/5/
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?
Ok, so I am attempting to move a fairly complex highcharts rendering script from the front end to server-side processing via nodejs
Its actually gone fairly well. I have "no errors" and the chart is rendering out with the data into svg. The problem is when I go to view the outputted svg in the browser its all messed up. In firebug I get the following "warning":
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.
Unexpected value NaN parsing y attribute.
Unexpected value NaN parsing x attribute.
My question is, how can I go about debugging this? I have no idea where the NaN value is being calculated in highcharts source, and get no traditional js errors in the console. What is essentially the same code is currently working fine in an actual browser environment, but is failing when processed with nodejs and domjs, so its likely the issue has to do with that.
Here is my node script:
# base libs
{jsdom} = require 'jsdom'
jade = require 'jade'
fs = require 'fs'
# chart and settings
Chart = require './classes/Chart'
Config = require './config/config.base'
HighchartSettings = require './config/config.highchart
# curl -d "width=200px&height=100px&device=mobile&resolution=DAILY&type=areaSpline" http://localhost:8000/chart
app.post '/chart', (req, res) ->
# get post params
jadeOptions =
height : req.param('height', null)
width : req.param('width', null)
isEnglish = req.param 'isEnglish', true
resolution = req.param 'resolution', null
chartType = req.param 'type', null
device = if req.param('device', 'mobile') is 'mobile' then { mobile : true, tablet : false} else { mobile : false, tablet : true }
# render dom from jade
jade.renderFile 'views/chart.jade', jadeOptions, (err, html) ->
# setup virtual browser
dom = jsdom html
window = dom.createWindow()
{host} = req.headers
{document} = window
window.console.log = console.log
# get localization localization
window.localization = Localization isEnglish
# generate chart settings
configSettings = Config device, window.localization
configSettings = configSettings[resolution][chartType]
chartSettings = HighchartSettings device
# add jquery
jsdom.jQueryify window, 'http://'+host+'/jquery.1.7.2.min.js', ->
{$} = window
# add highcharts lib to virtual browser
highchartsjs = document.createElement 'script'
highchartsjs.type = 'text/javascript'
highchartsjs.src = 'http://'+host+'/highcharts.custom.js'
highchartsjs.onload = ->
{Highcharts} = window
# don't mess with me, highcharts will cut you!
Highcharts.setOptions
global :
useUTC : true
chartDailyJSONDummy = JSON.parse 'there is real json here, I have removed it for the sake of SO'
try
chart = new Chart configSettings, chartSettings, chartDailyJSONDummy, Highcharts, ->
output = $('#chartWrapper').html()
res.setHeader "Content-Type", "text/html"
res.write output
res.end()
console.log 'Chart sent \n'
catch err
console.log err
res.send 'error, see log \n'
document.body.appendChild highchartsjs
My highcharts configuration as displayed in the console:
{ chart:
{ renderTo: 'chartContainer',
backgroundColor: 'none',
events: { load: [Function] },
animation: false,
renderer: 'SVG' },
title:
{ text: 'Today vs Yesterday',
style: { color: 'white', fontSize: '17px', lineHeight: '22px' },
margin: 18,
y: 18 },
subtitle: { text: null },
xAxis:
{ type: 'datetime',
labels: { step: 12, formatter: [Function], style: [Object], y: 20 },
tickInterval: 3600000,
tickLength: 6,
tickWidth: 2,
startOnTick: true,
endOnTick: true,
maxPadding: 0 },
yAxis:
[ { title: [Object], labels: [Object] },
{ title: [Object], labels: [Object], linkedTo: 0, opposite: true } ],
legend: { enabled: false },
credits: { enabled: false },
tooltip: { enabled: false },
plotOptions:
{ areaspline:
{ color: '#19b6f4',
marker: [Object],
enableMouseTracking: false },
spline:
{ color: '#d01b7c',
marker: [Object],
enableMouseTracking: false } },
series:
[ { type: 'areaspline', data: [Object], animation: false },
{ type: 'spline', data: [Object], animation: false } ] }
UPDATE Here is a sample of the data that currently appears in series as [Object]
[ [ 1363562100000, 0.358 ],
[ 1363563000000, 0.498 ],
[ 1363563900000, 0.241 ],
[ 1363564800000, 0.211 ],
[ 1363565700000, 0.426 ],
[ 1363566600000, 0.58 ],
[ 1363567500000, 0.195 ],
[ 1363568400000, 0.217 ],
[ 1363569300000, 0.185 ],
[ 1363570200000, 0.19 ],
[ 1363571100000, 0.223 ],
[ 1363572000000, 0.18 ],
[ 1363572900000, 0.164 ],
[ 1363573800000, 0.188 ],
[ 1363574700000, 0.16 ],
[ 1363575600000, 0.166 ],
[ 1363576500000, 0.188 ],
[ 1363577400000, 0.154 ],
[ 1363578300000, 0.162 ],
[ 1363579200000, 0.1715 ],
[ 1363580100000, 0.1715 ],
[ 1363581000000, 0.173 ],
[ 1363581900000, 0.189 ],
[ 1363582800000, 0.151 ],
[ 1363583700000, 0.179 ],
[ 1363584600000, 0.288 ],
[ 1363585500000, 0.496 ],
[ 1363586400000, 0.175 ],
[ 1363587300000, 0.2 ],
[ 1363588200000, 0.185 ],
[ 1363589100000, 0.439 ],
[ 1363590000000, 1.19 ],
[ 1363590900000, 0.495 ],
[ 1363591800000, 0.294 ],
[ 1363592700000, 0.286 ],
[ 1363593600000, 0.28 ],
[ 1363594500000, 0.845 ],
[ 1363595400000, 2.055 ],
[ 1363596300000, 2.03 ],
[ 1363597200000, 1.611 ],
[ 1363598100000, 1.936 ],
[ 1363599000000, 1.499 ],
[ 1363599900000, 1.876 ],
[ 1363600800000, 1.699 ],
[ 1363601700000, 1.667 ],
[ 1363602600000, 1.862 ],
[ 1363603500000, 1.496 ],
[ 1363604400000, 2.312 ],
[ 1363605300000, 2.056 ],
[ 1363606200000, 0.878 ],
[ 1363607100000, 1.339 ],
[ 1363608000000, 0.69 ],
[ 1363608900000, 1.259 ],
[ 1363609800000, 0.884 ] ]
UPDATE 2 Issue does not seem to be caused by may highcharts configuration, but rather the jsdom environment missing some critical component. I suspect this because when using an older copy of highcharts, the problem isn't there, but then again my script is not structured for the older version and the chart renders with missing features.
2.0.5 WORKS
2.2.5 DOES NOT
project needs to be in 2.2.5
REALLY I JUST WANT A WAY TO DEBUG THIS
It's not possible for me to easily reproduce the issue, but here are some leads you might want to follow:
Highchart issue #1300:
Fixed error on exporting an empty chart due to labels with y attribute of NaN
There was some discussion about it on the Highsoft Forum.
This issue has been fixed in 2.3.5 as reported on their changelog.
It appears to be a warning when null data is received in most cases, so are you sure this data is returned? Maybe your chart is loaded before your object data is returned? I'm just thinking out loud.
This is not a solution, just a tip.
I think that you need to break this problem into a smaller one, make it work and increase it carefully. Them you will get where the thing is breaking your legs. Start fresh and redoo until you find the problem.