• Hello, I’m back with another question!

    It would be great if I were able to manually pick the date on what the graph would display.

    I have found this online: Image
    But this uses a different kind of Javascript configuration again.
    This is it’s Javascript and I have no idea how to incorporate it into my graph.

    var chartData1 = [];
    var chartData2 = [];
    var chartData3 = [];
    var chartData4 = [];

    generateChartData();

    function generateChartData() {
    var firstDate = new Date();
    firstDate.setDate(firstDate.getDate() – 500);
    firstDate.setHours(0, 0, 0, 0);

    for (var i = 0; i < 500; i++) {
    var newDate = new Date(firstDate);
    newDate.setDate(newDate.getDate() + i);

    var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
    var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;

    var a2 = Math.round(Math.random() * (100 + i)) + 200 + i;
    var b2 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

    var a3 = Math.round(Math.random() * (100 + i)) + 200;
    var b3 = Math.round(Math.random() * (1000 + i)) + 600 + i * 2;

    var a4 = Math.round(Math.random() * (100 + i)) + 200 + i;
    var b4 = Math.round(Math.random() * (100 + i)) + 600 + i;

    chartData1.push({
    date: newDate,
    value: a1,
    volume: b1
    });
    chartData2.push({
    date: newDate,
    value: a2,
    volume: b2
    });
    chartData3.push({
    date: newDate,
    value: a3,
    volume: b3
    });
    chartData4.push({
    date: newDate,
    value: a4,
    volume: b4
    });
    }
    }

    var chart = AmCharts.makeChart(“chartdiv”, {
    type: “stock”,
    “theme”: “none”,
    pathToImages: “https://www.amcharts.com/lib/3/images/&#8221;,

    dataSets: [{
    title: “first data set”,
    fieldMappings: [{
    fromField: “value”,
    toField: “value”
    }, {
    fromField: “volume”,
    toField: “volume”
    }],
    dataProvider: chartData1,
    categoryField: “date”
    },

    {
    title: “second data set”,
    fieldMappings: [{
    fromField: “value”,
    toField: “value”
    }, {
    fromField: “volume”,
    toField: “volume”
    }],
    dataProvider: chartData2,
    categoryField: “date”
    },

    {
    title: “third data set”,
    fieldMappings: [{
    fromField: “value”,
    toField: “value”
    }, {
    fromField: “volume”,
    toField: “volume”
    }],
    dataProvider: chartData3,
    categoryField: “date”
    },

    {
    title: “fourth data set”,
    fieldMappings: [{
    fromField: “value”,
    toField: “value”
    }, {
    fromField: “volume”,
    toField: “volume”
    }],
    dataProvider: chartData4,
    categoryField: “date”
    }
    ],

    panels: [{

    showCategoryAxis: false,
    title: “Value”,
    percentHeight: 70,

    stockGraphs: [{
    id: “g1”,

    valueField: “value”,
    comparable: true,
    compareField: “value”,
    balloonText: “title:<b>value</b>”,
    compareGraphBalloonText: “title:<b>value</b>”
    }],

    stockLegend: {
    periodValueTextComparing: “[[percents.value.close]]%”,
    periodValueTextRegular: “[[value.close]]”
    }
    },

    {
    title: “Volume”,
    percentHeight: 30,
    stockGraphs: [{
    valueField: “volume”,
    type: “column”,
    showBalloon: false,
    fillAlphas: 1
    }],

    stockLegend: {
    periodValueTextRegular: “[[value.close]]”
    }
    }
    ],

    chartScrollbarSettings: {
    graph: “g1”
    },

    chartCursorSettings: {
    valueBalloonsEnabled: true,
    fullWidth:true,
    cursorAlpha:0.1
    },

    periodSelector: {
    position: “left”,
    periods: [{
    period: “MM”,
    selected: true,
    count: 1,
    label: “1 month”
    }, {
    period: “YYYY”,
    count: 1,
    label: “1 year”
    }, {
    period: “YTD”,
    label: “YTD”
    }, {
    period: “MAX”,
    label: “MAX”
    }]
    },

    dataSetSelector: {
    position: “left”
    }
    });

    chart.addListener(‘rendered’, function (event) {
    var dataProvider = chart.dataSets[0].dataProvider;
    $( “.amChartsPeriodSelector .amChartsInputField” ).datepicker({
    dateFormat: “dd-mm-yy”,
    minDate: dataProvider[0].date,
    maxDate: dataProvider[dataProvider.length-1].date,
    onClose: function() {
    $( “.amChartsPeriodSelector .amChartsInputField” ).trigger(‘blur’);
    }
    });
    });

    https://www.ads-software.com/plugins/amcharts-charts-and-maps/

