How to plot multiple lines in a single graph using HighChart with JSON -
here code plotting multiple line in single grpah doesn,t working
<%@ 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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <title>untitled document</title> <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 line2 = $.parsejson(document.getelementbyid("test").value); alert(line2); var mydata = [ ]; var mydata1 = [ ]; var mydata2 = [ ]; (var = 0; < line2.length; i++) { //mydata[0].push([line2[i].time,line2[i].valueint]); mydata.push(line2[i].time); mydata1.push(line2[i].valueint); mydata2.push(line2[i].valueint1); } console.log(mydata,mydata1); $('#container').highcharts({ title: { text: 'vitals chart', x: -20 //center }, subtitle: { text: 'temperature (°c)', x: -20 }, xaxis: { title: { text: 'date & time' }, 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 }, { name: 'temp', data: mydata2 }] }); }); </script> </head> <body> <input type="hidden" id="test" value='[{"time":"2013-06-27 20:28:04","valueint":40","valueint1":64},{"time":"2013-07-0110:41:29","valueint":11","valueint1":11},{"time":"2013-07-17 18:55:02","valueint":40","valueint1":43}] '> <div id="container" style="min-width: 400px; height: 450px; margin: 0 auto"></div> </body> </html>
if 1 got idea please update code jsfidle.actuallu im doing in jsp web application in code in single line graph works perfect in mulple line thier erro
it doesn't work, because highcharts uses timestamps (time in milliseconds), dates "2013-06-27 20:28:04" incorrect. "valueint":40"
have quate. in case when have push object, need have y parameter value, instead of custom name.
Comments
Post a Comment