Rank: Advanced Member
Groups: Administrators, DataVizJavaScript, jQueryChart, jQueryDV, MvcChart, Registered Joined: 1/3/2011(UTC) Posts: 483
Thanks: 0 times Was thanked: 87 time(s) in 87 post(s)
|
For the category axis you need to use the indexes. Try using this code: Code: function addDays(date, value) { var newDate = new Date(date.getTime()); newDate.setDate(date.getDate() + value); return newDate; }
function round(d) { return Math.round(100 * d) / 100; }
var data1 = []; var data2 = [];
var yValue1 = 50; var yValue2 = 200;
var date = new Date(2010, 0, 1);
var isRendered = false;
var curSequence = 0;
function renderChart() {
$('#jqChart').jqChart({ title: 'Chart Title', legend: { title: 'Legend' }, border: { strokeStyle: '#6ba851' }, background: "black", tooltips: { type: 'shared' }, shadows: { enabled: true }, crosshairs: { enabled: true, hLine: false, vLine: { strokeStyle: '#cc0a0c' } }, axes: [ { type: 'category', location: 'bottom', zoomEnabled: true, plotBands: [], labels: { fillStyle: 'white', resolveOverlappingMode: 'hide' } } ], series: [ { title: 'Series 1', type: 'line', data: data1, markers: null }, { title: 'Series 2', type: 'line', data: data2, markers: null } ] });
var selectedDate = null;
$('#jqChart').bind('dataHighlighting', function (e, data) { if (data) { selectedDate = data[0].x; } else { selectedDate = null; } }); }
function dataFeed() { curSequence++; var dateStr = getDateStr(date);
yValue1 += Math.random() * 10 - 5; data1.push([dateStr, round(yValue1)]);
yValue2 += Math.random() * 10 - 5; data2.push([dateStr, round(yValue2)]);
date = addDays(date, 1);
if (isRendered) { $('#jqChart').jqChart('update'); } else { renderChart(); isRendered = true; }
if (curSequence >= 200) { clearInterval(timer); timer = null; alert(curSequence); } else if (curSequence == 75) { insertPlotBand(0, 74); } }
function getDateStr(dateObj) { var year = dateObj.getFullYear();
var month = dateObj.getMonth() + 1; if (month < 10) month = "0" + month;
var date = dateObj.getDate(); if (date < 10) date = "0" + date;
var timeStr = getTimeStr(dateObj);
return (year + "/" + month + "/" + date + " " + timeStr); }
function getTimeStr(dateObj) { var hour = dateObj.getHours(); if (hour < 10) hour = "0" + hour;
var minute = dateObj.getMinutes(); if (minute < 10) minute = "0" + minute;
return (hour + ":" + minute); }
function insertPlotBand(fromDate, toDate) {
var axes = $('#jqChart').jqChart('option', 'axes');
axes[0].plotBands.push( { from: fromDate, to: toDate, fillStyle: 'red' });
$('#jqChart').jqChart('update'); }
var timer = setInterval(dataFeed, 100); Best Regards, Dragan Matek jqChart Inc.
|