Pop-up window - mediaInfos - linechart values

3357
4
Jump to solution
07-01-2014 11:58 AM
MaryWindsor
New Contributor
Does anyone know what parameters for the values are needed for the linechart?


https://developers.arcgis.com/javascript/jshelp/intro_popuptemplate.html says that
the values are dependent on the type of chart.
Although I find info on piecharts and barcharts, I cannot find what type of format the values take for the linechart.

I'm looking for a date to go on the x-axis and numbers to go on the y-axis.



Thanks,

Mary
0 Kudos
1 Solution

Accepted Solutions
TracySchloss
Frequent Contributor

There is not room to put my whole code and it's not in production so I can't share it with you.  I have no idea how to navigate well in this new forum, I could barely get logged in, it took multiple tries to get this far,  Some things like yearList and rateList are the results of a queryTask, populated earlier in the code.  At least you have an idea of some syntax for the axes.

var lineChart = new Chart2D("chartDiv", {

        title: chartTitle,

        titlePos:"bottom",

        titleGap: 12,

        titleFont: "normal normal normal 13pt Arial"         

      });

   lineChart.addPlot("default", {

        type: "Lines",

        markers: true,

        hAxis: "x",

        vAxis: "y"});

      lineChart.addAxis("x", {

        title:"Rates by Year",

        titleOrientation:"away",

        labels: yearList,

        font: "normal normal normal 9pt Arial",

        majorLabels: true,

        minorTicks: false,

        minorLabels: false,

         microTicks: false });

      lineChart.addAxis("y", {

        title:rateNote,

        vertical: true,

        fixLower: "major",

        fixUpper: "major",

        min: 0,

        max: axisMax,          

        minorTicks: false,

        minorLabels: true});

      lineChart.addSeries("Series 1", rateList, {

          stroke: { color: "red", width: 2 }

      }

);

      var tip = Tooltip(lineChart, "default", {

        text : function(o) {

          var yr = yearList[o.x].text;

          var yrList = parseInt(yr) - 1;

          return ( yrList +'<br>' + o.y );

        }

  });

  lineChart.render(); 

View solution in original post

0 Kudos
4 Replies
MaryWindsor
New Contributor

The parameters I put in mediaInfos worked to make a piechart. After I switched the chart type to linechart, the linechart showed up but incorrectly placed the line. Without documentation, I'm not sure if there is a certain way to state parameters for the linechart so the data shows up correctly (Ex. x-axis values vs. y-axis values).

On the other hand, dojox charting seems to have additional formatting options which can be useful.

Along with looking at the sources provided, I came across this example using dojox: Info window with chart | ArcGIS API for JavaScript

I'll see what I can do.

Thanks for your help!

0 Kudos
TracySchloss
Frequent Contributor

There is not room to put my whole code and it's not in production so I can't share it with you.  I have no idea how to navigate well in this new forum, I could barely get logged in, it took multiple tries to get this far,  Some things like yearList and rateList are the results of a queryTask, populated earlier in the code.  At least you have an idea of some syntax for the axes.

var lineChart = new Chart2D("chartDiv", {

        title: chartTitle,

        titlePos:"bottom",

        titleGap: 12,

        titleFont: "normal normal normal 13pt Arial"         

      });

   lineChart.addPlot("default", {

        type: "Lines",

        markers: true,

        hAxis: "x",

        vAxis: "y"});

      lineChart.addAxis("x", {

        title:"Rates by Year",

        titleOrientation:"away",

        labels: yearList,

        font: "normal normal normal 9pt Arial",

        majorLabels: true,

        minorTicks: false,

        minorLabels: false,

         microTicks: false });

      lineChart.addAxis("y", {

        title:rateNote,

        vertical: true,

        fixLower: "major",

        fixUpper: "major",

        min: 0,

        max: axisMax,          

        minorTicks: false,

        minorLabels: true});

      lineChart.addSeries("Series 1", rateList, {

          stroke: { color: "red", width: 2 }

      }

);

      var tip = Tooltip(lineChart, "default", {

        text : function(o) {

          var yr = yearList[o.x].text;

          var yrList = parseInt(yr) - 1;

          return ( yrList +'<br>' + o.y );

        }

  });

  lineChart.render(); 

0 Kudos
MaryWindsor
New Contributor

Thanks, Tracy!

I was able to get a line chart to work in my pop-up using dojo charting options.

Now it looks like I'll have to do a querytask as well for multiple rows of data for matching dates to show up for one feature layer.

Mary

0 Kudos