Please help me. this code is amcharts4 i want to custom button my chart but i am using amchart5 please this code convert to amchart5.
Thank You
HTML:
<ul id="chart-selector">
<li class="dropdown-item" data-click="JPG">JPG</li>
<li class="dropdown-item" data-click="PNG">PNG</li>
<li class="dropdown-item" data-click="SVG">SVG</li>
<li class="dropdown-item" data-click="CSV">CSV</li>
<li class="dropdown-item" data-click="JSON">JSON</li>
<li class="dropdown-item" data-click="PDF">PDF</li>
<li class="dropdown-item" data-click="XLSX">XLSX</li>
<li class="dropdown-item" data-click="PRINT">Print</li>
</ul>
<div id="chartdiv"></div>
JS:
$('#chart-selector .dropdown-item').on('click', function(e) {
var format = $(this).data('click');
switch (format) {
case 'CSV':
case 'XLSX':
case 'JSON':
chart.export['to' + format]({}, function(data) {
this.download(data, this.defaults.formats[format].mimeType, "amCharts." + format.toLowerCase());
});
break;
case 'JPG':
case 'PNG':
case 'SVG':
case 'PDF':
chart.export.capture({}, function() {
this['to' + format]({}, function(data) {
this.download(data, this.defaults.formats[format].mimeType, "amCharts." + format.toLowerCase());
});
});
break;
case 'PRINT':
default:
chart.export.capture({}, function() {
this.toPRINT();
});
}
});
please help this code convert to amchart4 to amchart5
Related
If I missed an easy part of whole thing forgive.
I am observing a strange behavior of Laravel Notifications between my local development and my server on Bluehost. On my PC it runs version 5.5 and Bluehost 5.4
I set the database notification and successfully can get them as expected.
<ul class="dropdown-menu list-unstyled msg_list" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No notification</strong>
#endforelse
</li>
</ul>
Then when the user click it triggers a javascript to get the route to update the read_at column in my notification table in the database.
<script type="text/javascript" >
function markPostAsRead(countofNotification){
if(countofNotification !== '0')
$.get('/markasread');
}
</script>
Following is the route
Route::get('/markasread',function(){
auth()->user()->unreadNotifications->first()->markAsRead();
});
Everything went as expected on my local environment.
Once uploaded with all migrations in place, the notifications are shown as expected. However when the user clicks the notification the table does not update.
I checked that the js is working with some alerts on both server and local environment. But I do not understand why the table does not update on my server side.
If you could give me one hint it will really help me.
The notification html is a follows
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div>
<ul class="nav navbar-nav navbar-right">
<li role="presentation" class="dropdown" >
<a href="javascript:;" class="dropdown-toggle info-number" data-toggle="dropdown" aria-expanded="false">
<i class="fa fa-globe"></i>
<span class="badge bg-green">{{count(auth()->user()->unreadNotifications)}}</span>
</a>
<ul class="dropdown-menu list-unstyled msg_list" id="notification" role="menu" onclick="markPostAsRead({{count(auth()->user()->unreadNotifications)}})">
<li>
#forelse (auth()->user()->unreadNotifications as $notification)
#include('layouts.notifications.'.snake_case(class_basename($notification->type)))
#empty
<strong>No Unread Notification</strong>
#endforelse
</li>
</ul>
</li>.
</ul>
</nav>
</div>
</div>
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
$('#notification').on('click', function(e){
e.preventDefault();
var href = this.href;
if(mynotificationcount !== '0') {
$.get('/markasread');
} else {
window.location.href = href;
}
});
</script>
Thanks,
The redirection of the page is faster than the Ajax request to update the table.
you should make the click event trigger the ajax.
<script type="text/javascript" >
$('#notification a').on('click', function(e){
if(countofNotification !== '0') {
$.get('/markasread');
}
});
</script>
if that doesnt work, you will need something more complicated like
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
if(countofNotification !== '0') {
$.get('/markasread')->always(function(){window.location.href = href;});
} else {
window.location.href = href;
}
});
</script>
#N69S
Thank you very much.
I updated the java script a little bit to get around. I named the route and set as follows
<script type="text/javascript" >
var mynotificationcount;
function markPostAsRead(countofNotification){
mynotificationcount= countofNotification;
}
</script>
<script type="text/javascript" >
$('#notification a').on('click', function(e){
e.preventDefault();
var href = this.href;
var url = "{{route('markasread')}}";
if(mynotificationcount !== '0') {
$.get(url).always(function(){window.location.href = href;});
// window.location.href="{{ route('markasread') }}";
} else {
window.location.href = href;
}
});
</script>
I'm working with the new jqwidgets-angular version, released just last month in September.
The gridtree is working great, but having trouble with the tree widget.
FYI: This is based on the angular-tree demo here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxangular/index.htm#demos/jqxangular/tree.htm
Here's the jsfiddle I'm working on, but cannot get tree to render here: tree widget
So two things:
1) Can someone help me get this jsfiddle working ?
2) Can someone help me get the jqx-tree to render using ng-repeat
Here's the code from that jsfiddle.
Just a straight ng-repeat inside a div (no tree widget). This is just for testing purposes:
<div ng-app="App" ng-controller="myController">
<div>
<ul>
<li ng-repeat="kriGroup in kriData">{{kriGroup.group}}</li>
</ul>
</div>
</div>
And here's the jqx-tree directive, which is NOT working in jsfiddle example :
<div ng-controller="myController">
<jqx-tree jqx-width="'300px'" jqx-height="'300px'">
<ul>
<li id='home'>Home</li>
<li item-expanded='true'>Solutions
<ul>
<li>Education</li>
<li>Financial services</li>
<li>Government</li>
<li>Manufacturing</li>
<li>Solutions
<ul>
<li>Consumer photo and video</li>
<li>Mobile</li>
<li>Rich Internet applications</li>
<li>Technical communication</li>
<li>Training and eLearning</li>
<li>Web conferencing</li>
</ul>
</li>
<li>All industries and solutions</li>
</ul>
</li>
<li>Products
<ul>
<li>PC products</li>
<li>Mobile products</li>
<li>All products</li>
</ul>
</li>
<li>Support
<ul>
<li>Support home</li>
<li>Customer Service</li>
<li>Knowledge base</li>
<li>Books</li>
<li>Training and certification</li>
<li>Support programs</li>
<li>Forums</li>
<li>Documentation</li>
<li>Updates</li>
</ul>
</li>
<li>Communities
<ul>
<li>Designers</li>
<li>Developers</li>
<li>Educators and students</li>
<li>Partners</li>
<li>By resource
<ul>
<li>Labs</li>
<li>TV</li>
<li>Forums</li>
<li>Exchange</li>
<li>Blogs</li>
<li>Experience Design</li>
</ul>
</li>
</ul>
</li>
<li>Company
<ul>
<li>About Us</li>
<li>Press</li>
<li>Investor Relations</li>
<li>Corporate Affairs</li>
<li>Careers</li>
<li>Showcase</li>
<li>Events</li>
<li>Contact Us</li>
<li>Become an affiliate</li>
</ul>
</li>
</ul>
</jqx-tree>
</div>
and finally the js controller code :
angular.module('App', ['jqwidgets'])
.controller('myController', function ($scope) {
$scope.kriData = [
{
"group": "99_HSVaR",
"kris": [
{
"kri": "1D"
},
{
"kri": "1D CR"
},
{
"kri": "1D EQ"
},
{
"kri": "1D EUR/USD"
}
]
},
{
"group": "Additive",
"kris": [
{
"kri": "MCS"
}
]
},
{
"group": "AsianCrisis",
"kris": [
{
"kri": "Stressed"
}
]
}
];
})
I found the solution, posted in this jsfiddle: http://jsfiddle.net/robertmazzo/s9snLu9m/3/
My ng-repeat was in the wrong scope. And in addition, there were some key attributes missing such as the jqx-data directive.
For example, as shown in the jsfiddle :
<div ng-app="App" ng-controller="myController">
<jqx-tree jqx-data="kriData" jqx-height="300">
<ul>
<li ng-repeat="kriGroup in data">{{kriGroup.group}}</li>
</ul>
</jqx-tree>
</div>
This is the Div with UL on the webpage.
<div id='sites'>
<ul style="display: block;">
<li data-product-id="55">
Test1<br><em class="environment">Production</em>
</li>
<li data-product-id="99">
Test2<br><em class="environment">Production</em>
</li>
<li data-product-id="98">
Test3<br><em class="environment">Production</em>
</li>
<li data-product-id="61">
Test4<br><em class="environment">Production</em>
</li>
<li data-product-id="97">
Test5<br><em class="environment">Production</em>
</li>
<li class="active">
Test6<br><em class="environment">Production</em> <a class="flat button" href="/product_center">Settings</a>
</li>
</ul>
</div>
The page loads with Test6 ul by-default and I want to click on Test5.
The CSS locator provided by Firepath is "#sites>ul>li>a". So I tried this in casperjs:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
});
casper.start('http://localhost:8080', function() {
this.echo(this.getTitle());
});
casper.then(function(){
casper.page.injectJs('jquery.js');
this.evaluate(function (){
$("#sites>ul>li")[4].click();
});
this.capture('screenshot.png');
});
casper.then(function() {
this.echo(this.getTitle());
});
The title that comes up is always of the current page. It should have clicked on Test5 and fetched the title of the Test5 Page.
What I am doing wrong?
Try #sites .active as the selector
I'd do
this.click('#sites .active') instead of
casper.page.injectJs('jquery.js');
this.evaluate(function ()
{
$("#sites>ul>li")[4].click();
});
edit for comment:
try this then
#sites li:nth-child(5) a
square bracket for JS array returns "object HTMLDivElement"; while .slice() returns array.
click() function normally coming along with array objects.
So your codes should go to:
$("#sites ul li").slice(4,5).click()
I am having a php template where i have a leftmenu as accordin jquery menu. In this menu i had menu items .When i click the menu item, page related to this menu item to be loaded into the div in the right side of the page without refresh.I am giving you the screenshot of the page.
Can anyone help me in this regard,
Thank you in advance
Ramsai
here is the code of left menu.php
<div id="leftmenu">
<div class="urbangreymenu">
<h3 class="headerbar">BREAST</h3>
<ul class="submenu">
**<li><a href="breast.php">Breast/a></li>**
</ul>
<h3 class="headerbar">CVS</h3>
<ul class="submenu">
<li>CHEST PAIN</li>
<li>CHEST PAIN MASTER</li>
<li>DIZZINESS-VERTIGO-LOC</li>
<li>LOCAL-LEG-GENERALISED SWELLING</li>
<li>SHORT OF BREATH(+PND)</li>
</ul>
<h3 class="headerbar">ENT</h3>
<ul class="submenu">
<li>EAR</li>
<li>NOSE</li>
<li>THROAT</li>
</ul>
<h3 class="headerbar">GENERAL</h3>
<ul class="submenu">
<li>FATIGUE-MALAISE</li>
<li>FEVER</li>
<li>SKIN RASH & PRURITIS</li>
</ul>
<h3 class="headerbar">GIT</h3>
<ul class="submenu">
<li>ABDOMINAL DISTENTION</li>
<li>ABDOMINAL PAIN</li>
<li>BLACK STOOLS</li>
<li>CONSTIPATION</li>
<li>DIARRHEA</li>
<li>NAUSEA-VOMITING</li>
</ul>
<h3 class="headerbar">NEUROLOGY</h3>
<ul class="submenu">
<li>APHASIA & SLURRED SPEECH</li>
<li>BALANCE-TREMORS-PARALYSIS</li>
<li>HEADACHE</li>
<li>SEIZURES-MEMORY LOSS-CONFUSION</li>
<li>TINGLING-NUMBNESS</li>
</ul>
<h3 class="headerbar">PULMONARY</h3>
<ul class="submenu">
<li>COUGH</li>
</ul>
</div>
</div>
And here is my loading code:
<div id ="content">
<script>
$.get('breast.php', function(data) {
$('.content').html(data);
});
</script>
</div>
When i click the menu item then the related page should come in that div
Thank you in advance,
Ramsai
$(document).ready(function () {
$('#leftmenu').find('a[href*=".php"]').live('click', function (e) {
e.preventDefault();
$.get($(this).attr('href'), function (data) {
$('.content').html(data);
});
});
//Or
$('#leftmenu').find('a[href*=".php"][class*="MyWebLink"]').live('click', function (e) {
e.preventDefault();
if(!$(this).hasClass('Alreadyloaded')){
var Url = $(this).attr('href');
$.ajax({
url: Url, type: 'Get', dataType: 'json',
//data: { value: $(this).data('value') },
success: function (data) {
$('.content').append(data);
//Or
$('.content').prepend(data);
$(this).addClass('Alreadyloaded');
}
});
}
});
});
What's the problem? Use docs.jquery.com/Ajax
I need a little help on finishing my script that allows the User to confirm their bus reservation. I am using jQuery/Ajax:
allow the User to input a date and location to search the database of available buses
display each result(each bus) in its own div that has the bus info and a button that will send the User to the confirmation page which is in a modal box called ColorBOx
What I want to accomplish:
When the User clicks on the RSVP button, have jquery collect the bus number, date, and location so that I can display the info in the modal box along with a seat selector before they decide to confirm their booking
Once they click on the confirmation button in the modal box, gather the bus info again along with the seat selected and update a bus database
this is index.php:
<script type="text/javascript">
$(document).ready(function() {
$("a, input:submit").button();
$("#date").datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth:true,
changeYear:true,
numberOfMonths:1,
showButtonPanel:true,
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
dateFormat:'yy-mm-dd'
});
$('#search1').submit(function(){
var date = $('#date').val();
var location = $('#location').val();
var datastring = 'date=' + date + '&location=' + location;
$.ajax({
type: "POST",
cache: "true",
url: "search.php",
dataType:"json",
data: datastring,
success: function(data){
$('#main').html('')
for ($i = 0, $j = data.bus.length; $i < $j; $i++) {
if (data.bus[$i].seats > 20)
{
var price = 50
}
else if (data.bus[$i].seats <= 20 && data.bus[$i].seats > 10)
{
var price = 45
}
else
{
var price = 40
}
var html = '<div id="' + data.bus[$i].number + '">';
html += '<div id="bus_num">' + '<b>BUS #</b>' + data.bus[$i].number + '</div>';
html += '<div id="bus_graphic"></div>';
html += '<div id="capacity">' + '<h1>Capacity</h1>' + data.bus[$i].capacity + '</div>';
html += '<div id="time">' + '<h1>Departure</h1>' + data.bus[$i].time + '</div>';
html += '<div id="seats">' + '<h1>Open Seats</h1>' + data.bus[$i].seats + '</div>';
html += '<div id="price">$' + price + '</div>';
html += '<a class="rsvp" href="#rsvp">RSVP</a>';
html += '</div>';
$('#main').append(html);
}
$("a.rsvp").button();
$(".rsvp").colorbox({width:"640px", inline:true, href:"#rsvp"});
}
});
return false;
});
});
</script>
<body>
<div style='display:none'>
<div id='rsvp'>
<?php include("colorbox.php");?>
</div>
</div>
</body>
colorbox.js:
$(document).ready(function() {
// Add click listener to seats
$('#airplane a').click(function()
{
// Asign value of the link target
var thisTarget = $(this).attr('href');
$(thisTarget).addClass('selected');
// Assign the value of the parent <li class="*">
var thisSeat = $(this).parent('li').attr('class');
// Toggle selected class on/off
$(this).toggleClass('selected');
return false;
});
$('#book').click(function ()
{
//collect user and bus information to store in database
});
});
colorbox.php:
<ul id="airplane">
<li class="seat_01 A">01A</li>
<li class="seat_01 B">01B</li>
<li class="seat_01 C">01C</li>
<li class="seat_01 D">01D</li>
<li class="seat_02 A">02A</li>
<li class="seat_02 B">02B</li>
<li class="seat_02 C">02C</li>
<li class="seat_02 D">02D</li>
<li class="seat_03 A">03A</li>
<li class="seat_03 B">03B</li>
<li class="seat_03 C">03C</li>
<li class="seat_03 D">03D</li>
<li class="seat_04 A">04A</li>
<li class="seat_04 B">04B</li>
<li class="seat_04 C">04C</li>
<li class="seat_04 D">04D</li>
<li class="seat_05 A">05A</li>
<li class="seat_05 B">05B</li>
<li class="seat_05 C">05C</li>
<li class="seat_05 D">05D</li>
<li class="seat_06 A">06A</li>
<li class="seat_06 B">06B</li>
<li class="seat_06 C">06C</li>
<li class="seat_06 D">06D</li>
<li class="seat_07 A">07A</li>
<li class="seat_07 B">07B</li>
<li class="seat_07 C">07C</li>
<li class="seat_07 D">07D</li>
<li class="seat_08 A">08A</li>
<li class="seat_08 B">08B</li>
<li class="seat_08 C">08C</li>
<li class="seat_08 D">08D</li>
<li class="seat_09 A">09A</li>
<li class="seat_09 B">09B</li>
<li class="seat_09 C">09C</li>
<li class="seat_09 D">09D</li>
<li class="seat_10 A">10A</li>
<li class="seat_10 B">10B</li>
<li class="seat_10 C">10C</li>
<li class="seat_10 D">10D</li>
<li class="seat_11 A">11A</li>
<li class="seat_11 B">11B</li>
<li class="seat_11 C">11C</li>
<li class="seat_11 D">11D</li>
<li class="seat_12 A">12A</li>
<li class="seat_12 B">12B</li>
<li class="seat_12 C">12C</li>
<li class="seat_12 D">12D</li>
<li class="seat_13 A">13A</li>
<li class="seat_13 B">13B</li>
<li class="seat_13 C">13C</li>
<li class="seat_13 D">13D</li>
<li class="seat_14 A">14A</li>
<li class="seat_14 B">14B</li>
<li class="seat_14 C">14C</li>
<li class="seat_14 D">14D</li>
<li class="seat_15 A">15A</li>
<li class="seat_15 B">15B</li>
<li class="seat_15 C">15C</li>
<li class="seat_15 D">15D</li>
<li class="seat_16 A">16A</li>
<li class="seat_16 B">16B</li>
<li class="seat_16 C">16C</li>
<li class="seat_16 D">16D</li>
<li class="seat_17 A">17A</li>
<li class="seat_17 B">17B</li>
<li class="seat_17 C">17C</li>
<li class="seat_17 D">17D</li>
<li class="seat_18 A">18A</li>
<li class="seat_18 B">18B</li>
<li class="seat_18 C">18C</li>
<li class="seat_18 D">18D</li>
<li class="seat_19 A">19A</li>
<li class="seat_19 B">19B</li>
<li class="seat_19 C">19C</li>
<li class="seat_19 D">19D</li>
<li class="seat_20 A">20A</li>
<li class="seat_20 B">20B</li>
<li class="seat_20 C">20C</li>
<li class="seat_20 D">20D</li>
<li class="seat_21 A">21A</li>
<li class="seat_21 B">21B</li>
<li class="seat_21 C">21C</li>
<li class="seat_21 D">21D</li>
<li class="seat_22 A">22A</li>
<li class="seat_22 B">22B</li>
<li class="seat_22 C">22C</li>
<li class="seat_22 D">22D</li>
<li class="seat_23 A">23A</li>
<li class="seat_23 B">23B</li>
<li class="seat_23 C">23C</li>
<li class="seat_23 D">23D</li>
<li class="seat_24 A">24A</li>
<li class="seat_24 B">24B</li>
<li class="seat_24 C">24C</li>
<li class="seat_24 D">24D</li>
<li class="seat_25 A">25A</li>
<li class="seat_25 B">25B</li>
<li class="seat_25 C">25C</li>
<li class="seat_25 D">25D</li>
</ul>
<!-- end #airplane -->
<p>
<input type="submit" value="Save" class="button" id="book" />
</p>
</div>
I think that I need to create a function that assigns an id or class to each successful search result and then create another function that will handle passing the variables to the confirmation page. Please help! this is crucial. Thanks ahead of time.
You can collect the information just using simple ID selectors like so:
$('#bus_num')
$('#time')
$('#seats')
//etc
Then you can utilise the .text or .html methods to put this information into a modal box, possibly boxy plugin is an option here.
Then when you go to submit the values to pass onto your database for updating, again using the information from the selectors, format this into an object and pass onto your ajax function. jQuery will automatically sanitize and convert to a query string:
var post_details = {
'bus_num': $('#bus_num').text(),
'time': $('#time').text()
};
$.post('/confirm_booking', post_details, [....]);