jQuery HighCharts: DateTime X Axis Data label issues -

-

i have bunch of monthly datetime based data points need map in line chart. trying accomplish:

  1. i need points plotted on chart
  2. i need line charts of 3 series begin on first data point @ bottom left (january 1st).
  3. the first data point needs display text phrase , rest need remain formatted date.

please take @ jsfiddle. http://jsfiddle.net/fwgdw/7/

$(function () {     $('#container').highcharts({         chart: { type: 'spline' },         title: { text: 'performance chart' },         subtitle: { text: 'monthly date inverval' },         xaxis: {              type: 'datetime',             datetimelabelformats: { month: '%b-%y', year: '%b-%y'},             /*showfirstlabel: false,             startontick: true*/          },         yaxis: { min: 0 },         tooltip: { headerformat: '<b>{series.name}</b><br>',                    pointformat: '{point.x:%e. %b}: {point.y:.2f} m'},         series: [{             name: '1st series',             data: [                 [date.utc(2013, 0, 31), 0],                 [date.utc(2013, 1, 28), 0.6],                 [date.utc(2013, 2, 31), 1.7],                 [date.utc(2013, 3,  30), 2.8],                 [date.utc(2013, 4,  31), 0.6],                 [date.utc(2013, 5, 30), 3.6],                 [date.utc(2013, 6, 31), 3.6],                 [date.utc(2013,  7,  31), 2.81],                 [date.utc(2013,  8,  30), 0.78],                 [date.utc(2013,  9, 31), 0.98],                 [date.utc(2013,  10, 30), 1.84],                 [date.utc(2013,  11, 31), 1.80],                 [date.utc(2014, 0, 31), 0],                 [date.utc(2014, 1, 28), 0.6],                 [date.utc(2014, 2, 31), 0.7],                 [date.utc(2014, 3,  30), 0.8],                 [date.utc(2014, 4,  31), 0.6],                 [date.utc(2014, 5, 30), 0.6],                 [date.utc(2014, 6, 31), 0.6],                 [date.utc(2014,  7,  31), 0.81],                 [date.utc(2014,  8,  30), 0.78],                 [date.utc(2014,  9, 31), 0.98],                 [date.utc(2014,  10, 30), 1.84],                 [date.utc(2014,  11, 31), 1.80]             ]         }, {             name: '2nd series',             data: [                 [date.utc(2013, 0, 31), 1],                 [date.utc(2013, 1, 28), 3.6],                 [date.utc(2013, 2, 31), 2.2],                 [date.utc(2013, 3,  30), 4.2],                 [date.utc(2013, 4,  31), 4.6],                 [date.utc(2013, 5, 30), 5.6],                 [date.utc(2013, 6, 31), 0.6],                 [date.utc(2013,  7,  31), 0.21],                 [date.utc(2013,  8,  30), 2.78],                 [date.utc(2013,  9, 31), 0.98],                 [date.utc(2013,  10, 30), 2.84],                 [date.utc(2013,  11, 31), 1.80],                 [date.utc(2014, 0, 31), 4],                 [date.utc(2014, 1, 28), 3.6],                 [date.utc(2014, 2, 31), 5.7],                 [date.utc(2014, 3,  30), 4.8],                 [date.utc(2014, 4,  31), 2.6],                 [date.utc(2014, 5, 30), 0.1],                 [date.utc(2014, 6, 31), 0.9],                 [date.utc(2014,  7,  31), 0.81],                 [date.utc(2014,  8,  30), 3.78],                 [date.utc(2014,  9, 31), 0.98],                 [date.utc(2014,  10, 30), 1.84],                 [date.utc(2014,  11, 31), 1.80]             ]         }, {             name: '3rd series',             data: [                 [date.utc(2013, 0, 31), 0],                 [date.utc(2013, 1, 28), 0.6],                 [date.utc(2013, 2, 31), 0.7],                 [date.utc(2013, 3,  30), 0.8],                 [date.utc(2013, 4,  31), 0.6],                 [date.utc(2013, 5, 30), 0.6],                 [date.utc(2013, 6, 31), 0.6],                 [date.utc(2013,  7,  31), 1.81],                 [date.utc(2013,  8,  30), 7.78],                 [date.utc(2013,  9, 31), 7.98],                 [date.utc(2013,  10, 30), 1.2],                 [date.utc(2013,  11, 31), 1.80],                 [date.utc(2014, 0, 31), 0],                 [date.utc(2014, 1, 28), 0.6],                 [date.utc(2014, 2, 31), 2.2],                 [date.utc(2014, 3,  30), 4.8],                 [date.utc(2014, 4,  31), 0.6],                 [date.utc(2014, 5, 30), 0.6],                 [date.utc(2014, 6, 31), 2.6],                 [date.utc(2014,  7,  31), 1.81],                 [date.utc(2014,  8,  30), 1.78],                 [date.utc(2014,  9, 31), 3.98],                 [date.utc(2014,  10, 30), 2.84],                 [date.utc(2014,  11, 31), 1.80]             ]         }]     }); });
  1. the x axis labels not map actual data points. seem 1 month off.
  2. i need first data label on displayed , starting @ april not january. need first x axis label specific phrase , not formatted 31.jan date value.
  3. the final x axis data label jan-2015 not data point in series.