Viewing 1 replies (of 1 total)
  • Plugin Author martynasma

    (@martynasma)

    I’m sorry I didn’t get back to you earlier.

    This should work just as well. You will have to just make some small modifications:

    1) Replace “chartdiv” with “%CHART%”.
    2) Replace two appearances of “$” (in the bottom of the code) with “jQuery”.
    3) Paste everything in the JavaScript box.
    4) Depending on your WordPress configuration you might also need to include the the jQuery UI and it’s DatePicker UI. Try adding the following into Resources tab:

    https://code.jquery.com/ui/1.11.4/jquery-ui.min.js
    https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css

    I hope this helps.

    here’s the updated code for your convenience:

    var chartData1 = [];
    var chartData2 = [];
    var chartData3 = [];
    var chartData4 = [];
    
    generateChartData();
    
    function generateChartData() {
      var firstDate = new Date();
      firstDate.setDate( firstDate.getDate() - 500 );
      firstDate.setHours( 0, 0, 0, 0 );
    
      for ( var i = 0; i < 500; i++ ) {
        var newDate = new Date( firstDate );
        newDate.setDate( newDate.getDate() + i );
    
        var a1 = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
        var b1 = Math.round( Math.random() * ( 1000 + i ) ) + 500 + i * 2;
    
        var a2 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
        var b2 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
    
        var a3 = Math.round( Math.random() * ( 100 + i ) ) + 200;
        var b3 = Math.round( Math.random() * ( 1000 + i ) ) + 600 + i * 2;
    
        var a4 = Math.round( Math.random() * ( 100 + i ) ) + 200 + i;
        var b4 = Math.round( Math.random() * ( 100 + i ) ) + 600 + i;
    
        chartData1.push( {
          date: newDate,
          value: a1,
          volume: b1
        } );
        chartData2.push( {
          date: newDate,
          value: a2,
          volume: b2
        } );
        chartData3.push( {
          date: newDate,
          value: a3,
          volume: b3
        } );
        chartData4.push( {
          date: newDate,
          value: a4,
          volume: b4
        } );
      }
    }
    
    var chart = AmCharts.makeChart( "%CHART%", {
      type: "stock",
      "theme": "none",
      pathToImages: "https://www.amcharts.com/lib/3/images/",
    
      dataSets: [ {
          title: "first data set",
          fieldMappings: [ {
            fromField: "value",
            toField: "value"
          }, {
            fromField: "volume",
            toField: "volume"
          } ],
          dataProvider: chartData1,
          categoryField: "date"
        },
    
        {
          title: "second data set",
          fieldMappings: [ {
            fromField: "value",
            toField: "value"
          }, {
            fromField: "volume",
            toField: "volume"
          } ],
          dataProvider: chartData2,
          categoryField: "date"
        },
    
        {
          title: "third data set",
          fieldMappings: [ {
            fromField: "value",
            toField: "value"
          }, {
            fromField: "volume",
            toField: "volume"
          } ],
          dataProvider: chartData3,
          categoryField: "date"
        },
    
        {
          title: "fourth data set",
          fieldMappings: [ {
            fromField: "value",
            toField: "value"
          }, {
            fromField: "volume",
            toField: "volume"
          } ],
          dataProvider: chartData4,
          categoryField: "date"
        }
      ],
    
      panels: [ {
    
          showCategoryAxis: false,
          title: "Value",
          percentHeight: 70,
    
          stockGraphs: [ {
            id: "g1",
    
            valueField: "value",
            comparable: true,
            compareField: "value",
            balloonText: "title:<b>value</b>",
            compareGraphBalloonText: "title:<b>value</b>"
          } ],
    
          stockLegend: {
            periodValueTextComparing: "[[percents.value.close]]%",
            periodValueTextRegular: "[[value.close]]"
          }
        },
    
        {
          title: "Volume",
          percentHeight: 30,
          stockGraphs: [ {
            valueField: "volume",
            type: "column",
            showBalloon: false,
            fillAlphas: 1
          } ],
    
          stockLegend: {
            periodValueTextRegular: "[[value.close]]"
          }
        }
      ],
    
      chartScrollbarSettings: {
        graph: "g1"
      },
    
      chartCursorSettings: {
        valueBalloonsEnabled: true,
        fullWidth: true,
        cursorAlpha: 0.1
      },
    
      periodSelector: {
        position: "left",
        periods: [ {
          period: "MM",
          selected: true,
          count: 1,
          label: "1 month"
        }, {
          period: "YYYY",
          count: 1,
          label: "1 year"
        }, {
          period: "YTD",
          label: "YTD"
        }, {
          period: "MAX",
          label: "MAX"
        } ]
      },
    
      dataSetSelector: {
        position: "left"
      }
    } );
    
    chart.addListener( 'rendered', function( event ) {
      var dataProvider = chart.dataSets[ 0 ].dataProvider;
      jQuery( ".amChartsPeriodSelector .amChartsInputField" ).datepicker( {
        dateFormat: "dd-mm-yy",
        minDate: dataProvider[ 0 ].date,
        maxDate: dataProvider[ dataProvider.length - 1 ].date,
        onClose: function() {
          jQuery( ".amChartsPeriodSelector .amChartsInputField" ).trigger( 'blur' );
        }
      } );
    } );
Viewing 1 replies (of 1 total)
  • The topic ‘Date picker’ is closed to new replies.