'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
this.state={checked: false}
//this.handleCheckedChange = this.handleCheckedChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.formContent = this.display1();
}
handleSubmit(event) {
alert('Your information is: ' + JSON.stringify(this.formContent) + " " + "Please Make Sure To Select From One of The Vacation Options and Activities From Below");
event.preventDefault();}
NumberList1(props) {
let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
type: "checkbox",
value: "1",
onChange: () => this.setState({checked: true}),
defaultChecked: false
}))
return (
listItems
)
}
display1(){
let props = [{id: 0, text: "City Tours", completed: false},
{id: 1, text: "Sports", completed: false},
{id: 2, text: "Cycling", completed: false},
{id: 3, text: "Museums", completed: false},
{id: 4, text: "Boating", completed: false}];
let listItems = props.map((item) => this.NumberList1({
key: props.id,
item: item}));
return(React.createElement("div", {}, listItems));
}
render() {
//if(this.state.liked == true){
//;}
//'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",
return (React.createElement("form", {onSubmit: this.handleSubmit, action: 'http://localhost/test.php', method: "get",
className: "todo-list"
},"Select Activities From Below", (this.formContent),React.createElement("br", {}),
React.createElement("input", {type:"submit", value: "Submit"}),
React.createElement("input", {type:"reset", value: "Reset"})))
}
}
const domContainer = document.getElementById("new");
ReactDOM.render(
(e(LikeButton)),
domContainer);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>
<meta name="travel">
<link rel="stylesheet" type="text/css" href="stylecontact.css">
<title> Mega Travel</title>
</head>
<nav class="one">
<img class="logo" src="images/mega travel logo.png" alt="Mega Travel Logo" style="width:20%"/>
<hr style="border: 12px solid lightgray;" />
</nav>
<nav class="two">
<a class="home" href="#" >Home </a>
<a class="about" href="#" > About Us </a>
<a class="agent" href="#"> Contact Agent </a>
</nav>
<body>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<div id= "formfind" style="width: max-content;">
<script src="../src/FormFind.js"></script>
<table>
<tr>
<th> Please Check Our Activities For Each Destination:</th>
</table>
<div>
<span id="new">
<script src="../src/NewZealand.js"></script>
</span>
</div>
</div>
</body>
</html>
I am trying to show what users checked from a list of activities on my /test.php page. However, I keep only getting Array () 1 to show. I can get another page which inputs texts to show properly but I think I am missing something important with the checkboxes but I can't seem to pinpoint what that is. Any help would be apprecaited
const e = React.createElement;
class LikeButton extends React.Component {
constructor(props) {
super(props);
this.state = { liked: false };
this.state={checked: false}
//this.handleCheckedChange = this.handleCheckedChange.bind(this);
//this.handleSubmit = this.handleSubmit.bind(this);
this.formContent = this.display1();
}
NumberList1(props) {
let listItems = React.createElement("p", {key: props.id}, props.item.text, React.createElement("input", {
type: "checkbox",
value: "1",
onChange: () => this.setState({checked: true}),
defaultChecked: false
}))
return (
listItems
)
}
display1(){
let props = [{id: 0, text: "City Tours", completed: false},
{id: 1, text: "Sports", completed: false},
{id: 2, text: "Cycling", completed: false},
{id: 3, text: "Museums", completed: false},
{id: 4, text: "Boating", completed: false}];
let listItems = props.map((item) => this.NumberList1({
key: props.id,
item: item}));
return(React.createElement("div", {}, listItems));
}
render() {
//if(this.state.liked == true){
//;}
//'button',{ onClick: () => this.setState({ liked: true }) },"New Zealand",
return (React.createElement("form", {action: 'http://localhost/test.php', method: "get",
className: "todo-list"
},"Select Activities From Below", (this.formContent),React.createElement("br", {}),
React.createElement("input", {type:"submit", value: "Submit"}),
React.createElement("input", {type:"reset", value: "Reset"})))
}
}
const domContainer = document.getElementById("new");
ReactDOM.render(
(e(LikeButton)),
domContainer);
This is test.php code
<head>
</head>
<body>
<?php
echo print_r($_GET);
?>
</body>
</html>
Here is html
<html lang="en">
<head>
<meta charset = "utf-8" name = "viewport" content="width= device-width, initial-scale=1"/>
<meta name="travel">
<link rel="stylesheet" type="text/css" href="stylecontact.css">
<title> Mega Travel</title>
</head>
<body>
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>-->
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<table>
<tr>
<th> Please Check Our Activities For Each Destination:</th>
</table>
<div>
<span id="new">
<script src="../src/NewZealand.js"></script>
</span>
</div>
</body>
</html>
Related
I'm trying to implement Fullcalendar timeline feature to show which meeting room is booked. I want to show who booked the room and what the meeting is about but currently I haven't been able to show who booked the room. In my database I have "name" columns as well additionally to "title". I want to know How I can show the name in front of the title with a space in between.
My code looks like this.
<head>
<meta charset='utf-8' />
<link href="{{ asset('/css/main.css') }}" rel="stylesheet">
<script src="{{ asset('/js/main.js') }}"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<h1></h1>
<div id='calendar'></div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'en',
scrollTime: '00:00',
editable: true,
selectable: true,
aspectRatio: 1.8,
headerToolbar: {
left: 'today prev,next',
center: 'title',
right: 'myCustomButton'
},
initialView: 'resourceTimelineThreeDays',
views: {
resourceTimelineThreeDays: {
type: 'resourceTimeline',
duration: {
days: 31
},
buttonText: '31 days'
}
},
resourceAreaHeaderContent: 'Conference Room',
resources: [{
id: 'a',
title: 'A'
},
{
id: 'b',
title: 'B',
},
{
id: 'c',
title: 'C',
},
{
id: 'd',
title: 'D',
},
],
dateClick: function(date, event, view) {
$('#start').val(date);
$('#end').val(date);
$('#dialog').dialog({
title: 'Add Event',
width: 600,
height: 600,
modal: true,
})
},
events: "{{route('allEvent')}}"
});
calendar.render();
});
</script>
</body>
</html>
view
Any help would be appreciated as I have tried multiple methods with no success.
Thank you in advance.
To display both the name and title in the FullCalendar timeline view you should update the events property to map each event object and concatenate the name and title properties into a single string separated by a space. And here you go :
events: function(info, successCallback, failureCallback) {
$.ajax({
url: "{{route('allEvent')}}",
success: function(result) {
// Map the event objects to include both the name and title
var events = result.map(function(event) {
return {
id: event.id,
resourceId: event.resourceId,
title: event.name + ' ' + event.title, // Concatenate name and title
start: event.start,
end: event.end
};
});
successCallback(events);
},
error: function(error) {
failureCallback(error);
}
});
}
I extract data from my mysqli db into JSON file like this.:
<?php
session_start();
include_once("../config.php");
$Name13 = $_SESSION['RNaam'];
$conn = new mysqli($servername ,$username, $password, $db);
$sqli = "SELECT * FROM metingen where Id > '20000' and Lijn ='Lijn 2' and FlakeType1 ='FLK PE DSD329 0216 P2S2' AND KleurL BETWEEN '60'AND '80' ORDER BY Id asc";
$result2 = mysqli_query($conn, $sqli);
//$rows = array();
$rows['metingen'] = 'metingen';
$rows['Datum'] = 'Datum';
while($r1 = mysqli_fetch_array($result2)) {
$rows['data'][] = $r1['Datum'];
$rows['data'][] = $r1['KleurL'];
}
$result2 = array();
//array_push($result2,$data);
array_push($result2,$rows);
print json_encode($result2, JSON_NUMERIC_CHECK);
$conn->close();
?>```
The result of my JSON looks like this.:
[{"metingen":"metingen","Datum":"Datum","data":["17-1-2022",77.42,"17-1-2022",77.46,"17-1-2022",75.71,"17-1-2022",78.37,"18-1-2022",78.86,"18-1-2022",78.41,"18-1-2022",76.51,"18-1-2022",76.03,"18-1-2022",75.48,"18-1-2022",75.6,"18-1-2022",75.25,"18-1-2022",76.53,"18-1-2022",78.01,"18-1-2022",77.63,"18-1-2022",78.51,"18-1-2022",78.67,"19-1-2022",76.16,"19-1-2022",75.38,"19-1-2022",75.55,"19-1-2022",73.71,"19-1-2022",76.91,"19-1-2022",77.25,"19-1-2022",78,"19-1-2022",77.81,"19-1-2022",77.65,"22-1-2022",77.21,"22-1-2022",76.97,"22-1-2022",77.43,"22-1-2022",78.08,"22-1-2022",75.76,"22-1-2022",76.12,"23-1-2022",76.07,"23-1-2022",76.32,"23-1-2022",77.43,"23-1-2022",77.97,"23-1-2022",78.03,"23-1-2022",77.86,"23-1-2022",76.41,"23-1-2022",76.69,"23-1-2022",76.44,"23-1-2022",76.4,"24-1-2022",76.2,"24-1-2022",75.97,"24-1-2022",76.85,"24-1-2022",76.2,"24-1-2022",77.56,"1-2-2022",74.88.......```
The page with highcharts looks like this.:
<!DOCTYPE HTML>
<?php
session_start();
?>
<script>
window.onload = function() {
if(!window.location.hash) {
window.location = window.location + '#loaded';
window.location.reload();
}
}
</script>
<html>
<head>
<?php
echo '<!-- <meta http-Equiv="Cache-Control" Content="no-cache"> -->';
echo '<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">';
echo '<meta http-Equiv="Pragma" Content="no-cache">';
echo '<meta http-Equiv="Expires" Content="0">';
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Grafiek</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/data.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<script src="https://code.highcharts.com/stock/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
$.getJSON("datatest01112022.php", function(json) {
/*options.series[0].name = json[0]['Reg_sample'];
options.series[0].data = json[0]['KleurL'];*/
chart = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'line',
marginRight: 130,
marginBottom: 100
},
title: {
text: 'Gemeten L* waarde van Prep 2 bij Extrusie 2',
x: -20 //center
},
subtitle: {text: '',x: -20},
xAxis: { title: {
text: 'Datum'
}},
yAxis: {
title: {
text: 'KleurL'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
//return '<b>'+ this.series.name +'</b><br/>'+
return '<b>Meetwaarden</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0},
yAxis: {
plotLines: [{value: 70,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Minimum'}},
{value: 80,color: 'red',dashStyle: 'longdashdot',width: 2,label: {text: 'Maximum'}},
{value: 75,color: 'green',dashStyle: 'shortdash',width: 2,label: {text: 'Richtlijn' },
}]
},
series: json,
});
});
});
});
</script>
</head>
<body>
<div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"> </div>
<!--<script src="highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>-->
</body>
</html>```
Why dosn't plot the highcharts the values and put the date/time into the x-axis in the line, but if i remove the date/time from my JSON file it works?
Can anybody solve my problem?
You need to adapt your data to the format required by Highcharts. In your case, it can be an array of arrays, each with two values.
data: [
[0, 1],
[1, 2],
[2, 8]
]
You should do that in your php script, but you can also use JS part:
const processedData = [];
for (let i = 0; i < json[0].data.length; i += 2) {
processedData.push([json[0].data[i], json[0].data[i + 1]]);
}
json[0].data = processedData;
Live demo: http://jsfiddle.net/BlackLabel/35cem86h/
API Reference: https://api.highcharts.com/highcharts/series.line.data
When I try to add pagination with limit of 5 products on each page maximum, it only show 5 products but next and previous page is not working. I think something is collapsing with jQuery script. How can I add pagination to this.
I am using this script:
$(document).ready(function(){
filter_data();
function filter_data()
{
$('.filter_data').html('<div id="loading" style="" ></div>');
var action = 'fetch_data';
var minimum_price = $('#hidden_minimum_price').val();
var maximum_price = $('#hidden_maximum_price').val();
var brand = get_filter('brand');
var ram = get_filter('ram');
var storage = get_filter('storage');
$.ajax({
url:"fetch_data.php",
method:"POST",
data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, ram:ram, storage:storage},
success:function(data){
$('.filter_data').html(data);
}
});
}
function get_filter(class_name)
{
var filter = [];
$('.'+class_name+':checked').each(function(){
filter.push($(this).val());
});
return filter;
}
$('.common_selector').click(function(){
filter_data();
});
$('#price_range').slider({
range:true,
min:1000,
max:65000,
values:[1000, 65000],
step:500,
stop:function(event, ui)
{
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
$('#hidden_minimum_price').val(ui.values[0]);
$('#hidden_maximum_price').val(ui.values[1]);
filter_data();
}
});
});
And in fetch_data page I'm passing the result to index page as echo $output.
here check this pagination i create using Bootstrap and Jquery maybe it will help you.
but for your question maybe it's be it's better to create a SandBox or JsFiddle so i can help you with.
// https://reqres.in/api/users
$(document).ready(function (){
var users = {
content: $('#tableContent'),
pagination: $('ul.pagination'),
currentPage: 1,
maxPage: null,
init: function () {
const self = this;
this.fetchData();
this.pagination.on('click','li', function () {
self.handlePagination($(this).data('page'));
})
},
fetchData: function () {
const self = this;
return $.ajax({
url: "https://reqres.in/api/users?per_page=3&page=" + self.currentPage,
type: "GET",
beforeSend: function () {
self.showToDom(`<p>Loading ...</p>`)
},
success: function(response){
// update maxPage
self.maxPage = response.total_pages;
const Template = self.createFragment(response);
self.showToDom(Template);
}
});
},
showToDom: function (dom) {
this.content.empty().append(dom);
},
handlePagination: function (info) {
if ( info === "next" ) {
this.handleNext();
} else if ( info === "prev" ) {
this.handlePrev();
} else {
this.handlePage(info);
}
},
handleNext: function () {
this.currentPage++;
if ( this.currentPage > this.maxPage ) this.currentPage = this.maxPage;
this.fetchData();
},
handlePrev: function (){
this.currentPage--;
if ( this.currentPage <= 0 ) this.currentPage = 0;
this.fetchData();
},
handlePage: function (num) {
this.currentPage = num;
this.fetchData()
},
createFragment: function (res) {
console.log('pagination response', res);
let body = ``;
res.data.forEach(function (item) {
body += `
<tr>
<th scope="row">
<img src=${item.avatar}>
</th>
<td>${item.first_name}</td>
<td>${item.last_name}</td>
<td>${item.email}</td>
</tr>
`;
})
return body;
}
};
// init the Object
users.init();
})
.content {
display: block;
min-height: 500px;
}
.navigation {
width: 100%;
}
img {
width:40px;
height: 40px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<div class="content">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item" data-page="prev"><a class="page-link" href="#">Previous</a></li>
<li class="page-item" data-page="1"><a class="page-link" href="#">1</a></li>
<li class="page-item" data-page="2"><a class="page-link" href="#">2</a></li>
<li class="page-item" data-page="3"><a class="page-link" href="#">3</a></li>
<li class="page-item" data-page="next"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="index.js"></script>
</html>
I want to dispay in a bar graph the days and the quantity.
I have following json output.(data.php) for each day the quantity.
[{"day":"2017-11-15","quantity":"72"},{"day":"2017-11-16","quantity":"157"},{"day":"2017-11-17","quantity":"130"},{"day":"2017-11-18","quantity":"91"},{"day":"2017-11-19","quantity":"96"}]
output.html
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
and thats the app.js
$(document).ready(function(){
$.ajax({
url: "data.php",
method: "GET",
success: function(data) {
console.log(data);
var day = [];
var quantity = [];
for(var i in data) {
day.push(data[i].day);
quantity.push(data[i].quantity);
}
var chartdata = {
labels: day,
datasets : [
{
label: 'DAYS',
backgroundColor: 'rgba(200, 200, 200, 0.75)',
borderColor: 'rgba(200, 200, 200, 0.75)',
hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
hoverBorderColor: 'rgba(200, 200, 200, 1)',
data: quantity
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
but it's always empty. but why? Any idea? Also instead of the day theres only undefined on the bottom line.
Here is the main idea
data.forEach(function(packet) {
labelsData.push(packet.day);
datasetData.push(parseFloat(packet.quantity));
});
for example
var dataJSON = [{
"day": "2017-11-15",
"quantity": "72"
}, {
"day": "2017-11-16",
"quantity": "157"
}, {
"day": "2017-11-17",
"quantity": "130"
}, {
"day": "2017-11-18",
"quantity": "91"
}, {
"day": "2017-11-19",
"quantity": "96"
}];
var labelsData = [];
var datasetData = [];
dataJSON.forEach(function(packet) {
labelsData.push(packet.day);
datasetData.push(parseFloat(packet.quantity));
});
var chartdata = {
type: 'bar',
data: {
labels: labelsData,
datasets: [{
label: 'DAYS',
data: datasetData
}]
}
}
Working JSFiddle
https://jsfiddle.net/4v3nt7sL/1/
no plan why it's empty for me..
my database output is correct it think!
data.php
[{"day":"15","quantity":"72"},{"day":"16","quantity":"157"},{"day":"17","quantity":"130"},{"day":"18","quantity":"91"},{"day":"19","quantity":"96"},{"day":"20","quantity":"129"},{"day":"21","quantity":"140"},{"day":"22","quantity":"141"}]
index.html
<!DOCTYPE html>
<html>
<head>
<title>a simple chart</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<div id="chart-container">
<canvas id="mycanvas"></canvas>
</div>
<!-- javascript -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
app.js
$.ajax({
type: 'POST',
url: 'data.php',
success: function (data) {
lineChartData = JSON.parse(data); //parse the data into JSON
var ctx = document.getElementById("mycanvas").getContext("2d");
var myLineChart = new Chart(ctx, {
type: 'line',
data: lineChartData
});
}
});
I am actually trying to do exactly what has been done in this example "http://jsfiddle.net/BrLp7/" but unfortunately not able to perform this task when retrieving data from csv file. Below is my code which doesn't output anything and when we click on a point in a given example the resulting graph has to be stored in some text file in this form 5,10,13 if last point was clicked.
<html>
<head>
<title>A BASIC HTML FORM</title>
</head>
<body>
<FORM NAME ="form1" METHOD ="POST" ACTION = "BasicForm.php">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>
<!--[if IE]>
<script type="text/javascript" src="../js/excanvas.compiled.js"></script>
<![endif]-->
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'line'
},
title: {
text: 'Input'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Units'
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var x=this.series.processedXData.indexOf(this.x);
var items = line.split(',');
seriesData =[];
$.each(items, function(itemNo, item) {
if (itemNo < x) {
seriesData.push(parseFloat(item));
} else if (itemNo == x){
seriesData.push(0);
}
});
}
this.series.setData(seriesData);
}
}
}
},
series: []
};
$.get('testFile.csv', function(data) {
// Split the lines
var lines = data.split('\n');
$.each(lines, function(lineNo, line) {
var items = line.split(',');
var series = {
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item)); });
options.series.push(series);
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<!-- 3. Add the container -->
<div id="container" style="width: 1400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
</FORM>
</body>
</html>