this is how official demo looks:
this is mine:
the button at top of the grid is not verticaly centered,the paging bar at bottom of my gird also looks ugly.
my code html :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" media="screen" href="style.css" type="text/css" />
<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" />
<style type="text/css">
body{font-size:11px}
.omnigrid div.fbutton .add {
background:transparent url(images/add.png) no-repeat scroll left center;
}
</style>
<script type="text/javascript" src="mootools-1.2.1.js"></script>
<script type="text/javascript" src="mootools-1.2-more.js"></script>
<script type="text/javascript" src="omnigrid.js"></script>
<script type="text/javascript" src="demo.js"></script>
</head>
<body>
<div style="border:1px solid #cde;padding:25px 25px 25px 25px">
<div id="mygrid"></div>
</div>
</body>
my code javascript :
function onGridSelect(evt) {
var str = 'row: ' + evt.row + ' indices: ' + evt.indices;
str += ' id: ' + evt.target.getDataByRow(evt.row).id;
alert(str);
}
function gridButtonClick(button, grid) {
alert(button);
}
var cmu = [ {
header : "ID",
dataIndex : 'help_category_id',
dataType : 'number'
}, {
header : "Parent ID",
dataIndex : 'parent_category_id',
dataType : 'number',
width : 50
}, {
header : "Name",
dataIndex : 'name',
dataType : 'string',
width : 200
} ];
window.addEvent("load", function() {
datagrid = new omniGrid('mygrid', {
columnModel : cmu,
buttons : [ {
name : 'Add',
bclass : 'add',
onclick : gridButtonClick
}, {
name : 'Delete',
bclass : 'delete',
onclick : gridButtonClick
}, {
separator : true
}, {
name : 'Duplicate',
bclass : 'duplicate',
onclick : gridButtonClick
} ],
url : "data.jsp?" + Math.random(),
perPageOptions : [ 10, 20, 50, 100, 200 ],
perPage : 10,
page : 1,
pagination : true,
serverSort : true,
showHeader : true,
alternaterows : true,
sortHeader : false,
resizeColumns : true,
multipleSelection : true,
// uncomment this if you want accordion behavior for every row
/*
accordion:true,
accordionRenderer:accordionFunction,
autoSectionToggle:false,
*/
width : 600,
height : 220
});
datagrid.addEvent('click', onGridSelect);
$$(".omnigrid .pDiv").each(e,function (){
e.setStyle('font-size','11px');
});
});
It look like a css line-height problem. Use Chrome's Web Inspector (View > Developer > Web inspector), click on the magnifying glass and select the table header. Check the line-height property. Is it any different from the omnigrid demo?
For a quick dirty fix add:
.omnigrid {
line-height: 120% !important;
}
sorry guys, the problem is caused by myself, I zoomed out the page in google chrome
Related
I am using flask to develop my website and i often have to use graph to display data, so I'd like to have a route that display a graph and then use it as a template. The way I found to do it is the following:
Two html files : tender.html and template.html with the first one used as the file to display to the user and the second one used as a template for graph that can be re-used in other routes
template.html :
<!DOCTYPE html>
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels#2.0.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js" integrity="sha512-UXumZrZNiOwnTcZSHLOfcTs0aos2MzBWHXOHOuB0J/R44QB0dwY5JgfbvljXcklVf65Gc4El6RjZ+lnwd2az2g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.2.1/chartjs-plugin-zoom.min.js" integrity="sha512-klQv6lz2YR+MecyFYMFRuU2eAl8IPRo6zHnsc9n142TJuJHS8CG0ix4Oq9na9ceeg1u5EkBfZsFcV3U7J51iew==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="chart-container" style=""><canvas id="myChart-1"></canvas></div>
<div>div-test</div>
<script>
const dataset_1 = [{
label: "Spread of ",
type: 'line',
backgroundColor: "blue",
order : 3,
pointRadius:0,
borderWidth: 1,
borderWidth: 1,
borderColor:"blue",
data: {{ data | safe }},
yAxisID: 'y'
},
];
const data_1 = {
labels: {{ label | safe }},
datasets : dataset_1
};
const zoomOptions = {
animations: false,
tranistions: false,
pan: {
enabled: true,
mode: 'x',
},
zoom: {
wheel: {
enabled: true,
},
drag: {
enabled: true,
modifierKey: 'ctrl',
},
mode: 'x',
onZoomComplete({chart}) {
// This update is needed to display up to date zoom level in the title.
// Without this, previous zoom level is displayed.
// The reason is: title uses the same beforeUpdate hook, and is evaluated before zoom.
chart.update('none');
}
}
};
const config_1 = {
data: data_1,
options: {
animations:false,
transitions:false,
responsive: true,
interaction: {
},
stacked: false,
plugins: {
zoom : zoomOptions,
title: {
display: true,
text: "bla bla"
}
},
scales: {
y: {
type: 'linear',
display: true,
position: 'left',
borderWidth : 0.001,
},
x: {
display: true,
grid :{
display:false
},
},
},
},
};
const myChart_1 = new Chart(document.getElementById('myChart-1'),config_1);
</script>
tender.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
{% autoescape false %}
{{template}}
{% endautoescape %}
</body>
</html>
The route in my flask app that "join" the two files
#app.route('/test')
def test():
template = render_template('template.html',data=[2,4,1,9,5,2],label=[0,1,2,3,4,5])
return render_template('tender.html', template=template)
Obviously this solution is completely fine but i thought that render_template was meant to only be used with return, at the end of routes so i was wondering wether there was a more natural or prettier way to do the job. I was thinking there was as i have to use autoescape on my template variable to have my stuff rendered.
Thanks for your help already and I can clarify my point if it isn't clear enough !
I'm having trouble figuring out how to specify my Longitude and latitude for use in a timemap. This is my JSON:
[{"lon":"106.78185","title":"ZAKI","start":"2016-05-25","description":"OPERATION","Id":1,"lat":-6.2206087,"timeStart":"18:00:00"}]
And below is the HTML file I'm working with.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TESTER</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKey&sensor=false"></script> <script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script> <script type="text/javascript" src="lib/timeline-2.3.0.js"></script> <script type="text/javascript" src="lib/timeline-1.2.js"></script> <script type="text/javascript" src="src/timemap.js"></script> <script type="text/javascript" src="timemap_full.pack.js"></script> <script type="text/javascript" src="src/loaders/json.js"></script> <script type="text/javascript" src="src/loaders/progressive.js" ></script>
<script type="text/javascript">
var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["rows"]
}
loader.transform = function(data) {
return {
"title" : data.title,
"start" : data.date,
"options" : {
"description" : data.description
},
"point": {
"lat" : data.Lat,
"lon" : data.Lon
}
};
};
return loader;
};
// <!--start loading data-->
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
title: "Tacking OPS",
type: "json",
options: {
// json file
method:'GET',
url: "getDataTracking",
error: errFn
}
}
],
bandIntervals: [
// Timeline.DateTime.DAY,
// Timeline.DateTime.WEEK
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
]
});
});
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="help">
<h1>TIME MAPS CSA</h1>
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>TESTER</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKey&sensor=false"></script>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script> <script type="text/javascript" src="lib/timeline-2.3.0.js"></script> <script type="text/javascript" src="lib/timeline-1.2.js"></script>
<script type="text/javascript" src="src/timemap.js"></script>
<script type="text/javascript" src="timemap_full.pack.js"></script> <script type="text/javascript" src="src/loaders/json.js"></script>
<script type="text/javascript" src="src/loaders/progressive.js" ></script>
<script type="text/javascript">
var tm;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
$(function() {
TimeMap.loaders.custom = function(options) {
var loader = new TimeMap.loaders.remote(options);
loader.parse = JSON.parse;
loader.preload = function(data) {
return data["rows"]
}
loader.transform = function(data) {
return {
"title" : data.title,
"start" : data.date,
"options" : {
"description" : data.description
},
"point": {
"lat" : data.Lat,
"lon" : data.Lon
}
};
};
return loader;
};
// <!--start loading data-->
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
title: "Tacking OPS",
type: "json",
options: {
// json file
method:'GET',
url: "getDataTracking",
error: errFn
}
}
],
bandIntervals: [
// Timeline.DateTime.DAY,
// Timeline.DateTime.WEEK
Timeline.DateTime.DAY,
Timeline.DateTime.MONTH
]
});
});
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="help">
<h1>TIME MAPS CSA</h1>
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body> </html>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body> </html>
this my servlet code
for (int i = 0; i < listDataTracking.size(); i++) {
org.json.simple.JSONObject obj = new org.json.simple.JSONObject();
EntityTracking dataTracking = listDataTracking.get(i);
if (dataTracking.getIdTracking() == null) {
obj.put("Id", "");
} else {
obj.put("Id", dataTracking.getIdTracking());
// writer.print(dataTracking.getIdTracking());
}
if (dataTracking.getTglSend() == null) {
obj.put("start", "");//tanggal
} else {
obj.put("start", sdf.format(dataTracking.getTglSend()));
// writer.print(sdf.format(dataTracking.getTglSend()));
}
if (dataTracking.getJamSend() == null) {
obj.put("jamstart", "");
} else {
obj.put("jamstart", dataTracking.getJamSend());
// writer.print(dataTracking.getJamSend());
}
if (dataTracking.getUser_name().getUserName() == null) {
obj.put("title", "");
} else {
obj.put("title", dataTracking.getUser_name().getUserName().toUpperCase());
// writer.print(dataTracking.getUser_name().getUserName());
}
if (dataTracking.getUser_name().getRoleName() == null) {
obj.put("description", "");
} else {
obj.put("description", dataTracking.getUser_name().getRoleName().toUpperCase());
// writer.print(dataTracking.getUser_name().getUserName());
}
if (dataTracking.getGetLatitude() == null) {
obj.put("lat", "");
} else {
//
obj.put("lat", dataTracking.getGetLatitude());
}
if (dataTracking.getGetLongitude() == null) {
obj.put("lon", "");
} else {
//
obj.put("lon", dataTracking.getGetLongitude());
}
arrayObj.add(obj);
}
My new HTML file
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!-- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>-->
<title>~:. TimeMaps .:~</title>
<link rel="shortcut icon" href="images/csalogo.ico" type="image/x-icon"/>
<!--
<script async defer src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
-->
<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
<!-- <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyBTquZF3N7wt_qze9l02cX8MSAkUEvBpuE&sensor=false"></script>-->
<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>-->
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
-->
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="lib/mxn/mxn.js?(googlev3)"></script>
<script type="text/javascript" src="lib/timeline-1.2.js"></script>
<script src="src/timemap.js" type="text/javascript"></script>
<script src="src/timemap.js" type="text/javascript"></script>
<script src="src/loaders/json.js" type="text/javascript"></script>
<script src="src/loaders/progressive.js" type="text/javascript"></script>
<!-- <script src="src/ext/circle_icons.js" type="text/javascript"></script>-->
<!-- source
http://www.vermontelectric.coop/custom/timemap/docs/symbols/TimeMap.loaders.json.html
http://www.ibiblio.org/tamil/maps/docs/symbols/TimeMap.loaders.jsonp.html#constructor
http://stackoverflow.com/questions/26683375/loading-json-into-timemap
https://groups.google.com/forum/#!topic/timemap-development/MNjFbvMY42w
http://www.gps-coordinates.net/
http://en.marnoto.com/2014/04/converter-coordenadas-gps.html
https://developers.google.com/maps/documentation/javascript/examples/#basics
http://geekswithblogs.net/bosuch/archive/2011/10/05/converting-decimal-degrees-to-degreesminutesseconds-astronomy-with-your-personal-computer.aspx
http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each
http://jsfiddle.net/5pjha/
-->
<script type="text/javascript">
var tm;
var isi_url ="getDataTrackingServlet";
var isi_jon, lon,lat,title,start,jamstart,description,theme;
var errFn = function(jqXHR, textStatus, errorThrown){
alert(textStatus);
}
// $(function() {
$(function() {
$.getJSON(isi_url, function (json) {
$.each(json.results, function(i, item) {
lat = item.lat;
lon = item.lon;
title = item.title;
start = item.start;
description = item.description;
jamstart = item.jamstart;
theme = item.theme;
// })
console.log('Latitude : ',i, lat);
console.log('Longitude : ',i, lon);
console.log('title : ',i, title);
console.log('start : ',i, start);
console.log('description : ',i, description);
console.log('jamstart : ',i, jamstart);
console.log('theme : ',i, theme);
tm = TimeMap.init({
mapId: "map", // Id of map div element (required)
timelineId:"timeline", // Id of timeline div element (required)
options: {
mapType: "physical",
eventIconPath: "/TimeMaps/images/"
},
datasets: [
{
// id:"trackingOPs",
title: "Tacking OPS",
//type:"basic","json"
type: "basic",
options: {
// method:'GET',
// url: isi_url,
// "theme": "Red",
// error: errFn,
items: [
{
"start" : item.start,
"end" : item.jamstart,
"point" : {
"lat" : item.lat,
"lon" : item.lon
},
"title" : item.title,
"options" : {
// set the full HTML for the info window
"infoHtml": "<div class='custominfostyle'><b>"+item.title+"<br/>"+"Divisi :"+" "+item.description+"<br/>"+"Postition :"+item.lat+","+item.lon+
"</b></div>",
"theme": item.theme
}
}],events: {
click: function(marker, event, context){
markerSelected(context.id);
}
// items: [
// {
// "start" :"2016-05-27",
// "end" : "2016-05-27",
// "point" : {
// "lat" : -6.2206089,
// "lon" : 106.7810652
// },
// "title" : "ZAKI",
// "options" : {
// // set the full HTML for the info window
// "infoHtml": "<div class='custominfostyle'><b>Domenico Ghirlandaio</b> was a visual artist of some sort.</div>"
// }
// }]
}
}
}
],
// bandIntervals: [
// // Timeline.DateTime.DAY,
// // Timeline.DateTime.WEEK
// Timeline.DateTime.DAY,
// Timeline.DateTime.MONTH
// ]
// bandInfo: [
// {
// width: "85%",
// intervalUnit: Timeline.DateTime.DAY,
// intervalPixels: 210
// },
// {
// width: "15%",
// intervalUnit: Timeline.DateTime.MONTH,
// intervalPixels: 150,
// showEventText: false,
// trackHeight: 0.2,
// trackGap: 0.2
// }
// ]
bandIntervals: "wk"
});
// filter function for tags
var hasSelectedTag = function(item) {
console.log(item.opts.tags.indexOf(window.selectedTag));
// if no tag was selected, everything passes
return !window.selectedTag || (
// item has tags?
item.opts.tags &&
// tag found? (note - will work in IE; Timemap extends the Array prototype if necessary)
item.opts.tags.indexOf(window.selectedTag) >= 0
);
};
// add our new function to the map and timeline filters
tm.addFilter("map", hasSelectedTag); // hide map markers on fail
tm.addFilter("timeline", hasSelectedTag); // hide timeline events on fail
// onChange handler for pulldown menu
$('#tag_select').change(function() {
window.selectedTag = $(this).val();
// run filters
tm.filter('map');
tm.filter('timeline');
});
});
});
});
//<!--end loading data-->
</script>
<link href="css/examples.css" type="text/css" rel="stylesheet"/>
<style>
div#timelinecontainer{ height: 310px; }
div#mapcontainer{ height: 300px; }
</style>
</head>
<body>
<div id="help">
</div>
<div id="timemap">
<div id="timelinecontainer">
<div id="timeline"></div>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
</div>
</body>
</html>
new My json Data
{
"results":[
{
"lon":"106.7810652",
"title":"ZAKI",
"start":"2016-06-01",
"description":"OPERASIONAL",
"theme":"red",
"Id":1,
"lat":"-6.2206089",
"jamstart":"18:00:00"
},
{
"lon":"106.7822585",
"title":"ARDYAN",
"start":"2016-06-01",
"description":"OPERASIONAL",
"theme":"orange",
"Id":2,
"lat":"-6.2216851",
"jamstart":"18:00:00"
}
]
}
new output Image
console.log
TimeMaps
Does anyone have suggestions? Thanks,
I want map to my module with help of Knockoutjs and requrejs.
Here is my code:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script data-main="js/index2" src="js/libs/require/require.js"></script>
</head>
<body>
<div id="review"></div>
</body>
</html>
index2.js (my main js)
requirejs.config({
// Path mappings for the logical module names
paths: {
'knockout': 'knockout/knockout-3.3.0',
'jquery': 'jquery/jquery-2.1.3.min',
'jqueryui-amd': 'jquery/jqueryui-amd-1.11.4.min',
'signals': 'js-signals/signals.min',
'crossroads': 'crossroads/crossroads.min'
},
shim: {
'jquery': {
exports: ['jQuery', '$']
},
'crossroads': {
deps: ['signals'],
exports: 'crossroads'
}
},
});
require([
'test'
'knockout',
'jquery'
],
function (test, oj, ko, $)
$(document).ready(function () {
ko.applyBindings(test,
document.getElementById('review'));
}
);
);
test.js (Module)
alert("Test done!!!");
I have a kendo template in which I am binding a kendo DropDownList. I am having trouble getting HTML to show in the text of the dropdown.
$(function() {
var field = {
DisplayValue : "Blue",
OptionListDetails : [
{ Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
{ Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
{ Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
]};
var fieldObservable = kendo.observable(field);
var controlTemplate = kendo.template($("#dropdownTemplate").html());
var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
view.render($("#renderPlace"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script type="text/x-kendo-template" id="dropdownTemplate">
<select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" >
</select>
</script>
<div id="renderPlace">
Is there some sort of binding I can pass to get the HTML to work?
Well I was right that the solution involved additional bindings. I had to create another template and bind the data-template and data-value-template properties of the DropDownList.
$(function() {
var field = {
DisplayValue : "Blue",
OptionListDetails : [
{ Text : "<span style=\"color:#F00\">Red</span>", Value : "Red" },
{ Text : "<span style=\"color:#0F0\">Green</span>", Value : "Green" },
{ Text : "<span style=\"color:#00F\">Blue</span>", Value : "Blue" }
]};
var fieldObservable = kendo.observable(field);
var controlTemplate = kendo.template($("#dropdownTemplate").html());
var view = new kendo.View(controlTemplate(fieldObservable), { model: fieldObservable, wrap: false });
view.render($("#renderPlace"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css" rel="stylesheet"/>
<link href="//cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css" rel="stylesheet"/>
<script id="template" type="text/x-kendo-tmpl"> #=Text# </script>
<script type="text/x-kendo-template" id="dropdownTemplate">
<select data-bind="value: DisplayValue, source: OptionListDetails" data-role="dropdownlist" data-text-field="Text" data-value-field="Value" data-value-primitive="true" data-template="template" data-value-template="template" >
</select>
</script>
<div id="renderPlace">
This is a code for genearting graph in jsp.But the code is to be fail.Actually i using highchart for developing graph,but showeing an error..
<%# page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$(document).ready(function() {
var line2=$.parseJSON(document.getElementById("test").value);
var mydata = [[]];
var mydata1 = [[]];
for(var i=0; i<line2.length; i++)
{
//mydata[0].push([line2[i].time,line2[i].valueint]);
mydata[0].push([line2[i].time]);
mydata1[0].push([line2[i].valueint]);
}
alert(mydata);
alert(mydata1);
$('#container').highcharts({
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
categories: mydata
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '°C'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Temp',
data: mydata1
}]
});
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<input type="hidden" id ="test" value='[{"time":"2013-07-02 18:33:52","valueint":25.000},{"time":"2013-07-02 18:34:22","valueint":27.000},{"time":"2013-07-02 18:34:52","valueint":25.000}]'>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Actually this is my code ..but not to generete graph baesd on time vs temperature ..Alerts are genereted but not in graph please update this code.
Two things:
categories should be an array of strings, so:
remove extra array here: var mydata = [[]]; -> var mydata = [];
remove extra array here: mydata[0].push([line2[i].time]); -> mydata.push(line2[i].time);
data should be an array of numbers, so remove extra arrays the same way as for categories.