Forum Replies Created

Viewing 6 posts - 1 through 6 (of 6 total)
  • in reply to: How can I horizontally align two separate charts #20081

    Hi, you have understood my requirement correctly

    The slight difficulty for me is in your solution one chart has to be aware of the other. Whereas in my javascript (which is constructed programatically with Java) each chart is called chart and is within its own function so they are not visible outside of the function. I can rewrite my code if I have to but it would be better if I could set a margin value in each chart independently and that would ensure they were lined up correctly

    Is that possible ?

    <script type="text/javascript">
    function summaryChart() {
    var xLabelMap = {
      "0": "Loaded",
      "1": "MusicBrainz",
      "2": "Discogs",
      "3": "Artwork",
      "4": "Saved",
      "5": "Completed"
    };
    var chart = new CanvasJS.Chart("summary",{
      "title": {
        "text": "",
        "verticalAlign": "bottom",
        "horizontalAlign": "center"
      },
      "axisX": {
        "reversed": true,
        "labelMaxWidth": 250,
        "labelWrap": true,
        "interval": 1,
        "labelFontSize": 15,
        "labelFormatter": function(e) {return xLabelMap[e.value] || e.value;}
      },
      "axisY": {
        "reversed": false,
        "labelMaxWidth": 250,
        "labelWrap": true,
        "title": "% of Loaded Songs",
        "viewportMinimum": 0,
        "viewportMaximum": 12,
        "interval": 1,
        "titleFontSize": 15,
        "labelFontSize": 15,
        "labelFormatter": function(e) { return Math.round((e.value / 12) * 100) + "%"}
      },
      "data": [
        {
          "type": "stackedBar",
          "color": "#a2c2e6",
          "showInLegend": false,
          "dataPoints": [
            {
              "x": 0,
              "y": 12,
              "label": "Loaded"
            },
            {
              "x": 1,
              "y": 12,
              "label": "MusicBrainz"
            },
            {
              "x": 2,
              "y": 12,
              "label": "Discogs"
            },
            {
              "x": 3,
              "y": 12,
              "label": "Artwork"
            },
            {
              "x": 4,
              "y": 0,
              "label": "Saved"
            },
            {
              "x": 5,
              "y": 12,
              "label": "Completed"
            }
          ]
        }
      ]
    });
    chart.render();}
    function completenessChart() {
    var xLabelMap = {
      "0": "Acoustic",
      "1": "Album"
    };
    var chart = new CanvasJS.Chart("completeness",{
      "title": {
        "text": "",
        "verticalAlign": "bottom",
        "horizontalAlign": "center"
      },
      "axisX": {
        "reversed": true,
        "labelMaxWidth": 250,
        "labelWrap": false,
        "interval": 1,
        "labelFontSize": 15,
        "labelFormatter": function(e) {return xLabelMap[e.value] || e.value;}
      },
      "axisY": {
        "reversed": false,
        "labelMaxWidth": 250,
        "labelWrap": false,
        "title": "% of Loaded Songs",
        "viewportMinimum": 0,
        "viewportMaximum": 12,
        "interval": 1,
        "titleFontSize": 15,
        "labelFontSize": 15,
        "labelFormatter": function(e) { return Math.round((e.value / 12) * 100) + "%"}
      },
      "data": [
        {
          "type": "bar",
          "color": "#a2c2e6",
          "showInLegend": false,
          "dataPoints": [
            {
              "x": 0,
              "y": 12,
              "label": "Acoustic"
            },
            {
              "x": 1,
              "y": 12,
              "label": "Album"
            }
          ]
        }
      ]
    });
    chart.render();}
    window.addEventListener("load", summaryChart, false);window.addEventListener("load", completenessChart, false);</script><script src="../style/canvasjs.min.js">
    </script>
    in reply to: Labels on one bar of stacked bar #15270

    Maybe, but in the example they just show at the end of the bar, I would want the on the bar as my mockup shows

    in reply to: Is there a Bar100 #15269

    okay, thanks I get the difference but Im not clear do you use JSON inside the data part or is it all just Javascript ?

    in reply to: Is there a Bar100 #15262

    Thanks, I sort of worked this out but I am finding it a bit difficult to differentiate between json and javascript data.
    I assume in the jsfiddle the data: [] part is json and the rest javascript ?
    In the examples on https://canvasjs.com/docs/charts/chart-options/axisy/label-formatter/ are you doing it incorrectly then, or is that all pure javascript rather than json ?

    in reply to: Is there a Bar100 #15248

    Actually I was trying to implement it more like done on this page https://canvasjs.com/docs/charts/chart-options/axisy/label-formatter/ but having an issue since label-formatter is not in double quotes. Is it valid json for the value of label-fomatter to not be double quotes, or is this output not json.

    in reply to: Is there a Bar100 #15247

    Thankyou that is what i required.

Viewing 6 posts - 1 through 6 (of 6 total)