How do I change which field is displayed in a visual report chart

  • abithas
    Asked on May 2, 2016 at 11:39 AM

    I seem unable to add additional question responses from my form to my report form.  I have reviewed the video but when i attempt to add another chart, the same question from my form is added.  Please advise.  

    thank you

  • David JotForm Support
    Replied on May 2, 2016 at 1:04 PM

    I believe you are referring to the visual report builder.  If so, add your new chart/grid, click on the chart, then click on the little gear icon to open the settings:

    How do I change which field is displayed in a visual report chart Image 1 Screenshot 20

    Change the Chart Data to the field you wish to display in the chart.

  • abithas
    Replied on May 3, 2016 at 10:41 AM

    this does not work!!!..no other chart data do not display.  simply displays responses from chart already displayed.  No option to add charts/data from other responses on questionaire

  • David JotForm Support
    Replied on May 3, 2016 at 11:35 AM

    I checked with a couple of my forms and the visual report builder worked for each one.  If you wouldn't mind letting us know the form you are having trouble with, we will be happy to have a look at the report.  As far as I can tell, the visual report builder is working without issue:

    http://www.jotform.com/help/187-How-to-Create-a-Visual-Report-with-your-Form-Submissions

    If you wouldn't mind adding a screenshot of what you are seeing, that would also be most helpful.

  • abithas
    Replied on May 3, 2016 at 12:45 PM
    there is only a single form in our file..'Inhaler Survey"

    thanks

    ...
  • David JotForm Support
    Replied on May 3, 2016 at 1:28 PM

    This is due to your field not having labels.  The report builder is unable to pull them without labels.  Once I added labels to my test form, I was able to create a Chart from each field.  Without the labels, the report builder has no way of differentiating between fields.

    You can remove the labels from view by adding this code to your form:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    .form-label-left, .form-label-right, .form-label-top { display:none; }

  • abithas
    Replied on May 3, 2016 at 2:45 PM
    In the properties field, the questions are set as labels for each field...why do these not appear in the Visual Report?

    ...
  • David JotForm Support
    Replied on May 3, 2016 at 3:55 PM

    The field labels are empty:

    How do I change which field is displayed in a visual report chart Image 1 Screenshot 20

    The titles added to the fields are separate Text fields.

  • abithas
    Replied on May 3, 2016 at 4:45 PM
    where would i insert the following code below?

    .form-label-left, .form-label-right, .form-label-top { display:none; }


    .form-all {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-all {
    width: 690px;
    width: 100%;
    max-width: 690px;
    }
    .form-label-left,
    .form-label-right {
    width: 150px;
    }
    .form-label {
    white-space: normal;
    }
    .form-label.form-label-auto {
    display: inline-block;
    float: left;
    text-align: left;
    width: 150px;
    }
    .form-label-left {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: left;
    }
    .form-label-right {
    display: inline-block;
    white-space: normal;
    float: left;
    text-align: right;
    }
    .form-label-top {
    white-space: normal;
    display: block;
    float: none;
    text-align: left;
    }
    .form-all {
    font-size: 14px;
    }
    .form-label {
    font-weight: bold;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    font-weight: normal;
    }
    .supernova {
    background-color: #ffffff;
    background-color: #f5f5f5;
    }
    .supernova body {
    background-color: transparent;
    }
    /*
    @width30: (unit(@formWidth, px) + 60px);
    @width60: (unit(@formWidth, px)+ 120px);
    @width90: (unit(@formWidth, px)+ 180px);
    */
    /* | */
    @media screen and (min-width: 480px) {
    .supernova .form-all {
    border: 1px solid #dcdcdc;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.1);
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 480px) {
    .jotform-form {
    padding: 10px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 480px) and (max-width: 768px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 480px) and (max-width: 689px) {
    .jotform-form {
    padding: 30px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (min-width: 768px) {
    .jotform-form {
    padding: 60px 0;
    }
    }
    /* | */
    /* | */
    @media screen and (max-width: 689px) {
    .jotform-form {
    padding: 0;
    }
    }
    /* | */
    .supernova .form-all,
    .form-all {
    background-color: #ffffff;
    border: 1px solid transparent;
    }
    .form-header-group {
    border-color: #e6e6e6;
    }
    .form-matrix-table tr {
    border-color: #e6e6e6;
    }
    .form-matrix-table tr:nth-child(2n) {
    background-color: #f2f2f2;
    }
    .form-all {
    color: #555555;
    }
    .form-header-group .form-header {
    color: #555555;
    }
    .form-header-group .form-subHeader {
    color: #6f6f6f;
    }
    .form-sub-label {
    color: #6f6f6f;
    }
    .form-label-top,
    .form-label-left,
    .form-label-right,
    .form-html {
    color: #555555;
    }
    .form-checkbox-item label,
    .form-radio-item label {
    color: #6f6f6f;
    }
    .form-line.form-line-active {
    -webkit-transition-property: all;
    -moz-transition-property: all;
    -ms-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: #ffffe0;
    }
    /* ömer */
    .form-radio-item,
    .form-checkbox-item {
    padding-bottom: 0px !important;
    }
    .form-radio-item:last-child,
    .form-checkbox-item:last-child {
    padding-bottom: 0;
    }
    /* ömer */
    .form-single-column .form-checkbox-item,
    .form-single-column .form-radio-item {
    width: 100%;
    }
    .supernova {
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-repeat: repeat;
    }
    .supernova {
    background-image: none;
    }
    #stage {
    background-image: none;
    }
    /* | */
    .form-all {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    background-repeat: repeat;
    }
    .form-header-group {
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center top;
    }
    .form-line {
    margin-top: 12px;
    margin-bottom: 12px;
    }
    .form-line {
    padding: 12px 36px;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight: normal;
    }
    .form-all .form-pagebreak-back,
    .form-all .form-pagebreak-next {
    font-size: 1em;
    padding: 9px 15px;
    font-family: "Lucida Grande", sans-serif;
    font-size: 14px;
    font-weight: normal;
    }
    /*
    & when ( @buttonFontType = google ) {
    @import (css) "@{buttonFontLink}";
    }
    */
    h2.form-header {
    line-height: 1.618em;
    font-size: 1.714em;
    }
    h2 ~ .form-subHeader {
    line-height: 1.5em;
    font-size: 1.071em;
    }
    .form-header-group {
    text-align: left;
    }
    /*.form-dropdown,
    .form-radio-item,
    .form-checkbox-item,
    .form-radio-other-input,
    .form-checkbox-other-input,*/
    .form-captcha input,
    .form-spinner input,
    .form-error-message {
    padding: 4px 3px 2px 3px;
    }
    .form-header-group {
    font-family: "Lucida Grande", sans-serif;
    }
    .form-section {
    padding: 0px 0px 0px 0px;
    }
    .form-header-group {
    margin: 12px 36px 12px 36px;
    }
    .form-header-group {
    padding: 24px 0px 24px 0px;
    }
    .form-textbox,
    .form-textarea {
    padding: 4px 3px 2px 3px;
    }
    .form-textbox,
    .form-textarea,
    .form-radio-other-input,
    .form-checkbox-other-input,
    .form-captcha input,
    .form-spinner input {
    background-color: #ffffff;
    }
    [data-type="control_dropdown"] .form-input,
    [data-type="control_dropdown"] .form-input-wide {
    width: 150px;
    }
    .form-label {
    font-family: "Lucida Grande", sans-serif;
    }
    li[data-type="control_image"] div {
    text-align: left;
    }
    li[data-type="control_image"] img {
    border: none;
    border-width: 0px !important;
    border-style: solid !important;
    border-color: false !important;
    }
    .form-line-column {
    width: auto;
    }
    .form-line-error {
    overflow: hidden;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -ms-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
    -moz-transition-timing-function: ease;
    -ms-transition-timing-function: ease;
    -o-transition-timing-function: ease;
    transition-timing-function: ease;
    background-color: #fff4f4;
    }
    .form-line-error .form-error-message {
    background-color: #ff3200;
    clear: both;
    float: none;
    }
    .form-line-error .form-error-message .form-error-arrow {
    border-bottom-color: #ff3200;
    }
    .form-line-error input:not(#coupon-input),
    .form-line-error textarea,
    .form-line-error .form-validation-error {
    border: 1px solid #ff3200;
    -webkit-box-shadow: 0 0 3px #ff3200;
    -moz-box-shadow: 0 0 3px #ff3200;
    box-shadow: 0 0 3px #ff3200;
    }
    .ie-8 .form-all {
    margin-top: auto;
    margin-top: initial;
    }
    .ie-8 .form-all:before {
    display: none;
    }
    /* | */
    @media screen and (max-width: 480px), screen and (max-device-width: 768px) and (orientation: portrait), screen and (max-device-width: 415px) and (orientation: landscape) {
    .jotform-form {
    padding: 0;
    }
    .form-all {
    border: 0;
    width: 100% !important;
    max-width: initial;
    }
    .form-sub-label-container {
    width: 100%;
    margin: 0;
    }
    .form-input {
    width: 100%;
    }
    .form-label {
    width: 100%!important;
    }
    .form-line {
    padding: 2% 5%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    input[type=text],
    input[type=email],
    input[type=tel],
    textarea {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: initial !important;
    }
    .form-input,
    .form-input-wide,
    .form-textarea,
    .form-textbox,
    .form-dropdown {
    max-width: initial !important;
    }
    div.form-header-group {
    padding: 24px 0px !important;
    margin: 0 12px 2% !important;
    margin-left: 5% !important;
    margin-right: 5% !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
    [data-type="control_button"] {
    margin-bottom: 0 !important;
    }
    .form-buttons-wrapper {
    margin: 0!important;
    }
    .form-buttons-wrapper button {
    width: 100%;
    }
    table {
    width: 100%!important;
    max-width: initial !important;
    }
    table td + td {
    padding-left: 3%;
    }
    .form-checkbox-item input,
    .form-radio-item input {
    width: auto;
    }
    .form-collapse-table {
    margin: 0 5%;
    }
    }
    /* | *//*__INSPECT_SEPERATOR__*/

    ...