Databases
StackOverflow2013
Postsdbo
POJQuery Flot doesn't draw bar chart + how to display values from data in tooltip?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery Flot doesn't draw bar chart + how to display values from data in tooltip?
    primarykey
    data
    text
    <p>I have a problem with JQuery Flot chart. It doesn't show the bar chart (data_campaigns) at all but the (data_campaigns2) shows up just fine. </p> <p>I would also like to know how to show data from both charts in tooltip. Now the tooltip is just showing random X and Y variables but I would like it show the amount of clicks.</p> <pre><code>//Chart - Campaigns $(function () { var data_campaigns = [ [1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11], [1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7], [1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12], [1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9], [1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14], [1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9], [1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0], [1362186000,0],[1362272400,0]]; var data_campaigns2 = [ [1359766800,8],[1359853200,4],[1359939600,11],[1360026000,11], [1360112400,15],[1360198800,12],[1360285200,16],[1360371600,7], [1360458000,9],[1360544400,6],[1360630800,13],[1360717200,12], [1360803600,6],[1360890000,13],[1360976400,3],[1361062800,9], [1361149200,18],[1361235600,18],[1361322000,12],[1361408400,14], [1361494800,7],[1361581200,5],[1361667600,3],[1361754000,9], [1361840400,15],[1361926800,14],[1362013200,4],[1362099600,0], [1362186000,0],[1362272400,0]]; var plot = $.plot($("#placeholder"), [ { data: data_campaigns,color:"rgba(0,0,0,0.2)", shadowSize:0, bars: { show: true, lineWidth: 0, fill: true, fillColor: { colors: [ { opacity: 1 }, { opacity: 1 } ] } } } , { data: data_campaigns2, color:"rgba(255,255,255, 0.4)", shadowSize:0, lines: {show:true, fill:false}, points: {show:false}, bars: {show:false}, } ], { series: { bars: {show:true, barWidth: 0.6} }, grid: { show:false, hoverable: true, clickable: false, autoHighlight: true, borderWidth:0 }, yaxis: { min: 0 }, xaxis: { tickDecimals: 0 } }); function showTooltip(x, y, contents) { console.log(x+","+y); var d = new Date(contents *1000); var curr_date = d.getDate(); var curr_month = d.getMonth(); curr_month++; var curr_year = d.getFullYear(); $('&lt;div id="tooltip"&gt;&lt;div class="date"&gt;'+curr_date + "." + curr_month + "." + curr_year+'&lt;\/div&gt;&lt;div class="title text_color_3"&gt;'+x+'%&lt;\/div&gt; &lt;div class="description text_color_3"&gt;CTR&lt;\/div&gt;&lt;div class="title "&gt;'+y+'&lt;\/div&gt;&lt;div class="description"&gt;Clicks&lt;\/div&gt;&lt;\/div&gt;').css( { position: 'absolute', display: 'none', top: y - 125, left: x - 40, border: '0px solid #ccc', padding: '2px 6px', 'background-color': '#fff', opacity: 10 }).appendTo("body").fadeIn(200); } var previousPoint = null; $("#placeholder").bind("plothover", function (event, pos, item) { $("#x").text(pos.x.toFixed(2)); $("#y").text(pos.y.toFixed(2)); if (item) { if (previousPoint != item.dataIndex) { previousPoint = item.dataIndex; $("#tooltip").remove(); var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2); showTooltip(item.pageX, item.pageY, x); } } }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USMika Saarinen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you are wanting to display time you need to multiply the UNIX time stamps by 1,000. Also, you should specify `xaxis:{ mode: "time"}`
      singulars
      1. POJQuery Flot doesn't draw bar chart + how to display values from data in tooltip?
      1. USBlake
    2. COThat didn't help. I think the problem is somehow related to the timestamps, because if I replace them with (1,2,3,4,5 etc) it works fine. Any ideas?
      singulars
      1. POJQuery Flot doesn't draw bar chart + how to display values from data in tooltip?
      1. USMika Saarinen
    3. COCreate a fiddle to better demonstrate your issues. The time stamps are not in the correct format - add "000" to each of them.
      singulars
      1. POJQuery Flot doesn't draw bar chart + how to display values from data in tooltip?
      1. USBlake
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload