Line Chart (Dual-Y) x-axis data in reverse order












1














I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.



The direction attribute dont seem to be working for me.



original - https://jsfiddle.net/api/post/library/pure/
here is my change - https://jsfiddle.net/3m8vjows/



I have tried to give the direction to the x axis as below. But is not working.



  var materialOptions = {
chart: {
title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
},
width: 900,
height: 500,
series: {
// Gives each series an axis name that matches the Y-axis below.
0: {axis: 'Temps'},
1: {axis: 'Daylight'}
},
axes: {
// Adds labels to each axis; they don't have to match the axis names.
y: {
Temps: {label: 'Temps (Celsius)'},
Daylight: {label: 'Daylight'}
},
x:{direction:'-1'}
}
};









share|improve this question





























    1














    I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.



    The direction attribute dont seem to be working for me.



    original - https://jsfiddle.net/api/post/library/pure/
    here is my change - https://jsfiddle.net/3m8vjows/



    I have tried to give the direction to the x axis as below. But is not working.



      var materialOptions = {
    chart: {
    title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
    },
    width: 900,
    height: 500,
    series: {
    // Gives each series an axis name that matches the Y-axis below.
    0: {axis: 'Temps'},
    1: {axis: 'Daylight'}
    },
    axes: {
    // Adds labels to each axis; they don't have to match the axis names.
    y: {
    Temps: {label: 'Temps (Celsius)'},
    Daylight: {label: 'Daylight'}
    },
    x:{direction:'-1'}
    }
    };









    share|improve this question



























      1












      1








      1







      I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.



      The direction attribute dont seem to be working for me.



      original - https://jsfiddle.net/api/post/library/pure/
      here is my change - https://jsfiddle.net/3m8vjows/



      I have tried to give the direction to the x axis as below. But is not working.



        var materialOptions = {
      chart: {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Temps'},
      1: {axis: 'Daylight'}
      },
      axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
      Temps: {label: 'Temps (Celsius)'},
      Daylight: {label: 'Daylight'}
      },
      x:{direction:'-1'}
      }
      };









      share|improve this question















      I am working on a dual-y axis line chart and am trying to show the data in x axis in reverse order.



      The direction attribute dont seem to be working for me.



      original - https://jsfiddle.net/api/post/library/pure/
      here is my change - https://jsfiddle.net/3m8vjows/



      I have tried to give the direction to the x axis as below. But is not working.



        var materialOptions = {
      chart: {
      title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
      },
      width: 900,
      height: 500,
      series: {
      // Gives each series an axis name that matches the Y-axis below.
      0: {axis: 'Temps'},
      1: {axis: 'Daylight'}
      },
      axes: {
      // Adds labels to each axis; they don't have to match the axis names.
      y: {
      Temps: {label: 'Temps (Celsius)'},
      Daylight: {label: 'Daylight'}
      },
      x:{direction:'-1'}
      }
      };






      charts google-visualization






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 23 '18 at 20:52









      WhiteHat

      35.8k61476




      35.8k61476










      asked Nov 23 '18 at 18:47









      Abi PAbi P

      59121327




      59121327
























          1 Answer
          1






          active

          oldest

          votes


















          1














          the following config option is not supported by material charts



          {hAxis,vAxis,hAxes.*,vAxes.*}.direction


          there are several options material charts do not support,

          see --> Tracking Issue for Material Chart Feature Parity



          material = google.charts.Line & packages: ['line']



          classic = google.visualization.LineChart & packages: ['corechart']





          there is an option you can use to make classic charts look similar to material



          theme: 'material'


          if you choose to use classic instead...






          share|improve this answer





















          • Thanks. I think I mixed options.
            – Abi P
            Nov 23 '18 at 19:41











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451659%2fline-chart-dual-y-x-axis-data-in-reverse-order%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          1














          the following config option is not supported by material charts



          {hAxis,vAxis,hAxes.*,vAxes.*}.direction


          there are several options material charts do not support,

          see --> Tracking Issue for Material Chart Feature Parity



          material = google.charts.Line & packages: ['line']



          classic = google.visualization.LineChart & packages: ['corechart']





          there is an option you can use to make classic charts look similar to material



          theme: 'material'


          if you choose to use classic instead...






          share|improve this answer





















          • Thanks. I think I mixed options.
            – Abi P
            Nov 23 '18 at 19:41
















          1














          the following config option is not supported by material charts



          {hAxis,vAxis,hAxes.*,vAxes.*}.direction


          there are several options material charts do not support,

          see --> Tracking Issue for Material Chart Feature Parity



          material = google.charts.Line & packages: ['line']



          classic = google.visualization.LineChart & packages: ['corechart']





          there is an option you can use to make classic charts look similar to material



          theme: 'material'


          if you choose to use classic instead...






          share|improve this answer





















          • Thanks. I think I mixed options.
            – Abi P
            Nov 23 '18 at 19:41














          1












          1








          1






          the following config option is not supported by material charts



          {hAxis,vAxis,hAxes.*,vAxes.*}.direction


          there are several options material charts do not support,

          see --> Tracking Issue for Material Chart Feature Parity



          material = google.charts.Line & packages: ['line']



          classic = google.visualization.LineChart & packages: ['corechart']





          there is an option you can use to make classic charts look similar to material



          theme: 'material'


          if you choose to use classic instead...






          share|improve this answer












          the following config option is not supported by material charts



          {hAxis,vAxis,hAxes.*,vAxes.*}.direction


          there are several options material charts do not support,

          see --> Tracking Issue for Material Chart Feature Parity



          material = google.charts.Line & packages: ['line']



          classic = google.visualization.LineChart & packages: ['corechart']





          there is an option you can use to make classic charts look similar to material



          theme: 'material'


          if you choose to use classic instead...







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 23 '18 at 19:17









          WhiteHatWhiteHat

          35.8k61476




          35.8k61476












          • Thanks. I think I mixed options.
            – Abi P
            Nov 23 '18 at 19:41


















          • Thanks. I think I mixed options.
            – Abi P
            Nov 23 '18 at 19:41
















          Thanks. I think I mixed options.
          – Abi P
          Nov 23 '18 at 19:41




          Thanks. I think I mixed options.
          – Abi P
          Nov 23 '18 at 19:41


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.





          Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


          Please pay close attention to the following guidance:


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53451659%2fline-chart-dual-y-x-axis-data-in-reverse-order%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          Contact image not getting when fetch all contact list from iPhone by CNContact

          count number of partitions of a set with n elements into k subsets

          A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks