I have a associate php array (field_data) and i wanna pass it to JS using json_encode function: $jArray = json_encode($field_data);
I'm recieving the array in JS: var irbrowser = <?php echo $jArray; ?>; But in js when i wanna set the value in jArray to pie chart data, It does not render anything.
<?php
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
$(function () {
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Browser market shares'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: irbrowser.IE
}, {
name: "Chrome",
y: irbrowser.Chrome,
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: irbrowser.Other
}]
}]
});
});
</script>
I found the problem.
It should be converted to Float. so i use parseFloate(irbrowser) function. And set the variables to y. That code
series: [{
name: "Brands",
colorByPoint: true,
data: [{
name: "IE",
y: parseFloat(irbrowser.IE)
}, {
name: "Chrome",
y: parseFloat(irbrowser.Chrome),
sliced: true,
selected: true
}, {
name: "Proprietary or Undetectable",
y: 0.5
}]
}]
Look at the first few lines of your script
Line 1 you stop the PHP interpreter
Line 2 you attempt a line of PHP ??
Line 3 you start the PHP interpreter
Line 4+ you try to output raw HTML while inside a PHP section
?>
$jArray = json_encode($field_data);
<?php
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
Try
$jArray = json_encode($field_data);
?>
<div dir="ltr" id="container"> </div>
<script>
var irbrowser = <?php echo $jArray; ?>;
Related
<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController#graph')}}" autocomplete="off" method="POST">
{{csrf_field()}}
<div class="form-group form-group-default required" >
<label>Date</label>
<input type="date" class="form-control" name="date" required>
</div>
<button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>
Route::get('graph','Chatbot\TrackerController#graph');
I would like to find out if there is a way that i can show the chart based on selected dates as i have a dates column in my database. If there is, how should i do it? I am using highcharts to generate the pie chart.
Below are the function i did in controller and the javascript to generate the chart in the html tag.
HTML and JS in blader file
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [
{
name: 'Percentage',
colorByPoint: true,
data: [{
name: 'Questions Asked',
y: "{!! $question_asked_sum !!}",
sliced: true,
selected: true
}, {
name: 'Low Confidence',
y: "{!! $low_confidence_sum !!}"
}, {
name: 'No Answer',
y: "{!! $no_answer_sum !!}"
}, {
name: 'Missing Intent',
y: "{!! $missing_intent_sum !!}"
}]
}
]
});
});
</script>
<div class="panel-body">
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
</div>
Function in controller
<?php
public function graph() {
$statistics = DiraStatistics::all();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
?>
You need to pass date in your request I'm assuming you are passing it with AJAX here. Since I don't know how you are doing as in your views therefore I'm just adding references for AJAX requests here
NOTE Make sure about Get and Post methods.
Then you will get your date in $request object which you can use like this:
<?php
public function graph(Request $request) {
$statistics = DiraStatistics::where('dateField',$request->date)->all();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
?>
I hope it will work for you!
HTML, JS and Controller
public function graph(Request $request)
{
$statistics = DiraStatistics::where('date_access',$request->date)->get();
$question_asked_sum = $statistics->sum('question_asked');
$low_confidence_sum = $statistics->sum('low_confidence');
$no_answer_sum = $statistics->sum('no_answer');
$missing_intent_sum = $statistics->sum('missing_intent');
return view('AltHr.Chatbot.graph', compact('question_asked_sum', 'low_confidence_sum', 'no_answer_sum', 'missing_intent_sum'));
}
<form id="form-project" role="form" action="{{action('AltHr\Chatbot\TrackerController#graph')}}" autocomplete="off" method="POST">
{{csrf_field()}}
<div class="form-group form-group-default required" >
<label>Date</label>
<input type="date" class="form-control" name="date" required>
</div>
<button class="btn alt-btn-black btn-xs alt-btn pull-right" type="submit">Select</button>
</form>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// Build the chart
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Pie Chart'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
credits: {
enabled: false
},
exporting: {
enabled: false
},
series: [{
name: 'Percentage',
colorByPoint: true,
data: [{
name: 'Questions Asked',
y: {!! $question_asked_sum !!},
sliced: true,
selected: true
}, {
name: 'Low Confidence',
y: {!! $low_confidence_sum !!}
}, {
name: 'No Answer',
y: {!! $no_answer_sum !!}
}, {
name: 'Missing Intent',
y: {!! $missing_intent_sum !!}
}]
}]
});
});
</script>
Hi guys, so currently i have successfully done a function where i can select a date from a form (just one date) and view the data (pie chart). But i want to know how can i make 2 date input to do a "from" and "to" to do a date range to view the data in the chart of the selected dates range for example 1/1/2017 - 5/1/2017 so i can only view the data from the 1st till the 5th.
For get data beetween 2 dates you can use whereBetween function.
Here the documentation:
https://laravel.com/docs/5.5/queries
Example:
Model::whereBetween('field', array($date_start, $date_end))
so in your code something like:
DiraStatistics::whereBetween('date_access',array($request->date, $request->date_end))->get();
I have a chart.html that will show some chart and I try to use echo json_encode to get data from PHP, but the PHP is in different file , How can I define the process.php in order to let chart.html get the data ?
chart.html :
<div id="chart_donut" style="height:350px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart_donut'), theme);
trapchart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
legend: {
x: 'center',
y: 'bottom',
data: <?php echo json_encode($ary, JSON_PRETTY_PRINT);?>
}, ///??????get data from process.php
toolbox: {
show: true,
feature: {
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'center',
max: 1548
}
}
},
restore: {
show: true,
title: "Restore"
},
saveAsImage: {
show: true,
title: "Save Image"
}
}
},
series: [{
name: 'Access to the resource',
type: 'pie',
radius: ['35%', '55%'],
itemStyle: {
normal: {
label: {
show: true
},
labelLine: {
show: true
}
},
emphasis: {
label: {
show: true,
position: 'center',
textStyle: {
fontSize: '14',
fontWeight: 'normal'
}
}
}
},
data: <?php echo json_encode($results, JSON_PRETTY_PRINT);?>
//?????get from process.php
}]
});
</script>
First you need chart.html to be a php file otherwise will not execute php scripts.
Your process.php should be included at the top of this chart.php
;
process.php should have someting like this
//get the data for both arrays
$ary = ..
$results = ...
well im with a problem with a Highchart Graphic. This one -> http://www.highcharts.com/demo/column-basic
I have a database with a table call "Days" and "Works" and i want to put the days that i have in the "categories []" and the work in series[];
BUT
i dont know how my JSON need to be, or the best way to do it is with a JS array
I tried this way:
js_array = new Array(<?php echo implode(',', $array1); ?>);
xAxis: {
categories: js_array,
crosshair: true
},
or just categories:<?php echo json_encode($array1);?>
but dont succeed.
can you help me?
I do this using asp.net (MVC5), but I think is the same idea for php, hope it helps.
<script>
$(function () {
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container'
},
title: {
text: "Client's downloads"
},
subtitle: {
text: 'Click the columns to view products.'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total downloads'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}</b><br/>'
},
series: [{
name: "Downloads",
colorByPoint: true,
data: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text> #item.Name <text>",</text>
<text>y: </text> #item.Downloads <text>,</text>
<text>drilldown: "</text>#item.Name<text>"},</text>
}
]
}],
drilldown: {
series: [
#foreach (var item in Model)
{
<text>{</text>
<text>name: "</text>#item.Name<text>",</text>
<text>id: "</text>#item.Name<text>",</text>
<text>data: [</text>
foreach (var download in item.ProductDownloads)
{
<text>["</text> #download.Product <text>", </text> #download.Downloads <text>],</text>
}
<text>]</text>
<text>},</text>
}
]
}
});
});
</script>
I'm trying to put two Rally charts inside a container to have a control over their layout. Unfortunately, for some reason, it doesn't work.
Plase see the code (the full HTML provided for convinience):
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc3/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function () {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
launch: function () {
//Write app code here
var me = this;
me._createAtTheStartAddedChart();
me._createStateChart();
console.log('chart 1', me._atTheStartAddedChart);
console.log('chart 2', me._stateChart);
me._chartContainer = Ext.create('Ext.Container', {
itemId: 'cont',
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'middle'
}
,
items: [
me._atTheStartAddedChart,
me._stateChart
]
});
me.add(me._chartContainer);
},
_createAtTheStartAddedChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
var chart = me._createChart(series);
me._atTheStartAddedChart = chart;
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
var chart = me._createChart(series);
me._stateChart = chart;
},
_createChart: function (series) {
var chart = Ext.create('Rally.ui.chart.Chart', {
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
return chart;
}
});
Rally.launchApp('CustomApp', {
name:"Random App Name42726",
parentRepos:""
});
});
</script>
</head>
<body>
</body>
</html>
The charts are created successfully, but they are not displayed at all. There is no error related to their display, so I don't even know where to look for the issue.
Maybe someone knows how to put the charts horizontally (I don't really need Ext.Container here, any other container will be fine as well)?
There is also an error Uncaught Highcharts error #16: www.highcharts.com/errors/16 (Highcharts already defined in the page), not sure what's the reason for it as well.
I made those charts display - you may see full app and the screenshot showing both pie charts in this repo.
Here is the js file. The main change was where in the code the chart was added to container. I moved that to _createChart function. Highchart error 16 does not prevent the charts from loading. You may eventually create two containers and add the charts to separate containers, but this works in its simplest form:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
_atTheStartAddedChart: null,
_stateChart: null,
items: [
{
xtype: 'container',
itemId: 'mychart',
columnWidth: 1
}
],
launch: function() {
this._createAtTheStartAddedChart();
this._createStateChart();
},
_createAtTheStartAddedChart: function () {
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'At the Start',
y: 20,
color: '#0CDBE8'
},
{
name: 'Added During Release',
y: 30,
color: '#FFE11A'
}
]
}
];
this._createChart(series);
},
_createStateChart: function () {
var me = this;
var series = [
{
type: 'pie',
name: 'Features',
data: [
{
name: 'Not Completed in Time',
y: 10,
color: '#FFE11A'
},
{
name: 'Completed in Time',
y: 15,
color: '#98C000'
},
{
name: 'Removed from Release',
y: 20,
color: '#EA2E49'
},
{
name: 'Completely Removed',
y: 5,
color: '#3D4C53'
}
]
}
];
this._createChart(series);
},
_createChart: function (series) {
var chartDiv = this.down("#mychart");
chartDiv.add({
xtype: 'rallychart',
chartConfig: {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Release Features'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b>'
},
plotOptions: {
pie: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
}
},
chartData: {
series: series
}
});
}
});