okay, here are:

the x axis labels not map actual data points. seem 1 month off.

they fine, consider first point: date.utc(2013, 0, 31) -> it's 31st of january. axis' labels displayed @ 1st of month.

i need first data label on displayed , starting @ april not january.

create own tickpositioner.

i need first x axis label specific phrase , not formatted 31.jan date value.

use labels.formatter. use this.isfirst determine first label.

the final x axis data label jan-2015 not data point in series.

set maxpadding = 0.


Comments

Post a Comment

Popular posts from this blog

c++ - OpenCV Error: Assertion failed <scn == 3 ::scn == 4> in unknown function, -

-
i read alot other solution still confused should mine... #include <opencv2/objdetect/objdetect.hpp> #include <opencv2/highgui/highgui.hpp> #include <opencv2/imgproc/imgproc.hpp> #include <iostream> #include <stdio.h> using namespace std; using namespace cv; int main(int argc, const char** argv) { //create cascade classifier object used face detection cascadeclassifier face_cascade; //use haarcascade_frontalface_alt.xml library face_cascade.load("haarcascade_frontalface_alt.xml"); //setup video capture device , link first capture device videocapture capturedevice; capturedevice.open(0); //setup image files used in capture process mat captureframe; mat grayscaleframe; //create window present results namedwindow("outputcapture", 1); //create loop capture , find faces while (true) { //capture new image frame capturedevice >> captureframe; ...
Read more

php - render data via PDO::FETCH_FUNC vs loop -

-
i've been using 2 methods render data. the first one: function name($id,$name){ return '<div id="'.$id.'">'.$name.'</div>'; } echo implode($pdo->query("select id,name user")->fetchall(pdo::fetch_func,'name')); the second one: $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); foreach($users $user){ echo name($user->id,$user->name); } i don't understand how pdo::fetch_func works. tried figure out. however, not well-documented. could please explain fetch mode? , also, 1 performs better? thank you. both methods wrong , have learn how use templates , how separate business logic presentation logic. $users = $pdo->query("select id,name user")->fetchall(pdo::fetch_obj); tpl::assign('users', $users); is code business logic part. then in template <?php foreach $users $row): ?> <div id="<?=$...
Read more

The canvas has been tainted by cross-origin data in chrome only -

-
uncaught securityerror: failed execute 'getimagedata' on 'canvasrenderingcontext2d': canvas has been tainted cross-origin data i getting above error in chrome. code(following) works fine in mozilla. have not corss domain issue. why above error in chrome? var wheel_canvas, wheel_context, can_w, can_h, wheel_grd; var large_radius = 160; var small_radius = 120; var wheel_canvas = document.getelementbyid('wheel_canvas'); var wheel_context = wheel_canvas.getcontext('2d'); var can_w = $(wheel_canvas).width(); var can_h = $(wheel_canvas).height(); var centerx = can_w / 2, centery = can_h / 2; var wheel_grd = null; test('#ff0000'); function test(hex) { $('#clrpicker').css({'left': 210, 'top': 210 }); inverted = hexbw(hex); $('#color_val_show').val(hex); current_color_hex_val_selected = hex; $('#color_val_show').css({'color':inverted,'background':hex}); fillgradient...
Read more