2

I'm trying to make a Gantt like chart in jqplot. I want to make two timelines in the same plot. As you can see by the code and jsFiddel, I've got this working for the most part.

I've added a few series manually (and added a series config) ofcourse this will be in a loop later.

The problem I have now is that on the Y-axis I don't want numbers, but the text labels of the series ("contact" and "Locatie"). It would be nice if this is done dynamically, but 'hardcoding' them is not a problem since I only need two at the moment.

I can't find an example that does this. Any ideas? here's the jsFiddle: http://jsfiddle.net/NVbjv/1/

    var seriesCnf = Array();
    var loc = Array();

    // add location values
    loc.push([[1340877534000, 1, 'lagehaghorst'] , [1340877569000, 1, 'lagehaghorst' ]]);
    seriesCnf.push({color: "#941B80", label: "Locatie"});
    loc.push([[1340877779000, 1, 'weegnet'] , [1340877869000, 1, 'weegnet' ]]);
    seriesCnf.push({color: "#941B80"});
    loc.push([[1340877989000, 1, 'lagehaghorst'] , [1340878139000, 1, 'lagehaghorst' ]]);
    seriesCnf.push({color: "#941B80"});

    // add ignition values
    loc.push([[1340877534000, 2, 'uit'], [1340877561000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false, label: "Contact"});
    loc.push([[1340877561000, 2, 'aan'], [1340877779000, 2, null]]);
    seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
    loc.push([[1340877779000, 2, 'uit'], [1340877839000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false});
    loc.push([[1340877839000, 2, 'aan'], [1340878019000, 2, null]]);
    seriesCnf.push({color: "#00FF00", showMarker:false, pointLabels: {location: 'n'}});
    loc.push([[1340878019000, 2, 'uit'], [1340878139000, 2, null]]);
    seriesCnf.push({color: "#FF0000", showMarker:false});

    plot1 = $.jqplot('container', loc,{
        seriesColors: ["#941B80"],
        title: "Tijdlijn",
        axes: {
          xaxis: {
            renderer: $.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                    formatString: '%R',
                    angle: 0
                },
          },
          yaxis: {
            min: 0,
            tickInterval: 1,
          }
        },
        seriesDefaults: {
            showMarker:true,
            pointLabels:{
                show:true,
                location:'s',
                labelsFromSeries: true,
                formatter: $.jqplot.DefaultTickFormatter,
            }
        },
        series: seriesCnf,

        grid: {
            background: '#ffffff'
        }
    });
Jeroen
  • 1,638
  • 3
  • 23
  • 48
  • 1
    I've got a working thing on http://jsfiddle.net/NVbjv/4/, uncomment the function in axes.yaxis.tickOptions. BUT when you do this, you loose the labels under the lines, which actually gives the graph less information. Any ideas for having both? – Jeroen Jul 16 '12 at 15:34

0 Answers0