php - morris.js charts- Javascript var as label -
i'm using morris.js charts statistics page written in php , want make multiple labels.
my data array looks like:
{ y: '2015-12-24', z0: 'page' , a0: 275, z1: 'fb' , a1: 75, z2: 'gimper' , a2: 45, z3: 'kolegaignacy' , a3: 30, z4: 'ponki' , a4: 25}, { y: '2015-12-25', z0: 'page' , a0: 440, z1: 'rojo' , a1: 332, z2: 'fb' , a2: 145, z3: 'mamiko' , a3: 134, z4: 'gimper' , a4: 44}, { y: '2015-12-26', z0: 'izak' , a0: 450, z1: 'page' , a1: 425, z2: 'nitro' , a2: 330, z3: 'fb' , a3: 152, z4: 'rojo' , a4: 45}, { y: '2015-12-27', z0: 'izak' , a0: 462, z1: 'page' , a1: 435, z2: 'nitro' , a2: 219, z3: 'fb' , a3: 182, z4: 'mandzio' , a4: 145}, { y: '2015-12-28', z0: 'page' , a0: 504, z1: 'fb' , a1: 162, z2: 'nitro' , a2: 77, z3: 'mandzio' , a3: 66, z4: 'gimper' , a4: 53}, { y: '2015-12-29', z0: 'page' , a0: 400, z1: 'fb' , a1: 162, z2: 'naruciak' , a2: 76, z3: 'ponki' , a3: 46, z4: 'nitro' , a4: 40}, { y: '2015-12-30', z0: 'page' , a0: 260, z1: 'fb' , a1: 79, z2: 'dg' , a2: 79, z3: 'ponki' , a3: 56, z4: 'naruciak' , a4: 21}, { y: '2015-12-31', z0: 'page' , a0: 129, z1: 'fb' , a1: 42, z2: 'ponki' , a2: 30, z3: 'dg' , a3: 17, z4: 'nitro' , a4: 12}, { y: '2016-01-01', z0: 'page' , a0: 229, z1: 'fb' , a1: 89, z2: 'ponki' , a2: 35, z3: 'nitro' , a3: 22, z4: 'izak' , a4: 12}, { y: '2016-01-02', z0: 'page' , a0: 311, z1: 'fb' , a1: 117, z2: 'ponki' , a2: 42, z3: 'nitro' , a3: 35, z4: 'naruciak' , a4: 28}, { y: '2016-01-03', z0: 'page' , a0: 396, z1: 'fb' , a1: 172, z2: 'naruciak' , a2: 86, z3: 'dg' , a3: 31, z4: 'rojo' , a4: 25}, { y: '2016-01-04', z0: 'page' , a0: 369, z1: 'mandzio' , a1: 152, z2: 'fb' , a2: 131, z3: 'naruciak' , a3: 58, z4: 'ponki' , a4: 25}, { y: '2016-01-05', z0: 'page' , a0: 360, z1: 'fb' , a1: 115, z2: 'mandzio' , a2: 114, z3: 'yoczook' , a3: 74, z4: 'naruciak' , a4: 70}, { y: '2016-01-06', z0: 'page' , a0: 497, z1: 'naruciak' , a1: 165, z2: 'fb' , a2: 164, z3: 'dg' , a3: 83, z4: 'rembol' , a4: 79}, { y: '2016-01-07', z0: 'izak' , a0: 993, z1: 'rojo' , a1: 553, z2: 'page' , a2: 329, z3: 'isamu' , a3: 176, z4: 'fb' , a4: 64}` morris config:
var webview_trend = [<?php foreach($stat_webviev_trend $key=>$value) echo $value;?>], webview_trend_config = { data: webview_trend, xkey: 'y', ykeys: ['a0', 'a1', 'a2', 'a3', 'a4'], labels: [? ? ? ?], fillopacity: 0.6, hidehover: 'auto', behavelikeline: true, resize: true, stacked: true, pointfillcolors:['#ffffff'], pointstrokecolors: ['black'], linecolors:['lime', 'blue', 'red', 'cyan', '#909090'] }; webview_trend_config.element = 'webview_trend'; morris.bar(webview_trend_config); question: is possible make z0-z4 vars labels?
try this:
add hovercallback function updates labels based on data of webview_trend:
var data = [ { y: '2015-12-24', z0: 'page' , a0: 275, z1: 'fb' , a1: 75, z2: 'gimper' , a2: 45, z3: 'kolegaignacy' , a3: 30, z4: 'ponki' , a4: 25}, { y: '2015-12-25', z0: 'page' , a0: 440, z1: 'rojo' , a1: 332, z2: 'fb' , a2: 145, z3: 'mamiko' , a3: 134, z4: 'gimper' , a4: 44}, { y: '2015-12-26', z0: 'izak' , a0: 450, z1: 'page' , a1: 425, z2: 'nitro' , a2: 330, z3: 'fb' , a3: 152, z4: 'rojo' , a4: 45}, { y: '2015-12-27', z0: 'izak' , a0: 462, z1: 'page' , a1: 435, z2: 'nitro' , a2: 219, z3: 'fb' , a3: 182, z4: 'mandzio' , a4: 145}, { y: '2015-12-28', z0: 'page' , a0: 504, z1: 'fb' , a1: 162, z2: 'nitro' , a2: 77, z3: 'mandzio' , a3: 66, z4: 'gimper' , a4: 53}, { y: '2015-12-29', z0: 'page' , a0: 400, z1: 'fb' , a1: 162, z2: 'naruciak' , a2: 76, z3: 'ponki' , a3: 46, z4: 'nitro' , a4: 40}, { y: '2015-12-30', z0: 'page' , a0: 260, z1: 'fb' , a1: 79, z2: 'dg' , a2: 79, z3: 'ponki' , a3: 56, z4: 'naruciak' , a4: 21}, { y: '2015-12-31', z0: 'page' , a0: 129, z1: 'fb' , a1: 42, z2: 'ponki' , a2: 30, z3: 'dg' , a3: 17, z4: 'nitro' , a4: 12}, { y: '2016-01-01', z0: 'page' , a0: 229, z1: 'fb' , a1: 89, z2: 'ponki' , a2: 35, z3: 'nitro' , a3: 22, z4: 'izak' , a4: 12}, { y: '2016-01-02', z0: 'page' , a0: 311, z1: 'fb' , a1: 117, z2: 'ponki' , a2: 42, z3: 'nitro' , a3: 35, z4: 'naruciak' , a4: 28}, { y: '2016-01-03', z0: 'page' , a0: 396, z1: 'fb' , a1: 172, z2: 'naruciak' , a2: 86, z3: 'dg' , a3: 31, z4: 'rojo' , a4: 25}, { y: '2016-01-04', z0: 'page' , a0: 369, z1: 'mandzio' , a1: 152, z2: 'fb' , a2: 131, z3: 'naruciak' , a3: 58, z4: 'ponki' , a4: 25}, { y: '2016-01-05', z0: 'page' , a0: 360, z1: 'fb' , a1: 115, z2: 'mandzio' , a2: 114, z3: 'yoczook' , a3: 74, z4: 'naruciak' , a4: 70}, { y: '2016-01-06', z0: 'page' , a0: 497, z1: 'naruciak' , a1: 165, z2: 'fb' , a2: 164, z3: 'dg' , a3: 83, z4: 'rembol' , a4: 79}, { y: '2016-01-07', z0: 'izak' , a0: 993, z1: 'rojo' , a1: 553, z2: 'page' , a2: 329, z3: 'isamu' , a3: 176, z4: 'fb' , a4: 64} ] morris.bar({ element: 'chart', data: data, xkey: 'y', ykeys: ['a0', 'a1', 'a2', 'a3', 'a4'], labels: ['label1', 'label2', 'label3', 'label4', 'label5'], fillopacity: 0.6, hidehover: 'auto', behavelikeline: true, resize: true, stacked: true, pointfillcolors:['#ffffff'], pointstrokecolors: ['black'], linecolors:['lime', 'blue', 'red', 'cyan', '#909090'], xlabelangle: 60, hovercallback: function (index, options, content, row) { var currentdiv = ""; var finalcontent = $("<div/>"); $(content).each(function () { currentdiv = $(this); currentdiv.html(currentdiv.html().replace("label1", data[index].z0).replace("label2", data[index].z1).replace("label3", data[index].z2).replace("label4", data[index].z3).replace("label5", data[index].z4)) $(finalcontent).append(currentdiv); }); $(finalcontent) return finalcontent; } });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script> <script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script> <link href="http://cdn.oesmith.co.uk/morris-0.5.1.css" rel="stylesheet"/> <div id="chart"></div>
Comments
Post a Comment